Desperately need a horizontal form!
Permalink
Help please! Does anyone know how to modify the form block to allow a form to lay out horizontally? All I need is "Name," "Email," and "Submit" all on the same line. Attached is a mockup of what I need. Please please please help! Thank you so much!
BRILLIANT!!!! THAT WORKED!!!! THANK YOU!!!!!!!!!!!
One question about this. I'm trying to put an image background behind the form now to make it look a little cooler. Any thoughts as to why it is using a white background (I'm guessing)? See attached image. The whole background should be purple but it crops...
EDIT: Looks like a theme thing... works fine on Plain Yogurt, but not so much on Heywater...
EDIT: Looks like a theme thing... works fine on Plain Yogurt, but not so much on Heywater...
In Chrome, try right-clicking on the form and choosing 'Inspect Element'. Then have a look at what CSS rules are being applied.
I can't thank you enough for your help! One more question, because you're the expert! Do you have any idea how I can put the actual words (for example, "Name" and "Email") inside of the entry boxes instead of outside of them?
Simply change the value attribute of the input in the PHP file, like this (sorry, this is just an HTML example):
<input id="test" name="var" value="Email" onclick="if(this.value==='Email')this.value='';">
I modified the custom template output file from jordanlev's fine block called 'Form Tableless Layout' available here:
http://www.concrete5.org/marketplace/addons/form-tableless-layout/...
Download the attached file and change the extension to .php
Upload the renamed file to: [root]/blocks/form/templates/ so you end up with: [root]/blocks/form/templates/tableless_horizontal_layout.php
Then put the page containing the form into Edit Mode and click on the form. Choose 'Custom Template' and choose 'Tableless Horizontal Layout' from the drop-down list.
To make changes to this layout, edit the css at the top of the 'tableless_horizontal_layout.php' file. I just made the 'text' and 'email' classes 'float:left' which seems to meet your requirements but remember that this css will make all text and email fields behave the same way on the form which might be troublesome on a large form.