How To Add Contact Form In WordPress

Importance of Contact Form

There are so many good reasons to use a contact form instead of just posting your email address directly on your website.

• Spam Protection— If you publish your email address on your website, spammers will bombard you with unwanted emails. Spam is a nuisance. When you have a WordPress website that employs blog comments, you’ll notice it right away.
• Organized Information — Most of the time people who get in touch with you don’t send all the information you need. With a contact form, you can specifically ask for it upfront.
• Schedule Time — You can also use the form to schedule meetings or tell the user the next steps they should take. Like, watch a video or wait up to 24 hours to get a response, so they don’t send you multiple inquiries.

You can precisely request all the information you require by having a customized contact form page on your website.

There are lots of plugins available in WordPress, and you’ll have a lot of alternatives when it comes to choosing different contact forms.

We will, however, use Contact Form 7 in this lesson.

The plugin is available for free in the WordPress directory and has been consistently among the most popular plugins of all time.

How To Add Contact Form 7 in WordPress?

1. Go to your WordPress admin panel.

2. On the left side of your Dashboard, hover over Plugins and click on Add New.

3. Then you will see a search box on the top right corner of the page.

4. Simply type Contact Form 7 into the search box to find the plugin, then click Install Now.

5. After the installation is complete, click Activate to activate the plugin.

Once it’s activated, you can find the plugin’s functionality in the new Contact area of your WordPress dashboard.

The plugin will create a basic contact form for you automatically.

You can access it by going to Contact → Contact Forms. The form is functional and you will see a code that looks like [**contact-form-7 id=”4164″ title=” contact form 1″].

Copy and paste the shortcode onto the page where you want your contact form to appear.

As soon as you publish the page, your visitors will be able to use it to contact you directly.

If you want to create a form from scratch and customise it according to your website requirements then here we go.

How To Customize Contact Form 7?

Almost every WordPress plugin, including the contact form, can be customized, and it’s a simple process.

First, click the edit option as shown below to customise your contact form.

You will notice that the plugin has automatically created some basic form fields like name, email, subject, and message.

In most cases, you’ll probably want to keep these fields and maybe add a few more depending on your needs. We’ll show you how to add a telephone number field, for example.

However, I recommend that you maintain your contact form simple and orderly.

To add a telephone number field, click on the tel tag. A popup will appear immediately.

In the popup, there are a number of options. You can leave the Name, Default value, ID attribute, and Class attribute intact. Select the Required field option and then click on Insert Tag.

Next, add a label to your new field. Here’s what it should look like (highlighted in the image)

Here’s what’s going on there:

• The <label> and </label> tell the plugin where the new field begins and ends.
• tel* indicates that we’re dealing with a telephone number field.
• tel-887 is the unique ID of the field. Warning; in your case, that number will be different – unique to your specific form and field.
• Phone Number is just my own piece of text that I want to put next to the form field itself. This one is just an example. You can make yours whatever you like.

Save the form.

Configure Mail Delivery Settings

Now it’s time to customize what happens after anyone tries to contact you using it.

This is an important step because if the emails are not properly configured then you won’t be notified when someone fills out the form.

Or the form will not be delivered to your inbox.

To configure it, go to the mail tab and start editing as shown below.

To — The email address where the emails will be delivered. By default, Contact Form 7 uses the site admin’s email, but you can change it if you don’t want to use that one.

From — Sender of the email. By default, it is set to the name of the person using your contact form.

Subject — This is where you can customize the subject of the email message you’ll get.

Additional Headers — Space for additional message header fields. When you Reply, the default settings send your response to the person’s email address who contacted you, not to the email it came from. (i.e. your site)

Message Body — The main message of the email you will receive.

Exclude lines with blank mail tags from the output — When you check this if any of the used tags are empty, the plugin will exclude them from the message.

Use HTML content type — The message is sent in plain text by default. If you want to receive messages with HTML content, check this box.

File Attachments — If your form supports file uploads, this is where you should put the tags for those files. It can also be used to upload files to your server.

Mail (2) — An additional mail template often used as an autoresponder. Check to activate.

This can be a useful feature if you’re using the form for marketing purposes or want to confirm to the person that you’ve received their email.

Form Message Field

Next is the Messages tab. You can customize the message that your visitors will see while filling out the form.

These are error messages, success messages, or simple instructions on how to utilize the form properly.

If you have a reason to change any of them (for example, to fit the tone of your website), feel free to do so.

Customize Additional Settings

It’s not important for our purposes but you can find all the different options in the documentation.

Add Contact Form To Your Website

Now that you’ve finished setting the form, it’s time to put it on your website. First and foremost, you must save the form.

A shortcode will display on the screen after you’ve saved your form:

Copy the shortcode and paste it onto the page where you’d like your contact form to appear.

Can We Add More Than One Contact Form On Our Website?

Of course, you can add more than one contact form; in fact, you may be able to add an unlimited number of contact forms.

To do so, click the “Add New” button, customize the new form and get the shortcode the same way we did before.

The screenshot below is highlighted with a red box for reference.

Where Does The Message Go, When Someone Submits Their Message Through The Contact Form?

The message will be forwarded to the email address linked to your WordPress account if you do not customise your primary form.

However, by following the steps below, you can modify the email address from your WordPress dashboard (For reference see the attached screenshot).

1. Go to the contact form

2. Locate the “Mail” option

3. Edit the email address where you want to receive the messages

Implementing Spam Protection In Contact Form

When it comes to the internet and websites, spam is a popular issue.

If you leave your email address unsecured on your website, a number of automated programs will take it up and begin sending you unsolicited offers, phishing emails, and other forms of spam.

The same is true with contact forms, unfortunately. Unless you put in place safeguards to keep it from happening.

Fortunately, reCAPTCHA is included in Contact Form 7. This is a Google spam-fighting service. You’ll need an API key and Contact Form 7 to use it. The official instructions can be found here.

To include it in your form, simply utilise the reCAPTCHA tag.

Spam protection can also be provided by third-party plugins. Of course, Akismet is the most well-known, and Contact Form 7 provides thorough instructions on how to use Akismet with a contact form.

Contact Forms and GDPR

If you fall under the jurisdiction of the regulations (and most people do now), you need to pay attention to some things.

Why is that important? Because Contact forms collect personal data.

Tips to Make Your Contact Form GDPR Compliant

Here’s how to build GDPR Compliant contact forms:

1. Don’t collect data you don’t need – If there’s any data you don’t actually need, stop collecting it.

2. Disable any tracking – To be GDPR compliant, you must disable any contact forms that track cookies, user agents, and/or user IP addresses.

3. Have a privacy policy in place – A privacy policy must be shown on a website that describes what data is collected and how it is used. You should also give visitors the option of requesting that their personal information be deleted.

4. Implement HTTPS –  To keep personal data safe, this is critical for contact forms. It is now considered standard procedure.