WordPress Tutorial

How to Create a Contact form on WordPress

How to Create a Contact form on WordPress

Introduction

A contact form is highly beneficial for your website – it helps to keep your email address private (this way reducing spam) and it makes easier and quicker for your visitors to get in touch directly via your website.

If you’ve created a Contact us page on your WordPress website, it’s easy to add a contact form, personalize it and start receiving messages.

The easiest way to create a form is by using a WordPress plugin – currently, there are many you can choose from. On this tutorial, we’ll use Contact Form 7.

With more than 3 million active installs, Contact Form 7 is the most widely used Contact Form WordPress plugin. Its intuitive interface and quick setup will help you create a form in no time.

[optin-monster-shortcode id="cgx87nzwxn0himxw62bn"]

What you’ll need

  • Access to your WordPress admin dashboard

Step 1 – Installing Contact form 7

  1. Log in to your WordPress dashboard, and select Plugins > Add new from the left-hand side menu.
  2. Search for Contact form 7 and select Install.
  3. Once installed, select Activate to activate the plugin on your website.
    Contact form WordPress Plugin

Step 2 – Creating a form

Once the plugin is active, a new section Contact is shown on your dashboard left-hand side menu.

  1. Select Contact -> Add new to create your first form.
  2. Add a title to your form – e.g. WordPress Contact Form.
  3. Some labels and input fields have been placed on the form to help you start. You can remove them, or add new labels and input fields by selecting them from the list displayed at the top of the text area.
    WordPress Contact Form 7

If you’re not sure about what labels or input fields you may need, you can leave the form as it is, and you can always come back and edit it later.

Depending on the labels and input fields chosen, your final code should look like this:

  • You can add and remove elements, according to your needs. To help you start, try with the placeholders listed above the form.Contact form 7 Placeholders
  • The star sign * indicates that a field is compulsory.

Step 3 – Setting up your emails format

When a visitor submits a message through your form, you’ll receive an email containing their name, contact details, and the body of their message.

You can set up the emails through the Mail tab – some mail-tags are listed at the top. Feel free to experiment by adding them to the fields – you can always come back and make changes later.

IMPORTANT: Make sure you type a valid email address in the To field – this is where all the messages will be delivered.

Contact form 7 Mail Tab

Step 4 – Personalise the user experience

On the Messages tab, you can personalise the messages your visitors see when they submit the form – for example, you could set up a message when the form has been submitted successfully and a different message in case some errors came up (e.g. the visitor provided an invalid email address, or didn’t fill out a required field).

WordPress Contact form 7 Messages Tab

Step 5 – Saving and publish your form

When you’re ready, you can save your changes by clicking Save on the right-hand side panel.
Once the form is saved, a “shortcode” will be displayed at the top. It is highlighted in blue, and it looks like this:Contact form 7 Shortcut

In order to publish your form:

  1. Select the shortcode, and copy it
  2. Paste the shortcode into the page, post or widget where you would like your form to be displayed.
    WordPress Contact Us Page
  3. Final result should look like this:
    WordPress Contact Form Published

Step 6 – Testing WordPress form

It’s important to test your form in order to make sure it looks and behave as expected. Also, it’s critical to ensure that you receive the messages via email.

In order to do this, simply visit your WordPress website, and submit the form like a visitor would do – you can always go back to the form editor, and make changes.

When making any changes, remember to press Save button. There’s no need to copy and paste the shortcode again.

Conclusion

The instruction provided in this tutorial, give you the foundation you need to create and publish a Contact Form for your WordPress website and to receive messages via email.

Feeling adventurous? There’s more to explore – you can experiment with tags and placeholders, and personalise even your form and your emails even more. You can also try Flamingo – a message storage plugin, to store all your received messages into a database (particularly useful if your mail server has issues).

Join thousands of subscribers worldwide

and get awesome deals & the newest tutorials to your email

Please wait...

Thank you for sign up!

More in WordPress Tutorial
How to Fix Eliminate render-blocking JavaScript and CSS on WordPress
How to Eliminate render-blocking JavaScript and CSS on WordPress

Close