How to Add a Contact Form in WordPress

Every website needs a contact form. There are lots of free and premium WordPress plugins to create a contact forms for your website. In today’s tutorial, I will show you how to create a contact form by using the highly popular Contact Form 7 plugin.

Creating a Contact Form

Once you install and activate the plugin, you will notice a new menu item titled “Contact” on your dashboard.

Go to Contact > Add New to create a new contact form. This takes you to a page like the following –

First of all, you can provide a title for the form. This title won’t be displayed in the form; it is only to understand what form it is.

Below, you will find the actual form body. The form editor is divided into separate sections. Let’s go through the sections one by one.

Form

This is where you can edit the form itself. The plugin will automatically add some basic form fields including the name, email, subject, message, and the submit button. You can use these fields as they are, or edit, delete any field according to your requirements.

You will find dedicated buttons for adding new form fields at the top of the form editor. The available options include text, number, email, date, checkbox, radio, quiz, file, submit, CAPTCHA, drop-down, etc.

Click on any button to add a form field of that type. For each field, you can mark it as required, provide the name, class, ID, and set a default value. Once you have made the necessary changes, click the “Insert Tag” button to add the customized shortcode to the form.

Finally, click the “Save” button to save the changes.

Mail

This section enables you to configure the emails sent by the contact form. You will find separate fields to define the to and from addresses, subject, additional headers, message body, etc. You have to use the specific mail-tag to insert the data provided by the customer in the contact form.

Messages

Here, you can define the messages for various conditions like message sent successfully, message sending failed, validation errors occurred, submission marked as spam, visitor needs to accept terms, visitor missed a required field, the minimum or maximum length didn’t meet, date, file, number, email, URL error, etc.

Additional Settings

This section allows you to manage advanced settings like enabling the demo mode and others.

Displaying the Contact Form

You can display the contact form on any post, page, or widgetized place. To do that, go to Contact > Contact Forms. Find out the contact form you just created and copy the shortcode for that form. It is also possible to edit or duplicate any contact form.

Once you have copied the shortcode, get back to the post. Paste the shortcode into the post editor and publish the post. There you have a shiny new contact form for your website.

Extending the Contact Form

So far, I have discussed the process of adding a simple form. But Contact Form 7 also comes with lots of additional features to extend the basic contact form. You can add reCAPTCHA, integrate Akismet, and enable comment blacklisting. Let’s see how to do these.

Adding reCAPTCHA

You can use Google reCAPTCHA to secure your contact forms. To do that, visit the reCAPTCHA admin page, register your website, and get the site and secret keys.

Next, get back to your website, and go to Contact > Integration. Find the reCAPTCHA section and click the “Configure Keys” button in the section. In the resulting page, provide the site and secret keys you got a while ago. Click Save to apply the changes.

You can add CAPTCHA to your contact form by using the following form-tag –

[recaptcha]

There are several options to choose between the dark and light themes, define the size, and add a custom class, ID to the CAPTCHA. You will find more information about these options in the Contact Form 7 documentation.

Enabling Comment Blacklisting

Comment blacklisting can be an excellent way to stop receiving unwanted messages and preventing spam. Luckily, WordPress comes with a default option named “Comment Blacklist” to block unwanted words.

You will find the blacklisting options in the Settings > Discussion page. Find the section titled “Comment Blacklist” and provide the word(s) you don’t want to receive. It is also possible to block IP addresses by adding these in the box. Make sure you are adding one word or IP address per line.

Using Additional Plugins

There are lots of third-party plugins that will extend the capabilities of Contact Form 7. Let’s take a look at some of those plugins –

• Contact Form 7 Datepicker – As you can guess from the name, this handy plugin will add a date picker to the traditional date field of the Contact Form 7 plugin.
• Contact Form 7 Honeypot – Use this plugin to add a hidden field to your form, which will detect the automated bots and prevent your contact form from spamming.
• Contact Form 7 Dynamic Text Extension – This plugin enables you to create a dynamic form that will pre-populate fields based on the responses provided on other fields.
• Contact Form 7 MailChimp Extension – When you want to integrate your contact form with MailChimp, this will be the best choice for you.
• Contact Form 7 Style – This plugin offers simple options to style your contact form. You can customize the color, font, border, background, etc.
• Jquery Validation For Contact Form 7 – Validating your form is an excellent way to ensure that you are getting the desired information. Use this jQuery validator plugin to check the answers instantly.
• Contact Form 7 Multi-Step Forms – On some occasions, you need to create multi-step contact forms. This plugin allows you to do that with Contact Form 7.

Final Words

Contact forms provides a simple way for the visitor to get in touch with you. Now that you have read this detailed tutorial, you know how to create a contact form for your WordPress site. Let me know if you have any question. I will be glad to help you out.