Fast Secure Contact Form Center Style show you how to center the form text, div containers, CAPTCHA and more.
Last Updated: March 23, 2016
Latest News: I have fixed a broken link.
This tutorial will help you center the contact form using version 4.x and above. If you are still using the old plugin version 3.x and below (I don’t recommend for security purpose) please check the following URL Tip Center The Form.
Fast Secure Contact Form Center Style steps
Note: You might like to adjust the settings in this tutorial to the following because it might suit you best.
- From – text-align:center; to – text-align:left;
- From – margin-left:auto; margin-right:auto; to – text-align:center;
Step 1 ) Click on Basic Settings tab to center the Welcome Introduction message. See image below.
- Change the <p> to <p style=”text-align:center;”>
Step 2 ) Click on Styles tab to add custom some custom code. See image below.
Remember to select the method of delivering the form style
- Internal Style Sheet CSS (default, edit below)
Step 3 ) The following image shows you where you need to add the following css code.
CSS Code to Add
- In DIV fields: margin-left:auto; margin-right:auto;
- In many other fields: text-align:center;
- Form DIV = margin-left:auto; margin-right:auto;
- Input labels alignment DIV = text-align:center;
- Input fields alignment DIV = text-align:center;
- Small CAPTCHA DIV = margin-left:auto; margin-right:auto;
- Large CAPTCHA DIV = margin-left:auto; margin-right:auto;
- Submit DIV = text-align:center;
Step 4 ) The following image Style of Labels, field inputs, buttons and text shows you where to add the CSS code.
- Required field indicator
- Required field text
- Input validation messages
- Redirecting message
- Field labels
- Input text fields
Step 5 ) The following image continues like above and shows where to add the CSS code.
- Input Text fields
- Input text field CAPTCHA
- Input textarea fields
- Input select fields
Step 6 ) The following image displays the form centered.
Please remember that in some cases your form will have extra fields added. If they are not centered, you will have to add the code mentioned above to the corresponding fields.
Click on the following link Set Default Field Checkbox Selected to complete the next tutorial.
If you have any questions please let me know.