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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
Navigate to Contact → Integration to open the Integration with other services menu and click on Setup Integration button for reCAPTCHA.
Copy the keys from the Google Admin Console to their respective fields and click Save Changes.
After the refresh, you will see the following message - "reCAPTCHA is active on this site."
With this, you have successfully secured the contact form for your website.
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.
Copy that code and paste it into your Contact page's content field.
Once you publish your Contact Us page, you will be able to see the contact form when you access that page on your website.
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.
Drag a new Text widget to your Sidebar element and paste the shortcode of the contact form in it.
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!