How to Add a Contact Form to Your WordPress Site

Unlike Joomla or Drupal, WordPress doesn’t have a default contact form. However, there are many good options to choose from. We recommend a plugin called Gator Forms.The Gator Forms plugin allows you to embed forms of all types in your WordPress site.

It has a lot of configuration options to build and display highly customizable forms and a great variety of styles to adapt each form to the look of your website.

In this tutorial, we’re going to cover the installation and basic usage of this plugin.

Step #1. Install the Plugin

• Go to the “Plugins” area of your WordPress site and click “Add New”.
• Search for “Gator Forms”. Install and activate the plugin.

Step #2. Creating Your First Form

• Click the “Gator Forms” menu link.

• Click “Create your first form“.

• You will see an interface with some options. This is the easy-to-use wizard you can use to build your form.

The first step refers to the Location of the form. It specifies if the form should be visible or hidden by default and the method to display it and its positioning.

I’m going to use the following values:

• Form before opening – Toggler Tab.
• Form after opening – Lightbox – Move from toggler, change height and fade-in.
• Form position – On selected pages with shortcode [pwebcontact id=1].
• Leave the default Contact Us textfor the button/toggler that will display the form.

You can configure the position of the tab and other JavaScript events by clicking the Advanced button. Feel free to choose the effects you like best:

The second step is the form builder. You have a bunch of predefined options in the dropdown list on the top. By default, you get the Email message form. Leave it as is.

• Click the white pencil symbol beside the Name field in order to edit its label.

• Click the plus symbol to the right of the Name field.
• The Name field takes now 50% of the row.
• Drag and drop the Text input field inside the empty column to the right.
• Edit this new Text input field and set its value as required.

Now add a row for an additional form field.

• Click the +Add row link either on top or on the bottom of the form. Two links with the same functionality so near from each other make no sense now, but it’s very practical if your form has 50 rows.
• Drag and drop the Multi-line textarea input field inside this empty row and edit it.

• Click the arrow to the left of the field, drag it underneath the Message field and drop it there.
• Click the Save button.

You can opt for the paid version of the plugin if you have to customize your forms further with additional fields. These are labeled with the PRO legend on the right. You’ll get full support and other features with the PRO version of the plugin such as additional form templates or letting the users decide if they want a copy of their form after submitting.

• Click the Next button to land on the third tab (Theme).

As already stated, there is a bunch of options for the PRO users of the plugin.

There’s even a Customizer at the bottom of the page. The Free version of the theme comes with a default template.

You can customize the look of this template with your own CSS by editing this pwebcontact/media/css/themes/free.css.

• Leave the default free theme.
• Click Save.
• Click Next.

The fourth tab refers to confirmation message after submission of the form and to the email the user will get after submitting the form.

You can choose an answer scheme here or configure your own default messages.

• Analogous to the form composition in the Fields tab, you can choose an answer scheme here or you can input your own text if you prefer.
• Choose an answer scheme.
• Click Save.
• Click Next.

If everything went well, you’ll get a confirmation on a green background. Your form is ready to be published now.

• Click Save once again.

Step #3. Publishing the Form

• Click Pages > Add New.
• Give your page a proper title and body text.
• Insert the shortcode you obtained in Step #2.
• Click Publish.

Take a look at your page and you’ll see a tab on the left of the screen with the default text Contact Us.

• Click this tab and your form will display on the page:

• Fill out the form and click Send in order to test if everything is ok.

• A confirmation message appears:

Congratulations! That covers the basic usage of this plugin. You are now all set to allow your blog readers contact you through a basic contact form. You can enable more advanced features by purchasing Gator Forms Pro.

To learn more about how you can easily build great WordPress sites, join today the “OSTraining Video Club“.