Form Builder create 2 columns

[ethical]

I couldn't find a solution to what i want to do. I am recreating a clients form in the formbuilder 0.3

The issue is i want to display the text names in one column and the text boxes in a second column. I looked around and have not been able to find a way to do this. The default display really does look kinda crappy since the fields and names are all over the place?

I am also pretty sure this is an easy fix but i've no idea what to do. any help would be greatly appreciated

Thanks

John

[ars17]

Hi John,

I wanted to do a similar thing a few weeks ago with a form I was recreating in CMSMS.  What worked for me was to select the custom template option and use CSS to style the form the way I wanted.  I got the labels and input boxes on separate columns by making them both floats:

Code: Select all

.formbuilderform div input{
  float: left;
}

.formbuilderform div label {
  float: left;
  text-align: right;
}

where formbuilderform is the class of the form you created. The text align right makes all the labels line up on the right side and you can add padding and margins to control the locations and spacings of the labels and the boxes.

There are a bunch of CSS references available on the web on how to style forms which helped me as I'm quite new to CSS, so my way might not be the most elegant and I'd welcome any suggestions on how to improve my CSS.

Adam

[ethical]

thanks!

that has pointed me in the right direction. plus this tutorial i found rather usefull:

http://www.websiteoptimization.com/speed/tweak/forms/

one more question, I have a radio button group that i want displayed all on one line, but it takes the label styling for each entry how can i set a special case for this?

[ars17]

I encountered the same problem as well, but I was lazy and just made the selection a drop down 

You can get around this by defining a class for either your radio button labels or your main labels so that you can style them differently.  After looking at the default custom template, it seemed easier to me to set the class for the main labels. I found the following line:

Code: Select all

<label for="{$entry->input_id}">{$entry->name}</label>

and just add class="whatever" to define the class. This way, your main labels can be styled in CSS using label.whatever while your individual button labels can be styled using label.

[ethical]

hi Ars thanks for your help. Yea I was thinking of going to drop down route as well, just seems easier and the client won't care so much i dont think

[stefsegers]

Hey Guys,

I still don't understand why in the new build the TABLE/CSS option is gone. This was very easy.
Now even with your explanations I still have no clue how to make a 2 column form

Can anybody show me a complete template??

[calguy1000]

the table option was redundant and not necessary.  The table can be done with a custom template quite easily.

_SjG_ is though considering including some sample templates to make it easier for some of you though.

[ars17]

I had to install 0.3 to see what you were talking about...and it is quite different.  The combination of the Form Template and CSS is what you need to style the form the way you want it.  The template I use not much different than the default one (from 0.2.4 so I'm not sure how the new default template is) aside from a few additions to define separate classes.  What you really need is the right CSS to style the form the way you want.  The link above is a pretty good reference to start leaning how to style forms with CSS.  What I did, was create a new stylesheet and associate it with the page that contains your form.  In order to get the labels and input boxes on the same line, I just defined them as floats.  I put some bare minimum sample code below that should be enough to get you started...you'll have to play around with padding, margin, widths, etc. to get it how you like.

Hope that helps,
Adam

Just to note...the code only floats inputs, you'll have to do the same for form items that aren't inputs (textarea, pull down, etc.)

Code: Select all

.formbuilderform div input{
  float: left;
}

.formbuilderform div label {
  float: left;
  clear: left;
  text-align: right;
}

form .required {
  font-weight: bold;
}

[stefsegers]

Hey guys, thanks for the reply.

http://www.kammair.nl/index.php?page=we ... ndvluchten

That's the result of the CSS stylesheet. But it's not what I need.

I really need it to be like an table with 2 columns. like this one made with the older version of FormBuilder http://www.stagedesk.nl/index.php?page=huren

Is there a way to do this with CSS?

Greets,

Stef