Do you want to add contact form in your WordPress site?
Every website owners need a contact form. The contact form is a great way to get in touch with your readers. With a contact form, you can provide an easy way to communicate with you for your products and services.
In this tutorials, you will learn how to add contact form in WordPress site without touching a single line of code. Besides, I will discuss the reasons why it’s a good idea to add a contact form. By the end of this tutorial, you will be able to:
- Install the contact form plugin
- Configure your contact form fields and Mail settings
- Customize the contact form as per your preferences
- Add the form to your website
- Implement spam protection for the Contact form
Excited? Let’s roll in.
- 1 Why Should You Use a Contact Form on Your WordPress Site?
- 2 How to Add Contact Form in WordPress Site With Contact Form 7?
- 2.1 Step 1: Installation and activation of Contact Form 7 Plugin
- 2.2 Step 2: Create a New Contact Form
- 2.3 Step 3: Configure Your Contact Form
- 2.4 Step 4: Configure Email Settings
- 2.5 Step 5: Add a Form Messages
- 2.6 Step 6: Configure Additional Settings
- 2.7 Step 7: Add Contact Form to Your Website
- 3 Implementing Spam Protection
- 4 Final Thoughts
You might be wondering, why do I need a contact form? Can’t I add my email address to get in touch with people?
That’s a very common question, and here are a few reasons why using a contact form is better than sharing your email address.
- Spam Protection: To be honest, everybody hates spam emails. It clutters our inbox with unnecessary emails. Spambots regularly scrape websites for unprotected email addresses to add in their mailing lists. When you use the contact form, you don’t need to disclose your email address and get rid of spammy emails.
- Provides necessary information: When someone emails you, they don’t always send all the essential information you need. With a contact form, you can tell the users what sort of information do you exactly need by specifying different input fields.
- Easy for communication: Copying and pasting the email address and then writing the email consumes a lot of time. The contact form provides an easy way to communicate with you directly from your site.
- Inform your readers: You can add an automated reply to inform your visitors that you have received their email. You can further include information to let them know about the expected response time and steps they can take if they didn’t hear from you.
Sounds good? Let’s get started.
Several WordPress plugins allow you to add a contact form to your site. For this tutorial, I have chosen Contact Form 7.
Contact Form 7 is completely free and has been the most downloaded and popular WordPress plugins of all time. Besides, it is easy to configure, includes all necessary features, and supports a bunch of helpful add-ons.
Without further delay, let’s begin.
To install the plugin, simply head over to Plugins > Add New and type “ contact form 7 ” in the search box.
It will appear in the first place. Now, click on Install Now to download. Once done, click on Activate to start using the plugin.
After the installation, you will see a new menu item named Contact in the sidebar. Click on it to enter Contact Form 7 dashboard. You will see a screen like this:
At the top, you will see some helpful tips to make your contact form better, such as using spam protection and installing Flamingo to store your message. At the bottom, you will find a list of all contact forms on your site. Since you are just starting, you will see a sample form. You can start using this contact form right away or configure it further according to your requirements.
I will start with a clean slate, so you get an idea of how to create a contact form on your own. To begin, click on Add New button at the top of the screen. On the next screen, you will see, as shown below.
Looks a bit technical? Do not worry, you will understand soon.
The contact form includes fields where visitors can fill their details. By default, those fields include their name, email address, subject, and message. You can configure the fields as you want, which will get into it later.
Contact Form 7 creates some HTML tags for input fields. The code between <label>…</label> tag denotes one input field of your contact form and the text description belonging to it. The codes between square brackets create the actual input fields .
Contact Form 7 includes a handy feature that allows you to generate fields automatically without writing a single line of code.
At this point, if you copy-paste the shortcode on a page or post, your contact form will look like this.
Let’s have a look at how to add additional fields. I will demonstrate how to add a dropdown menu to the contact form. To do so, first, you need to place the cursor where you want to insert it. In this example, that’s between the email address and subject.
After placing the cursor, click on the drop-down menu tag, as shown in the above screenshot. You will see a popup like this.
Here’s how to fill in different fields:
- Field Type : Choose where this field is mandatory to submit the contact form or not.
- Name: Specify the name for this tag.
- Options: Here, you can add the dropdown list, one per line. You can also enable options to allow multiple selections and insert the first item as blank.
- Id/Class attribute: Here, you can assign CSS class or id that is useful for custom styling.
I filled out some details like this:
When you are done, click on Insert Tag to add in the form.
It inserts the code in your contact form template. Isn’t that simple? If you want to add additional fields, follow the same process. Once you’re done, click on the Save button.
You need to configure the email settings properly to receive the emails. Here’s the preview of how Mail tab looks like:
Usually, these fields are automatically configured when the plugin is activated. If you add any additional fields or want to change your email address or other details, you can customize it from here.
Let’s look at what each field means:
- To : The email address to which the messages will be sent.
- From: Sender of the email. It is set to the name of the person who fills the form.
- Additional Headers: Space for additional message header fields.
- Message Body: The body of the email you will receive. If you have added extra filed, you can need to include them.
- File Attachments: If you have allowed file uploads, you need to add the tags here.
- Mail(2): An additional mail template used as an autoresponder. When you checkmark it, you will get another box to edit the mail template.
Once you are satisfied with the configuration, click on the Save button.
Now, head over to the Messages tab. In this section, you can configure the messages your visitors will receive while using the form.
You can set the error messages, success messages, and much more. As it is appropriately configured and self-explanatory, I leave up to you to decide whether you want to change it or leave as it is. If you make any changes, don’t forget to save it.
In Additional Settings, you can add some advanced functionality like enable the form only for logged users, enable demo mode, configure Flamingo settings, and much more. You can explore the official documentation to learn more.
By default, it is empty, and we don’t need it for any purpose. So leave as it is.
At this point, the contact form is ready, and you can add it to your site. First, make sure that you have saved all the changes you have made.
The plugin generates a shortcode which you can use to embed the form anywhere on your site. The shortcode appears below the form title like this:
You can add the shortcode wherever you like. Most likely, you will add it to the contact page. Let’s see how to do it.
At first, copy the form shortcode and create a new page via Pages > Add New . Add the page title, add some text to display above the contact form(option), and paste the shortcode in the Editor area, as shown in the screenshot below.
Once done, click on Publish and preview the page. You will see something like this:
The process is somewhat similar. To do so, go to Appearance > Widgets and add a Text widget to the sidebar. Add the title(optional), description (optional) and paste the form shortcode. Finally, click on the Save button.
Contact forms are an easy target for spambots. The spambots can scrape your site and send you fishing or malicious emails. That is why it is necessary to implement the spam protection to prevent it.
Fortunately, Contact Form 7 offers easy ways to prevent this. You can protect your contact form either by including a quiz in your form or implementing reCAPTCHA.
You can include the quiz tag in your form, just like the other tags. You can find additional information here.
Contact Form 7 provides a seamless integration of Google reCAPTCHA v3. You need an API key to integrate it with Contact Form 7. Here’s a quick guide to add Google reCAPTCHA in Contact Form 7.
If you want to engage with your visitors and build up your relations with them, you should add a contact form on your WordPress site. You can gather valuable feedback and build their trust. Besides, the contact form also protects you from spam emails.
And that’s it! You have finished learning how to add contact form in WordPress site.
Was this helpful? Or Did you face any issues following the tutorials? Let me know if you want to share any thoughts or have any queries in the comment section below.