Fast Secure Contact Form Customize DIV Formatting

Fast Secure Contact Form Customize DIV Formatting shows you how to format a standard form through the Style tab much more.

Last Updated: January 12, 2019

Latest News: I have updated the information below.

The plugin controls the form design using different HTML DIV containers and applying custom CSS code.  In this post you are going to learn what part of a standard form  each DIV container controls. You will notice how flexible this plugin is once you become familiarize with the style functionality. In all this plugin gives you much control over each form you develop for your site.

Note: It does require a basic understanding of CSS and HTML. This would help you even more.  If you need to know, you can check the following URL W3Schools. This site has all you need to know and even practical exercises.

Fast Secure Contact Form Customize DIV Formatting

Step 1 ) Go to Settings -> FS Contact Form -> Styles tab to edit the form style format.

The Styles tab allows you to customize the style in different areas of the contact form. The image below displays a standard default form which is created when you install and activate the plugin for the first time. In this example a border has been added around the form to allow you to see the full contact form width.

Note: When you add a border around the form the following Title is also added Contact Form. in you have added an entry in Fieldset box label:

The following list shows you all the DIV containers you can customize to make changes to the design of the the form by adding HTML and CSS. Each DIV container controls an area of the form. All the fields in the list below with red added, controls a standard form.

1. Form DIV: (Field used for standard form.)
2. Left Box DIV:
3. Right Box DIV:
4. Clear DIV: (Field used for standard form.)
5. Field Left DIV: (Field used for standard form.)
6. Field Follow DIV:
7. Field Pre-Follow DIV:
8. Input labels alignment DIV: (Field used for standard form.)
9. Input fields alignment DIV:
10. Small CAPTCHA DIV:
11. Large CAPTCHA DIV: (Field used for standard form.)
12. CAPTCHA image alignment: (Field used for standard form.)
13. CAPTCHA reload image alignment: (Field used for standard form.)
14. Submit DIV: (Field used for standard form.)
15. Form Fieldset Box: (Optional but used for this tutorial)

Standard Form Fields Display

The following image shows you a standard from. This form has no added fields and no customize formatting. You can also see the right side of the form is wide and empty. This might look ugly to some. But remember a border was added for display purpose. If the border is removed then the form will look better and it will give you the impression that is much narrower. However the form width is still the same. In this case you can either reduce the width of the form or you might want to center the form. If you want to learn to how to center the form please read the following tutorial Fast Secure Contact Form Center Style.

==============================

Form DIV Settings

Step 2 ) The following image Form DIV: shows you the form area it controls. It controls the over all width of the form.

Form DIV default settings

• Form DIV: width:99%; max-width:555px;

The following HTML source code in blue is controlled by the above field.

<div id=”FSContact1″ style=”width:99%; max-width:555px;”>
<form id=”fscf_form1″ action=”http://localhost/wordpress/contact-form-test/#FSContact1″ method=”post”>
<fieldset id=”fscf_form_fieldset1″ style=”border:1px solid black; width:99%; max-width:550px; padding:10px;”>
<input name=”fscf_submitted” value=”0″ type=”hidden”>
<input name=”fs_postonce_1″ value=”ec65333ff1274e2ed1ed4e9816b04741,1476146337″ type=”hidden”>
<input name=”si_contact_action” value=”send” type=”hidden”>
<input name=”form_id” value=”1″ type=”hidden”>
<input name=”mailto_id” value=”1″ type=”hidden”>
</form>
</div>

==============================

Field Left DIV Settings

Step 3 ) The following image Field Left DIV: shows you the form area it controls. It controls the over all width of the fields in the form. In the following image you can see the width and the margin in yellow on the right hand side. The overall width allowed is controlled by the following code max-width:550px;.

Field Left DIV default settings

• Field Left DIV: clear:left; float:left; width:99%; max-width:550px; margin-right:10px;

The reason why I am sharing this with you is so you know that max-width controls the maximum width allowed in a field in the form. The blue color below illustrates this. And you can see that the actual field is much smaller in length set at 250px. The following two fields cover the text area fields above in the standard from.

Go to Style of labels, field inputs, buttons, and text: to edit these fields.

• Input text fields: text-align:left; margin:0; width:99%; max-width:250px; = this settings controls the text box for Name, Email and Subject.
• Input textarea fields: text-align:left; margin:0; width:99%; max-width:250px; height:120px; = this settings controls the Message text box.

The following HTML source code in blue is controlled by the above field.

<div id=”fscf_div_clear1_1″ style=”clear:both;”>
<div id=”fscf_div_field1_1″ style=”clear:left; float:left; width:99%; max-width:550px; margin-right:10px;”>
<div style=”text-align:left; padding-top:5px;”>
<label style=”text-align:left;” for=”fscf_email1″>
Email:
<span style=”text-align:left;”>*</span>
</label>
</div>
<div style=”text-align:left;”>
<input id=”fscf_email1″ style=”text-align:left; margin:0; width:99%; max-width:250px;” name=”email” value=”” type=”text”>
</div>
</div>
</div>

==============================

CATPCHA Settings

Step 4 ) In the form above the large CAPTCHA is used. The large CAPTCHA image is controlled by the following fields.

CAPTCHA default settings

1. Large CAPTCHA DIV: width:250px; height:65px; padding-top:2px;
2. CAPTCHA image alignment: border-style:none; margin:0; padding:0px; padding-right:5px; float:left;

The following HTML source code in blue is controlled by the above field.

<div id=”fscf_captcha_image_div1″ style=”width:250px; height:65px; padding-top:2px;”>
<img id=”fscf_captcha_image1″ style=”border-style:none; margin:0; padding:0px; padding-right:5px; float:left;” src=”http://localhost/wordpress/wp-content/plugins/si-contact-form/captcha/securimage_show.php?prefix=U9nKlUTdhBXCmEb1″ alt=”CAPTCHA Image” title=”CAPTCHA Image” width=”175″>
<input id=”fscf_captcha_prefix1″ name=”fscf_captcha_prefix1″ value=”U9nKlUTdhBXCmEb1″ type=”hidden”>
<div id=”fscf_captcha_refresh1″>
<a href=”#” rel=”nofollow” title=”Refresh Image” onclick=”fscf_captcha_refresh(‘1′,’/wordpress/wp-content/plugins/si-contact-form/captcha’,’http://localhost/wordpress/wp-content/plugins/si-contact-form/captcha/securimage_show.php?prefix=’); return false;”>
<img src=”http://localhost/wordpress/wp-content/plugins/si-contact-form/captcha/images/refresh.png” alt=”Refresh Image” style=”border-style:none; margin:0; padding:0px; vertical-align:bottom;” onclick=”this.blur();” width=”22″>
</a>
</div>
</div>

==============================

CAPTCHA reload image alignment Settings

Step 5 ) The following image CAPTCHA reload image alignment: shows you the form area it controls. It controls the positioning of the small reload captcha button.

CAPTCHA reload image alignment default settings

1. CAPTCHA reload image alignment: border-style:none; margin:0; padding:0px; vertical-align:bottom;

CAPTCHA reload image alignment default settings

• CAPTCHA reload image alignment: border-style:none; margin:0; padding:0px; vertical-align:bottom;

==============================

Step 6 ) The following image Input labels alignment DIV: shows you the form area it controls. It controls the positioning of the CAPTCHA Code:* text.

Input labels alignment DIV default settings

1. Input labels alignment DIV: text-align:left; padding-top:5px;

The following HTML source code in blue is controlled by the above field.

<div id=”fscf_captcha_field1″ style=”text-align:left; padding-top:5px;”>
<label style=”text-align:left;” for=”fscf_captcha_code1″>
CAPTCHA Code:
<span style=”text-align:left;”>*</span>
</label>
</div>

==============================

Input text field CAPTCHA Settings

Step 7 ) Go to Style of labels, field inputs, buttons, and text: to edit this field.

The following image Input text field CAPTCHA: shows you the field you need to edit under Styles tab as mentioned above and add your customize code.

Input text field CAPTCH default settings

• Input text field CAPTCH: text-align:left; margin:0; width:50px;

The following HTML source code in blue is controlled by the above field.

<div style=”text-align:left;”>
<input id=”fscf_captcha_code1″ style=”text-align:left; margin:0; width:50px;” value=”” autocomplete=”off” name=”captcha_code” type=”text”>
</div>

==============================

Submit DIV Settings

Step 8 ) The following image Submit DIV: shows you the field you need to edit under Styles tab as mentioned above and add your customize code.

Submit DIV: text-align:left default settings

• Submit DIV: text-align:left; clear:both; padding-top:15px;

The following HTML source code in blue is controlled by the above field.

<div id=”fscf_submit_div1″ style=”text-align:left; clear:both; padding-top:15px;”>
<input id=”fscf_submit1″ style=”cursor:pointer; margin:0;” value=”Submit” onclick=”this.disabled=true; this.value=’Submitting…’; this.form.submit();” type=”submit”>
</div>

==============================

Form Fieldset Box Settings

Step 9 ) The following list Form Fieldset Box: shows you the field you need to edit under Styles tab as mentioned above and add your customize code. This controls the line around your form as illustrated in the first image about in Step 1 ).

• Form Fieldset Box: border:1px solid black; width:99%; max-width:550px; padding:10px;

The following HTML source code in blue is controlled by the above field.

<fieldset id=”fscf_form_fieldset1″ style=”border:1px solid black; width:99%; max-width:550px; padding:10px;”></fieldset>

==============================

The above instructions provides a clear understanding on how to customize the fields in a standard default form. This method applies to all your forms. Play around with the DIV containers settings until you get your desired design.

Note: The extra DIV containers not included in this tutorial are for certain fields when added in a form.

Click on the following link Custom CSS Style Formatting to learn how to troubleshoot some of the most common issues.

If you have any questions please let me know.

Enjoy.

Go Back To WordPress Fast Secure Contact Form Plugin List:

• WordPress Fast Secure Contact Form Plugin