How to Redesign Your Gator Form With CSS

It’s easy to customize the look and feel of your Gator Forms, even if you have the free version of the plugin, with some CSS code.

In this tutorial, we’re going to take a look at the CSS file for the Free version of the form included with the plugin. Please take the form of this tutorial as an example.

Step #1. Locate the CSS File

The file is located under this path:

wp-content/plugins/pwebcontact/media/css/themes/free.css

With this CSS file, you can override the default CSS settings of your form.

Step #2. Increase the Font Size

  • Open the file in your favorite text editor. You will see it has several sections.
  • Go to the /*Text*/ section
  • Add the font-family property, in order to change it from sans-serif to serif
  • Increase the font size
  • Change the color of the text

Step #3. Change the Lightbox Window

  • Search the /*Lightbox window*/ section
  • Change the background color

Step #4. Change the Submit Button

  • Look for the /*Buttons*/ section inside the CSS file
  • Change color and background color

Step #5. Add a Font Family

In order to have some kind of balance between the form labels and the text your users are going to input in these fields, you have to change the font-family property of these fields as well.

  • Locate the /*Fields*/ section inside the CSS file
  • Add the font-family property to the corresponding selector

Step #6. Style Invalid Fields

There are fields, like e-mail addresses, which have to go through a validation step before submitting. If these fields aren’t quite right, the form won’t validate and you’ll get an advice on in what field to correct the input.

  • Look for the /*Fields invalid*/ section inside your CSS file
  • Add the box-shadow property
  • Change the color of the field text if it’s invalid

If you write an invalid email address and submit the form in order to test, the field will turn its colors accordingly

Step #7. Style The Toggler Tab

  • Look for the /*Toggler tab*/ section inside your CSS file
  • Change color and background color of the Toggle tab

So far you larned how to customize the look of your Gator form with the CSS file included in the plugin.

The new form isn’t very appealing, to be honest, but the purpose of this tutorial was to show how easy it is to change the form styles.

Step #8. Use Google Web Fonts

You can import Google web fonts and tweak the appearance of your form a little bit more.

  • Go to the Google Fonts site.
  • Select the font you like.
  • Click the “Plus” symbol.

  • Click on @IMPORT.
  • Copy the code inside the <style> tags and paste it at the beginning of the free.css file.

  • Change the font-family property with the new web font.
  • Save the file.

Leave a Reply

Your email address will not be published. Required fields are marked *

Start today!

[i]
[i]