Page 1 of 1

[SOLVED] Customizing Form Look

Posted: Wed Oct 07, 2009 10:12 pm
by CMSmonkey
I am using CMSMS 1.6.5 and Form Builder 0.5.12.

I have a form that is separated into 2 sections - one collecting personal information, and the second collecting general medical information.  I distinguished these sections just by using a static text field.  Rather than have the entire form in one column, I would like to put the 2 "sections" next to each other.

So instead of this:

Personal Information

Name: ___________
Email: _______________

General Medical Information
Weight: _______
Height: _______


I want something like this:

Personal Information                    Medical Information:

Name: __________                     Weight: _________
Email: ____________                   Height: __________



Is this possible?  Currently I am just using the "Table Template - Title on Top" template.

Thanks in advance for the assistance.

Re: Customizing Form Look

Posted: Thu Oct 08, 2009 9:07 am
by Dr.CSS
Yes it can be 2 col. but I would do it using non table template with 2 fieldsets so they could both float left and sit side by side...

Re: Customizing Form Look

Posted: Fri Oct 09, 2009 1:53 am
by CMSmonkey
Dr. CSS wrote: Yes it can be 2 col. but I would do it using non table template with 2 fieldsets so they could both float left and sit side by side...
Thanks, Dr. CSS - but I haven't a clue how to do this.  Can you provide any insight?  I also noticed that you moved this from the Modules & Add-Ons forum to the Layout and Design (CSS & HTML) forum -- could this project be done entirely with CSS or do I still need to configure the form template?

Re: Customizing Form Look

Posted: Sat Oct 10, 2009 5:12 am
by Dr.CSS
Using non table template, when making the form add a fieldset with a class of your choosing first then add another one give it class of personal add all fields for personal info then close that fieldset add another filedset class of medical add other fields for info close fieldset, close first fieldset...

In CSS set width of first filedset, then for next 2 fieldsets give width of 49% of first one then float both left with a bit of margin on medical one this should get them to sit side by side, of course you style the rest as needed...

Re: Customizing Form Look

Posted: Mon Oct 12, 2009 9:38 pm
by CMSmonkey
EXCELLENT!  Thank you SOOOOOOOOOOOOO much for the help.  I am going to try that out.