How to Add a Contact Form to Your WordPress Site

gator forms logo
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:

Feel free to choose the effects you like

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 Back button

  • 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.

Click Back button

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 Back button

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

Click Save

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.

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.

Click Save

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.

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:

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.

Fill out the form and click Send

  • A confirmation message appears:

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“.

Author

  • Robbie Adair

    Robbie started her career in corporate training until starting her own custom training and media company almost seventeen years ago. In 2010, she began doing classroom training for OSTraining while running Media A-Team. She is often presenting about various tech topics such as Joomla, Fabrik, Web Development, Social Media, and Augmented Reality. She loves seeing that "ah-ha" moment in peoples eyes in her sessions and workshops. She lives in Houston, Texas, but enjoys all the travel for client work and speaking gigs.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
sparrow
sparrow
7 years ago

Thanks for the great article

I also have a completely free plugins to recommend to everyone

Good news. My favourite author on CodeCanyon has just released their contact form 7 multi step for free

[url=https://wordpress.org/plugins/cf7-multi-step/]https://wordpress.org/plugi…[/url] ALL FREE

Mahen Patil
Mahen Patil
7 years ago

sometime this plugin conflict with visual composer.

If you activate this then visual composer loss it’s some functionality.

I don’t know why is this happening?

Alex Smirnov
7 years ago
Reply to  Mahen Patil

Hi Mahen,
Can you please be a bit more specific? What exactly functionality do you loos after activating the Contact Form 7?
Regards,
Alex

3
0
Would love your thoughts, please comment.x
()
x