Looking for something?

How to create a simple contact form in WordPress

A contact form is an integral part of any website. 

Contact forms provide a simple and convenient way for people to get in contact with you. It is more secure to use a form than to just have your email address on your website as it can help to reduce unwanted spammy messages.

Fortunately, if you use WordPress it’s very easy to create a contact form using a free plugin called WPForms Lite. And best of all, it doesn’t require any coding!

In this post I’ll show you how to use the WPForms Lite plugin to create a contact form for your website. 


1 | Install the WPForms Lite plugin

As I say, for creating forms I recommend a plugin called WPForms Lite which currently has over 900,000 active installations. There is a paid premium version of this plugin but I just use the free version and it does the job!

To install this plugin, log in to your WordPress admin area and navigate to Plugins and then Add New. On this page, search for “WPForms Lite” and this should bring up a plugin that looks like this:

WPForms plugin | HollyPryce.com

Click Install Now and then Activate.

2 | Create a contact form

To create a new form, click on WPForms on the left hand side of the screen.

WPForms in WordPress | HollyPryce.com

This will take you to the forms overview page. Any forms you create will be listed here. Click Add New to create a new form.

WPForms Forms Overview | HollyPryce.com

Start by giving your form a name. I’m going to call mine “Contact” because I’m going to create a contact form. Then, choose a template. Again, as I’m creating a contact form, I’m going to choose Simple Contact Form.

WPForms select a template | HollyPryce.com

Choosing a template will take you to the form builder. As you can see, this form builder has a drag and drop system so you can add new fields, remove fields and move them around to make the form look exactly how you want it to. With the free version of this plugin (which I’m using here) you will only have access to the standard fields, but this is enough for creating a contact form.

WPForms form builder | HollyPryce.com

After you have add the fields to the form, you can then edit the fields by hovering over them and just clicking on them.

WPForms edit field | HollyPryce.com

Clicking on a field in the form will open the options on the left hand side of the screen. The options for the name field look like this, for example:

WPForms field options | HollyPryce.com

As you can see, you can change the label of the field and change the format. I usually like to change the format of the name field to “Simple” when I create a contact form. This means the user doesn’t have to enter a first name and surname in separate fields. You can also add a description to give the user guidance, and you can choose whether or not you want the field to be mandatory.

If you click on Advanced Options you will see that there are even more options including field size, default text, placeholder text, hide label and the ability to add your own class for styling purposes. The good news is the form is responsive by default, so if you don’t want to add any styling then you don’t need to.

Another field I like to add to my contact forms is a subject field. I do this by using a Single Line Text field. This is what my final form looks like:

Finished form | HollyPryce.com

When you’ve finished designing your form in the form builder, click on Settings on the left hand side of the screen.

On this page there are three tabs.

The first tab is General. Here you can change the name you gave to the form earlier (if you wish), give the form a description, change the text on the submit button and change the text that shows while the form is sending

WPForms general settings | HollyPryce.com

The second tab is Notifications. Here you can change the email address that the email will be sent to (it’s sent to your WordPress admin one by default) and change the subject of the email. I would advise you to leave the rest of the fields as they are.

WPForms notifications settings | HollyPryce.com

The third and final tab is Confirmation. Here you can choose what happens after someone submits a form. By default it is set to show the user a confirmation message, but you can change this to take the user to a page on your website or to an external web page by entering a specific URL.

WPForms confirmations settings | HollyPryce.com

Once you have finished filling in all these details, click the orange Save button at the top of the page, then click on the X to return to your WordPress admin area. Your form is now ready to use.

If you ever want to edit this form again, go to WPForms in the side menu and then click on the form you want to edit.

3 | Embed the form

Once you have finished creating your form, you can embed it on your website. The best way to do this is to navigate to the page or post that you want to add the form to and then click Add Form.

Add form to post or page | HollyPryce.com

A pop up will then appear. It will ask you to select which form you would like to embed, and then whether or not you would like to include the form name and description. Once you’ve chosen your options, click Add Form and then you’ll notice that a short code has been added to your page.

Insert form | HollyPryce.com

Then preview your page or post to see how the form looks. Here’s what mine looks like:

Forms on page | HollyPryce.com

Once you’ve added your form to your page, make sure you test it to ensure that it works!

4 | Add reCAPTCHA

This step is optional.

As I mentioned at the beginning of this post, contact forms can help to reduce spam. However, forms aren’t completely immune from spam and so I highly recommend putting measures in place, such as reCAPTCHA, to help reduce spam.

WPForms supports two types of reCAPTCHA. The first is to use a v2 reCAPTCHA, which required the user to tick a box to prove they’re human. The second is to use Invisible reCAPTCHA which doesn’t require the user to take any action. It uses advanced technology to detect if the user is real or not.

To get reCAPTCHA, start by visiting this Google website and click Get reCAPTCHA.

Google reCAPTCHA website | HollyPryce.com

You will then have to log in to your Google Account. If you don’t have a Google Account, check out this post for more details.

The next step is to register a new site (assuming you haven’t use reCAPTCHA before). Enter a label for your site (this can be anything) and then choose the type of reCAPTCHA that you would like to use. Then enter your URL. You don’t need to include the http:// or https:// part of your url.

reCAPTCHA register website | HollyPryce.com

Then click to accept the terms and conditions and click Register.

On the next page you will see two codes; the site key and the secret key. You will need to copy or make a note of these code and as you need to add these to the reCAPTCHA settings page in WordPress

reCAPTCHA code | HollyPryce.com

To get to the reCAPTCHA settings page, go to WPForms then Settings. On the settings page, click on the reCAPTCHA tab.

reCAPTCHA settings | HollyPryce.com

On this page, choose which type of reCAPTCHA you have opted for. Then enter your site key and secret key. When you’re done, click Save Settings.

To add reCAPTCHA to your form, navigate to your form by going to WPForms and then All Forms. Select the form you want to add reCAPTCHA to, then click on Settings. You’ll notice at the bottom there’s a new option to enable reCAPTCHA. Tick this tickbox and click Save at the top of the screen. And that’s it!

Adding reCAPTCHA to form | HollyPryce.com

If you chose to use v2 reCAPTCHA then you will be able to see that the reCAPTCHA box has been added to your form.

Form with reCAPTCHA | HollyPryce.com

6 | Add a GDPR field

This step is optional, but highly recommended.

In preparation for the implementation of GDPR, new GDPR enhancements have been added to the WPForms plugin.

To activate these enhancements, go to WPForms then Settings. Here you will see the new GDPR setting. Make sure this box is ticked.

WPForms GDPR enhancements setting | HollyPryce.com

Now if you head back in to your form builder, you will see that a new field option has been added: GDPR Agreement. This option will add a tickbox to your form. If users tick this box then they are giving their consent for you to use their information so you can respond to their message.

WPForms GDPR agreement option | HollyPryce.com

If you add this to your form you will see a new section that looks a little something like this:

WPForms GDPR agreement in form | HollyPryce.com

You can customise the label and the agreement text if you wish.

More GDPR features are available with the paid version of the plugin.


Get access to my freebies library!

My exclusive freebies library contains cheatsheets, checklists and other resources to help you to create and run your dream website.

To access my freebies library and join my community just fill in the form below. Find out more information about my community right here.


Do you have a contact form on your website? Do you use a different plugin for forms on your website?

How to create a simple contact form in WordPress | HollyPryce.com

Leave a comment

Comment

* = Required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.