How to Customize the Look of Your Forms with CSS

body {
font-family:verdana;
font-size:14px;
color:green;
}
Note that you can also change the font color in the Form Details screen of the online form builder.

Posted by: FormSmarts | Nov 29th, 2011 at 5:27 am

How do I change the size, font and color of text?

Posted by: Paul | Nov 29th, 2011 at 5:23 am

To increase the the height of text area fields, you can use:

.textarea {
height:250px;
}

Posted by: FormSmarts | Dec 3rd, 2011 at 5:34 am

UPDATE: You no longer need to upload a logo for the system to pick up your CSS stylesheet.

Posted by: FormSmarts | Dec 20th, 2011 at 3:07 am

Hi David,
Headings define sections in the form’s HTML. You’ll need this to define CSS rules that only apply to checkboxes in that section and not to other input fields. Hiding the heading’s text is only a CSS-rule away:

#section_1 .fld:first-child, #section_2 .fld:first-child{display:none;}

Display all checkboxes in section_1 on one line:

#section_1 .fld {width:40px;}
#section_1 .fld .lbl{width:10px;}
#section_1 .fld .inp{width:15px;}

Here is a demo and the CSS. You can view the original form here. For “Please select up to five numbers” I used a Text Block.

Posted by: FormSmarts | Feb 16th, 2012 at 12:06 pm

Hi Isaac,
First you need to add three headings to each of your forms like on this form. On FormSmarts, each heading defines a logical section within a form. We will need this to be able to provide different CSS rules for each section.

Move the first drop-down to the first section and the second one to the second section.

Here is the CSS:

(Headings are only used to define sections, hide the text. )

#section_1 .fld:first-child, #section_2 .fld:first-child, #section_3 .fld:first-child{display:none;}

Reduce the width of the 2 fields so they fit on one line:

#section_1, #section_2{width:200px; float:left;}

Left margin:

#section_1{margin-left:50px;}

Here is a demo and the CSS code.

Note 1: CSS styling won’t work unless you have verified your website. See instruction above.
Note 2: For your form in Hebrew, change “left” and “margin-left” in the CSS code to “right” and “margin-right” respectively.

Posted by: FormSmarts | Feb 19th, 2012 at 10:19 am

Hi Isaac,
You first need to verify your site http://www.integrazia.com in the Settings tab of the online form builder, under Websites.

Once done, save the CSS code into a file on your site, for example http://www.integrazia.com/css/formsmarts-pt-br.css
Then change the URL in the HTML code snippet for your form in Portuguese to: http://formsmarts.com/form/wuy?mode=embed&lay=1&lang=pt-br&style=/css/formsmarts-pt-br.css

For your form in Hebrew, save the CSS code into another file on your site, say http://www.integrazia.com/css/formsmarts-he.css and modify it as explained under Note 2 in my previous reply. Then update the URL in the HTML code for you form to: http://formsmarts.com/form/wu9?mode=embed&lay=1&lang=he&style=/css/formsmarts-he.css

Posted by: FormSmarts | Feb 20th, 2012 at 5:12 am

Matthew,
You need to reduce the size of the ‘inp’ div around the input field so the Help icon fits on the same line:

#section_1 .fld .inp, #section_2 .fld .inp {
width:100px;
}

To resize the text area, you can use:

#section_3 .fld .inp textarea {
height: 200px;
}

Each field (including the label) is enclosed in a div with the class fld. To reduce the vertical space between fields, change the bottom margin & padding of the div:

.fld {
margin-bottom: .2em;
padding-bottom: .2em;
}

See the demo form and the full CSS code.

Posted by: FormSmarts | Nov 15th, 2012 at 4:40 pm

Cora,
This will make rounded text boxes:

input[type="text"], textarea {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}


Posted by: FormSmarts | Jul 7th, 2013 at 3:00 am

AMoss, we’re going to allow users to change the color of buttons in the Form Details screen of the Form Builder in the coming months. In the meantime, you can create a custom CSS stylesheet with the rule: .button-primary{background-color: #000000, border: 1px solid #000000}.

Posted by: FormSmarts | Mar 23rd, 2018 at 1:32 pm