How to Create a Contact Form in WordPress

Updated on Aug 30, 2019

Enabling your website to support a contact form and page will provide your customers with a way to stay in touch with you. That can bring you different benefits - from simple bug reporting to quite a convenient way for your customers to get in touch with you regarding a product you are presenting on your website.

In this tutorial, we will illustrate how you can create a contact form on your website with few easy to follow steps, and in a few minutes, you will be able to have fully functional spam-protected Contact page.

To create a contact page, you will need to learn:

step

How to Choose and Install a Contact Form Plugin

The easiest way to set up a contact form is by using a plugin. There is a multitude of free and paid plugins which can do this. Some of the best ones are WPForms, Gravity Forms, Jetpack Forms и Contact Form 7. To make this tutorial, we choose Contact Form 7, which is the most used and arguably easiest to configure one.

Alternatively, you can directly search for it in the WordPress plugin installation area located in your WordPress Dashboard → Plugins → Add new.

Add a Contact Form in WordPress

If you are not quite sure how to install and activate a plugin, you can check one of our other WordPress series tutorials related to the management of your plugins.

Once you have the plugin installed, you will be presented with a new admin menu item called Contact.

step

How to Create a Contact Form

Now let's add a new form. If you hover over the new menu, you will be presented with three additional submenu items – Contact Forms, Add New, and Integration. Click on the Add New button so you can add your own custom Contact Form.

Add a new Contact Form in WordPress

On this page, you will be able to select which elements your contact form will contain. That can include radio buttons or drop-down menus on the top of the usual details. The default form looks like this:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

You will encounter the above-mentioned code in the Form tab of the plugin's Settings.

Edit the Contact Form Template in WordPress

  • Your Name -The name of the visitor trying to connect with you.
  • Your Email - The email of the visitor sending you a message.
  • Subject - The subject of the message.
  • Your Message - The message you will receive from the person submitting the form on your website.
  • Submit - The submit button for the contact form which sends the message to you.
step

How to Secure your Contact Form with reCAPTCHA

In the past, you had to install a separate CAPTCHA plugin and also include an additional tag in the shortcode of the form. Nowadays, with the introduction of reCAPTCHA v3, the integration process has been significantly improved.

How to Generate a reCAPTCHA Key Pair

Before you can complete the integration, you will first have to generate a Key pair for reCAPTCHA v3. Note that v2 pairs will not work for v3 integration. Access the reCAPTCHA URL via a new browser tab and click the Admin Console button.

Configure reCAPTCHA via the Google Admin Console

Hit the + icon at the top right corner of the page to register a new site. Here you will have the following fields to populate:

  • Label - The label will help you keep track of your websites inside the Admin Console interface.
  • reCAPTCHA Type - Here, you can select if you want to use reCAPTCHA v2 or v3 - we recommend the latter.
  • Domains - The domains associated with this registration. If you register only example1.com but then ty to use your key pair on example2.com you will get an error. Subdomains for example1.com will still be covered as they are part of that domain's DNS zone.
  • Owners - You are added by default here as the sole owner of the domain/project. If there are other people with owner/dev level access for your project, you can add their emails here. Then the project will also be added to their Admin Consoles, and they will also have access to the settings.

Accept the reCAPTCHA Terms of Service and click Submit to complete the registration.

Afterward, you will receive the site and secret keys which you will need to complete the integration inside the WordPress plugin.

Generate the Site and Secret Keys for reCAPTCHA Integration

You can also click on the Go to Analytics button and bookmark that page. It will show you data about reCAPTCHA including number of low/high risk entries, score distribution, top suspicious actions, etc.

How to Integrate reCAPTCHA in Contact Form 7

Navigate to Contact → Integration to open the Integration with other services menu and click on Setup Integration button for reCAPTCHA.

Access the WordPress Contact Form Integration with reCAPTCHA Menu

Copy the keys from the Google Admin Console to their respective fields and click Save Changes.

Paste the Itegration key pair for reCAPTCHA in WordPress

After the refresh, you will see the following message - "reCAPTCHA is active on this site."

Activate reCAPTCHA on WordPress Contact Form

With this, you have successfully secured the contact form for your website.

step

Add the Contact Form to your "Contact" page

If you haven't created that page already now it's the time to do so via your admin dashboard by going into Pages → Add New.

If you are not quite sure how you should manage the pages on your website, you can check our "How to Manage Pages in WordPress" tutorial on the matter.

To display the contact form, you will need to use the generated shortcode from the plugin. If you haven't copied the shortcode earlier, you can navigate to the homepage of the contact forms plugin by going to Contact → Contact Forms. There you can get the shortcode of the form you would like to use.

WordPress Custom Contact Form List with Shortcodes

Copy that code and paste it into your Contact page's content field.

Include the Contact Form Shortcode in WordPress-page

Once you publish your Contact Us page, you will be able to see the contact form when you access that page on your website.

Preview of a secure WordPress Contact Form

step

How to Add WordPress Contact Form in a Sidebar

Some website owners enjoy the option of having a contact form on more than one page. That is particularly useful for article-based websites which may prompt the visitor to come in contact with the business privately.

Unlike WPForms, Contact Form 7 does not automatically create a widget for you to use in such scenarios, but the process is quite simple.

When you create a form, just as described in the second step of this tutorial, instead of leaving each field like this:

<label> Your Name (required)
    [text* your-name] </label>

You now need to add 25/ before the close bracket.

<label> Your Name (required)
    [text* your-name 25/] </label>

This action will make the text area of the fields smaller which will allow the form to display correctly in the sidebar.

Copy the shortcode of your contact form and navigate to the Appearance → Widgets from within your WordPress dashboard.

Access the Widgets Interface in WordPress

Drag a new Text widget to your Sidebar element and paste the shortcode of the contact form in it.

Add Contact Form Shortcode to a Text Widget in WordPress

Click Save and the Done to apply the change. You now have a fully working sidebar contact form.

Congratulations! You can now create and secure a Contact Form for your "Contact" page for your website in WordPress!

On this page...

    WordPress Hosting

    • Free WordPress Installation
    • 24/7 WordPress Support
    • Free Domain Transfer
    • Hack-free Protection
    • Fast SSD Storage
    • Free WordPress Transfer
    • Free CloudFlare CDN
    • Immediate Activation
    View More