How to set or reset the styles of the form fields

Posted by on Aug 14, 2010 in Tips

How to set or reset the styles of the form fields:


Version 4.xx, introduces more style settings for Style of labels, field inputs, buttons, and text.

Version 4.xx has a new improved Styles settings tab. The style settings are now divided into “Alignment DIVs”, and “Style of labels, field inputs, buttons, and text”.

“Alignment DIVs” settings are for adjusting the alignments of the form elements. You can also check “reset the alignment” to return to defaults and make the “labels on top” or “labels on left”.

“Style of labels, field inputs, buttons, and text” settings are for setting style of the form labels, field inputs, buttons, and text.

This is a great way to change label or field colors. For example, you can add color:green; to the “Field Labels” settings if you want (or any other color).

If you have recently upgraded to version 4.xx from 3.xx
Since the 4.xx version introduced more style settings, you may need to reset the styles to acquire the newest defaults. You can perform this for one form, or for all forms at once.

Reset styles on one form
Go to the Fast Secure Contact Form settings page, select the form you want to edit and click on the “Styles” tab.
Check the box “Reset the alignment styles to labels on top (default, recommended)” . Also,
Check the box “Reset the styles of labels, field inputs, buttons, and text” and click “Save Changes”

Reset styles on all forms at once
Go to the Fast Secure Contact Form settings page, select the form you want to edit.
Use the “Reset Styles on all forms” button on the Tools tab. You should click it once after upgrading from version 3.xx to 4.xx to acquire the many changes/improvements to the default styles.


Style possibilities are unlimited. You can change color, element width / size, fonts size, etc.

Some examples: See W3Scools CSS Reference for more ideas.
Font size: font-size:x-small; (or) font-size:medium; (or) font-size:large;
Font color: color:green; (or use hex) color:#000000;
Input color: color:#000000; background-color:#CCCCCC;
Width: width:250px;
Field Borders: border:1px solid black;
Alignment: text-align:left; (or) text-align:right;

Change color of field labels:
Change this setting: Field labels:

Change color of option labels:
Change this setting: Options labels:

Setting width of text input fields:
Change this setting: Input text fields:

Setting width of textarea fields:
Change this setting: Input textarea fields:

Setting width of select fields:
Change this setting: Input select fields:

Setting width of entire form:
Change this setting: Form DIV:

My Twenty Twelve Theme adjusts itself for different screen sizes (responsive), and that can make the contact form spill out. How do I make the form be responsive?

Starting with version 4.xx, the default style “Labels on top” is responsive, but your theme has to be responsive also for this the responsive feature to work. You may need to reset the defaults, see above.

I don’t like inline styles, how do I use my own stylesheet?
Version 4.xx introduced a new setting on the Style tab:
“Select the method of delivering the form style”:
“Internal Style Sheet CSS (default)”
“External Style Sheet CSS (requires editing theme style.css)”

After enabling “External Style Sheet CSS” you can click a link “View custom CSS” to copy it before adding it to your stylesheet.

By default, the FSCF form styles are editable on the Styles tab when using “Internal Style Sheet CSS”. The style is included inline in the form HTML. CSS experts will like the flexibility of using their own custom style sheet by enabling “External Style Sheet CSS”. Then the FSCF CSS will NOT be included inline in the form HTML, and the custom CSS below must be included in the style.css of the theme. Be sure to remember this if you switch your theme later on.

Premium themes can now add support for Fast Secure Contact Form style in the theme’s CSS. Select “External Style Sheet CSS” when instructed by the theme’s installation instructions.

Targeting specific field with external CSS
Version 4.xx introduced optimized indented HTML source code and ID tags for the DIVs.
You can view the HTML source to determine the ID for the element you want to change.
Here are some examples:
To style the label, no IDs or classed are required, because the “for” attribute is unique:
label[for=”fscf_name1″] { color: #DD00EE; }

To style the input field, all that’s needed is the unique ID:
input#fscf_name1 { background-color: #BBECDB; }

To style all the divs, use the class:
.fscf-div-field-left { padding-top: 20px; }
div.fscf-div-field-left { padding-top: 20px; }

To target one unique div, use the unique ID:
#fscf_div_field1_0 { padding-top: 20px; }
div#fscf_div_field1_0 { padding-top: 20px; }

Do you need more help?

Send us a Donation:

Donate to Mike Challis