Aug 272014
 

Fast Secure Contact Form Styles helps you set up the following Style Settings, Style of Labels, Field Inputs, Buttons and much more.

Last Updated: February 26, 2017

Latest News: I have fixed a broken link.

Fast Secure Contact Form Styles Setup

Step 1 ) Go to Settings -> FS Contact Form -> Styles tab to set up the following options. See image below.

Modifiable CSS Style Feature

  • Enable a fieldset box around the form = Fieldset box label
  • Select the method of delivering the form style

Alignment DIVs

  • Reset the alignment styles to labels on top (default, recommended)
  • Reset the alignment styles to labels on left (sometimes less compatible)

fast-secure-contact-form-style-settings

Step 2 ) The following image allows you to set up the following options.

  • Form DIV = If you wanted to change the background color of the form to blue you would enter the following code background-color: #0000FF;. You can use any color you want for your form.
  • Left Box DIV
  • Right Box DIV
  • Clear DIV
  • Field Left DIV
  • Field Follow DIV
  • Field Pre-Follow DIV

fast-secure-contact-form-style-settings-slignment-divs

Step 3 ) The following image allows you to set up the following options.

  • Input labels alignment DIV
  • Input fields alignment DIV
  • Small CAPTCHA DIV
  • Large CAPTCHA DIV
  • CAPTCHA image alignment
  • CAPTCHA reload image alignment
  • Submit DIV
  • Form Fieldset Box
  • Click on Save Changes button when you finish

fast-secure-contact-form-style-settings-slignment-divs2

Style of labels, field inputs, buttons, and text

Step 4 ) The following image allows you to set up the following options.

Style of labels, field inputs, buttons, and text

  • Reset the styles of labels, field inputs, buttons, and text
  • Required field indicator
  • Required field text
  • Hint messages
  • Input validation messages
  • Redirecting message
  • Field Fieldset Box

fast-secure-contact-form-style-settings-labels

Step 5 ) The following image allows you to set up the following options.

  • Field labels
  • Options labels
  • Input text fields
  • Input text field CAPTCHA
  • Input textarea fields
  • Input select fields
  • Input checkbox fields

fast-secure-contact-form-style-settings-labels2

Step 6 ) The following image allows you to set up the following options.

  • Input radio fields
  • Placeholder text
  • Submit button
  • Reset button
  • vCita appointment button
  • vCita appointment button DIV box
  • “Powered by” message
  • Enable aria-required tags for screen readers
  • Click on Save Changes button when you finish

fast-secure-contact-form-style-settings-labels3

Click on the following link Labels to complete the next tutorial.

If you have any questions please let me know.

Enjoy.

Go Back To WordPress Fast Secure Contact Form Plugin List:

Manuel Ballesta RuizManuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

  10 Responses to “Fast Secure Contact Form Styles”

  1. Hello,
    Is there a way to change the font size on the form? When you see the contact form (website link is below), you’ll see that the fonts above are different size than the font below. More specifically:
    Small font size: “for the Christian Audience.”
    Big font size: ” *indicates required field.
    I don’t want the font size to be that big.

    Thanks for your time.
    The website is http://www.LeesleyFilms.net/

    • Hi James Leesley, thank you for your question. To work with the font sizes you need to concentrate in the following Step 4 ) from above. Each heading controls different parts of the form. For example in your case you would adjust the following Required field text and Field labels. If you need to contact me on a personal basis with more questions, you can also send me a message through my contact form.

      Kind regards

  2. Hello Manuel! I would like to place a image background of a contact form using the Fast Secure Contact Form Plugin. Is it possible? If Yes, could you make a tutorial about it, or tell us the way please?! It is like image background tranparency, like the one we see at this site login/register page: http://www.valentino.com/cms/help/contactform.asp?tskay=B60ACEA7
    Thanks for your attention!
    Leila

  3. Hi,
    I have a question about the background color of my form. As you can see on he link below, there is grey around my form wih a green strip. I don’t know how to change it to white . Thank you very much.
    Tom
    http://hpics.li/a63a183

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)