Form Columns
Permalink Browser Info Environment
Can anyone give me an explanation (and maybe some basic code) for creating a two or three column form?
Many thanks.
Many thanks.
Type: | Discussion |
---|---|
Status: | In Progress |
You'll have to Google for something like "multi-column form css" or something like that. This would be beyond the scope of support for this add-on.
My mistake. I thought as this was the "Questions and Discussion" forum that one of the other users might contribute.
Well, you're right...it's kind of used as both actually. :)
I am accomplishing something like this with this css:
url:http://www.sierrafieldservice.com/index.php?cID=86...
steve
div#sem-field-container-33.sem-field-container , div#sem-field-container-38.sem-field-container , div#sem-field-container-41.sem-field-container , div#sem-field-container-26.sem-field-container , div#sem-field-container-27.sem-field-container , div#sem-field-container-15.sem-field-container , div#sem-field-container-17.sem-field-container , div#sem-field-container-8.sem-field-container , div#sem-field-container-10.sem-field-container , div#sem-field-container-5.sem-field-container , div#sem-field-container-2.sem-field-container { float: left; margin-right: 98px; }
url:http://www.sierrafieldservice.com/index.php?cID=86...
steve
Looks great tallacman! Thanks for posting.
Thank you very much! I worked with and modified your template and . . . voilà . . . my form had columns. Very helpful. Thanks again!
Glad I could help.
steve
steve
One follow-up question if you don't mind -- (1) What is the CSS used in the Styles box for the Submit button?
il link non funziona più, comunque grazie per il css
I know you replied to this several months ago, but your page is no longer posted for the example of creating a multi-column form.
You provided this code:
div#sem-field-container-33.sem-field-container ,
div#sem-field-container-38.sem-field-container ,
div#sem-field-container-41.sem-field-container ,
div#sem-field-container-26.sem-field-container ,
div#sem-field-container-27.sem-field-container ,
div#sem-field-container-15.sem-field-container ,
div#sem-field-container-17.sem-field-container ,
div#sem-field-container-8.sem-field-container ,
div#sem-field-container-10.sem-field-container ,
div#sem-field-container-5.sem-field-container ,
div#sem-field-container-2.sem-field-container {
float: left;
margin-right: 98px;
}
Where (specifically) would this code be placed? Thank you so much for your efforts!
You provided this code:
div#sem-field-container-33.sem-field-container ,
div#sem-field-container-38.sem-field-container ,
div#sem-field-container-41.sem-field-container ,
div#sem-field-container-26.sem-field-container ,
div#sem-field-container-27.sem-field-container ,
div#sem-field-container-15.sem-field-container ,
div#sem-field-container-17.sem-field-container ,
div#sem-field-container-8.sem-field-container ,
div#sem-field-container-10.sem-field-container ,
div#sem-field-container-5.sem-field-container ,
div#sem-field-container-2.sem-field-container {
float: left;
margin-right: 98px;
}
Where (specifically) would this code be placed? Thank you so much for your efforts!
It would go in your css file. It would have to have the number changed for your specific ID.
A bit tedious but does the trick, thanks for your input!
Hi tallacman, same question here please about location of CSS file. Any pointers appreciated.
I know this post hasn't been touched in a long time, but I found it helpful today. And for anyone else who stumbles upon it, to answer the question of where to put the css, you will add it to the style editor.
From the dashboard, under Advanced Forms >> Styles.
Create a style name.
Edit your newly created style.
At the very bottom of the listing is an open block labeled "Custom classes or IDs" place tallacman's code there.
>> Save All.
Then from the page that you have added the advanced form to edit, attach the style that you created.
When you save and preview you will see that some of your fields have shifted.
The id numbers that are used in the form by using tallacman's code will force that field to the left and the next field under it will wrap to the right of it.
Hope that is helpful for someone.
Ps - thanks tallacman; found this really helpful!
From the dashboard, under Advanced Forms >> Styles.
Create a style name.
Edit your newly created style.
At the very bottom of the listing is an open block labeled "Custom classes or IDs" place tallacman's code there.
>> Save All.
Then from the page that you have added the advanced form to edit, attach the style that you created.
When you save and preview you will see that some of your fields have shifted.
The id numbers that are used in the form by using tallacman's code will force that field to the left and the next field under it will wrap to the right of it.
Hope that is helpful for someone.
Ps - thanks tallacman; found this really helpful!