[SOLVED] Formbuilder Form Layout help?

[forextrader36]

I have created a Form in Formbuilder and it works correctly.

However, I do not know where to go to change the layout of the form.

My Form:


As you can see the text fields for 'your name' 'your email address' and 'subject' do not line up.

I would like to be able to change the layout slightly so these field are all in line and also put spaces in between each field.

Can anybody point me in the right direction please?

[savagekabbage]

Using CSS you can achieve virtually any look & feel for your form.  You can also go into the form template, if you want to play around with it some.

Assigning a width and display:block to the should align the form fields.

[calguy1000]

adding something like this to your css (continuing on what savagekabbage said above) should help:

Code: Select all

.formbuilderform label {
  display: block
  width: 25%;
}

assuming that you didn't change the css class for the form in the formbuilder settings.

[forextrader36]

Code: Select all

.formbuilderform label {
  display: block
  width: 25%;
}

Where exactly does this code need to go?  Which is the CSS for formbuilder?

Is it the 'Form Template' in formbuilder settings, or the CSS template 'Layout: Left sidebar + 1 column' which is the template I am using on my site?

[calguy1000]

I created a new stylesheet, called it 'formbuilder' and put that code into it.

Then I attached that stylesheet to my page template.

[forextrader36]

Thanks Calguy1000,

It didn't work the first time I tried because the ; was missing after display:block

I put this into my Stylesheet Template:

Code: Select all

.formbuilderform label {
  display: block;
  width: 25%;
}

Great stuff!

[CMSMS-Fan]

Just be be awkward here I have a long form and wanted to have the labels to the left of the input fields but have all the input fields aligned.
What code would I use for that?

[calguy1000]

Code: Select all

.formbuilderform input {
  display: block;
  float left;
}

[CMSMS-Fan]

Thanks Calguy but it is doesn't appear to work It puts all the text above the input exactly as the previous code did.
What I am looking for is something like this:-

Name    | input area      |      Surname    | input area    |
Address |    big                    input area                      |
E-mail    | input area      |    Telephone  | input area    |
Country | input area      |      City          | input area    |

[Dr.CSS]

When you make the form you can give each field a class in the other tab and you can put fieldsets around a set of them...

Then CSS it... this was done that way...

http://mobilitypartners.com/index.php?page=contact

[calguy1000]

I used formbuilder for this form:  http://www.mybridalcollections.com.au/index.php?page=form

I gave all text fields the class 'field'.  All combobox groups the class 'cbgroup', all static text fields the class 'statictext', and that was about it.  the long combobox group I gave a special class name to so that I could change it's width, etc.

Then I used a stylesheet like this:

Code: Select all

/* FormBuilder Form Styles */

.formbuilderform .statictext  {
  font-weight: bold;
  padding-top: 1em;
  clear: left;
}

.formbuilderform label {
  font-size: 0.8em;
  font-weight: normal;
}

.formbuilderform .cbgroup .multipart {
   display: inline;
   float: left;
   width: 15%;
}

.formbuilderform .field {
   padding-top: 0.5em;
}

.formbuilderform .field label {
  display: block;
  width: 15%;
  float: left;
}

.formbuilderform .field input {
  display: block
  float: left;
}

.formbuilderform .lgfield {
   padding-top: 0.5em;
}

.formbuilderform .lgfield label {
  display: block;
  width: 25%;
  float: left;
}

.formbuilderform .lgfield input {
  display: block
  float: left;
}

.formbuilderform .textarea {
   padding-top: 0.5em;
   clear: left;
}

.formbuilderform .textarea label {
  display: block;
  width: 15%;
  float: left;
}

.formbuilderform .cbgroup2 .multipart {
   display: inline;
   float: left;
   width: 24%;
}

It may not be the best stylesheet, but I don't think I did too bad for my limited knowledge.

[savagekabbage]

Thanks Calguy but it is doesn't appear to work It puts all the text above the input exactly as the previous code did.
What I am looking for is something like this:-
Name    | input area      |      Surname    | input area    |
Address |    big                    input area                      |
E-mail    | input area      |    Telephone  | input area    |
Country | input area      |      City          | input area    |

I have created a two column form layout before. The code isn't very pretty, or easy, but can be nice when finished.

You will need to add these additional classes to your inputs:
Name - left
Surname - right
E-mail - left
Telephone - right
Country - left
City - right

Then you will have to modify your template and add something like before each input record:

Code: Select all

	 {if $entry->css_class == 'left'}
	 	<div style="clear:both;"></div>
	 {/if}

In your stylesheet you would use a combination of float and display:block to get it to look the way you want.  This is the only way I could think of to do a two column layout.

[Dr.CSS]

calguy

have you checked that site in IE and Firefox...

Firefox) boxes go beyond right border, and just above GOWNS on the left there is a 2px diff. in the header grey and the menu grey...

IE) there is a 10px gap/white space above GOWNS kinda cut the top off gowns...