NAVIGATE HERE

Have you added a Contact Page on your website?

How to add a Contact Page on your website?

As a website owner, you already know that a Contact Page is a must have for your website. Therefore, you should know how create one and add it on your website. But, as a new blogger, you may think that adding your Contact Page on your website is “technical’ and difficult.

Well, I’m not a technical myself either. So, in this post on How To Add a Contact Page on your (WordPress) Website, we will be using a contact form plugin called Contact Form 7.

What is a Contact Page?

This post is actually dedicated to new bloggers, so, before we jump in creating and adding Contact page, let’s discuss first – What is a Contact Page?

Well, the title itself is pretty straight forward “Contact” – which means it is a “page” or part of your website that shows your contact info like as follows :

Name
Email Address
Physical Address
Telephone Number
Social Media Handles Link
Website
Map (sometimes)

It is any information you provided where your readers, audience, prospective clients, sponsor etc can get hold of you.

Wikipedia also describes it the way I did (pretty much).

Why you should have a Contact page / contact form on your website?

i already mention on the first paragraph the general reason why your website should have a Contact page which is, for yourself to be reachable.

But other than that, there are other reasons why you should have a contact form in your website such as follows :

Reasons why you need a contact form in your website?

These are just the main 3 reasons why you need a contact form in your website.

Contact Form protects your website

Yes, that’s right. A simple plugin like Contact Form 7 can actually protect your site from spammers. Truth to be told I experienced it firsthand.

Let me tell you a short story. So, when I started blogging 2 years ago, I joined a platform (I’m still a member) that teaches on how to create your website, build a blog and so on…

The training is through a step-by-step walk through video. And one of the steps is creating a “contact page using a contact form” but, I was stubborn and thought I knew better. I was thinking that, since my site is barely new, I have no visitors yet– no one will contact me.

Then as I got indexed, some post rank in Google, I started to get spam emails through my gmail address!! That’s when I learned that I NEED HAVE A CONTACT FORM, CREATE A CONTACT PAGE AND ADD IT ON MY WEBSITE.

The above images are just the two examples of spam mails I’m getting before. This happened because I just displayed my email add as my contact info.

However, contact form filters your messages. It’s like having a secure layer on your website.

SUGGESTED POST :

How to Write About Me Page If You’re a New Blogger

You become more reachable

Since, you’re not only offering or providing a single form of contact i.e email address or social media links– it will be easy for people to get hold of you.

For example, if you are just going to ask your readers to contact you via socials, but they’re not active in social media or they don’t have any, then, they won’t be able to reach you out.

And also, the presence of a contact form, make you look that you’re always there to get their message. If your readers feel that way, then, they will more likely to reach out to you.

Your website will look more professional

In the post, 12 Helpful Tips to Start Blogging Like a Pro, I mentioned that things you should have in your website to make it look like a professional even if you are just a beginner.

I also mentioned it again in this post, to make sure that you don’t make the mistake I made — launching my blog without a Contact page.

Placing your contact form strategically will not only enhance your website look but also will show your readers that you are organized. They will see that you actually exerted your effort in putting it that will give the impression how serious you are in your business.

So, now that we are clear of what is a Contact Page and you should Add a Contact Page In Your Website, then it’s time for the next question :

How Do I Create Contact Us Page In WordPress?

There are many plugins available in WordPress that can do the job. Plugins can be free or Premium. However, I will be using the free plugin called Contact Form 7.

Contact Form 7 is in fact the most popular plugin with 5+M Active Installations. That’s why I decided to use it.

Step 1. Install the Contact Form 7 Plugin

This step is easy to do.

Go to you WordPress Dashboard
Scroll down to plugins
Click “Add New”
On the search bar, type “Contact Form 7”
Click Install
Once it’s done, click “Activate”

Once you activate the plugin, time to create the contact form.

Step 2. Create your Contact Form

Once your done with step number 2, you have installed and activate the plugin. When you look at your dashboard once again, you’ll notice that a tab or menu item called “Contact” now appear. This is how it looks like :

As you can see, there are other plugins that can work with Contact Form 7 to protect your site from spam, you may choose any of those to install in your website as well. And that’s for another post.

Looking at the image, you’ll see “Contact Form 1”. It is already made for you. You can use that right away or if you choose to create a new one, then, all you have to do is click “Add New” tab, on the top right beside “Contact Form”.

But, the result is the same, you’ll still get the same format as the premade Contact Form 1.

So, go ahead and click “Add new”.

Step 3. Configure your Contact Form

Before I jump into configuring the Contact Form, let’s check out the “done-for-you” contact form to see how it looks :

As you can see it’s plain and simple. If you are satisfied with that you may use it as it is. Or you may tweak a little by using the available Tag-Generator Tools.

I’ll go ahead and try to create a drop down menu, so it will be easy for my readers to inform me the reason for contacting me. By the way, the Contact Form 7 itself has it’s own tutorial on how to edit a form template.

If you wish to do more aside from the drop down menu, that I’ll be showing to you, you can visit Contact Form 7 here.

Adding a Drop Down Menu to Contact Form

1. What you need to do is put your cursor where you want the drop-down menu to appear in the contact form. Which of course should be between your email address and subject.

2. Clicking the drop-down menu tab from Tag- Generator Tools, this will appear :

Let me tell you first how you going to fill in those fields :

Field Type – This is where you tell your audience that filling in this part is required. Sometimes, we see it with asterisk mark or sometimes (required) with open and close parenthesis.
Name – This part will actually appear to your visitors, they won’t see this part. Basically it’s for you to remember the purpose of the tag. I know it sounds confusing, but as I go on, you’ll understand it.
Options – Can you see on the Option Box, beside it, it says : One option per line. Yup, you guess it right! This is where you will write all the option or choices, that your visitors will pick.
Id Attribute / Class Attribute – This is where you can assign CSS class which is helpful for custom styling

So, now that you understand each field, i’ll will show you how I filled in those fields. Please take note, that I filled it out according to my blog or my niche.

Think of reasons why people might get in touch with you. This is how I filled mine.

When you look at the bottom that says “Insert Tag”, those are codes. But, no need to be afraid, because it will be done for you automatically as you write down your options.

3. Now once you are satisfied, you can go ahead and click “insert Tag” to put it into the form. The red box is the drop-down menu that I created. And this is how it looks like :

4. Next is the “label”. We need to name the drop down menu. To do this, we can just simply copy and paste the existing code and replace some wordings according to your needs.

For example : Your Email — copy and paste it above the “option” and instead of “Your Email”, I will replace it with “How Can I help You”.

Let me show you. The red box is the code that I put in.

CHECK OUT MY OTHER POSTS :

Step 4. Editing Your Email Settings

You can edit you email settings under the Mail Tab option at the top. From there, you can configure the email sent to you from the contact form.

Like when we first open the contact form earlier, some fields have already been filled up with similar tags.

The fields that are provided including new ones you created earlier can be use to customize how you will receive your audiences’ messages from your contact form.

Let’s talk about the fields :

To — Is the email address where your messages will be sent. You can leave this as is.
From — Is of course the sender of the email. It is set to the name of the person using your contact form by the default.
Additional Headers — This is the space if there’s any additional message header fields. Note that the standard settings will send your response to the person’s email who’s contacting you, and not the email it where it came from (i.e. your site).
Message Body — The message of the email you will receive.
Exclude lines with blank mail-tags from output — If you check this and the used tags are empty, the plugin will exclude them from the message.
Use HTML content type — If you want to use HTML, check this box. Because, the message is sent in plain text by default.
File Attachments — If your form allows file uploads, the tags for these files belong here.
Mail (2) — An additional mail template often used as an autoresponder. Check to activate.

So far, we or I don’t need to make any changes except for the subject line. We’ll change it to “contact-purpose” because that we want to filter the messages that we will be receiving. This is how it looks :

We will leave it like that for now.

IF YOU JUST LAUNCH YOUR BLOG, HERE’S A “CHECKLIST” TO SEE IF YOU HAVE EVERYTHING IN YOUR WEBSITE

Step 5. Adding a Form Messages

Next is Messages Tab. This will allow you to set up the messages your readers will see if they use the form.

Above are examples of messages like, error messages, and success messages. These look fine to me but you can change it according to your preference.

Step 6. Additional Settings

You can see this as the last tab on top.

You can configure this in different ways like, you can limit the ability of logged-in people to set the form to demo mode for testing purposes when they submit the contact form.

But, this part is empty by default.

Since, Adding Settings is not the main topic of this post, I will leave it just as is. However, if you wish to configure it, you can find the different options available in Contact Form 7 documentation.

Step 7. How to Add Contact Page on a Website

Finally, we will be adding our Contact Form on the website! Yay! Make sure that you saved all the changes you made in your contact form and don’t forget to name your contact form as well because you might create several ones in the future.

Basically naming your contact form(s) depending on its purpose will avoid confusion.

Once, you saved it, you’ll see that a short code will appear on the screen like this :

As you can see, “Contact Us” is how I named my contact form. And the blue highlighted section is the short code that we will then need later.

You can either click and copy code now or later. And then what you are going to do is go to the page or the post that you want to place your contact form.

In my case, I will create a new separate page for that. And this is how to do it :

Go to your dashboard
Go to pages, and click “Add New”
Then a new page will appear.

Today, the appearance may vary because of the theme that you are using, also WordPress has block editor now, which I’m using. You may have the classic editor, but don’t worry, the steps are the same.

Let me show you :

Again, this can be different from yours, but in my case, this is how my page looks like.

I named page same way I named my form, because I’m planning to put this page on my top navigation menu. And, I’m using 2021 theme in my dummy site and it is already in block editor.

Next is, you will paste the contact form short code that you copied a while ago, remember? If you haven’t copied it, you can go back to you contact form short code, click and copy then you paste it on the page.

In block editor, pasting a short code is quite different. So, this is how you’re going to do it, if you have a block editor.

See that + sign above? You’ll click that and block option menu will come out. Whether you’d like to have a Header block, or paragraph block, or list block etc.

However, you will be surprise that, the contact form plugin is already integrated on the menu block. So no need of copying and pasting the short code, just click the Contact form 7 itself. Like this :

If you are using block editor, just follow these steps. On #3, as you can see there’s a drop down menu, all the contact forms that you will be creating in the future will be here.

For me, I should click that and choose, Contact us and publish. And this will be automatically added on the page. Let’s see the final result :

Ta da! And we’re done! Oh, you notice the drop-down menu we created? It is already included in our form!

It’s very simple and easy to do. You can apply the same process whenever you wish to add your contact form in any part of your website.

I hope you like today’s tutorial, now you know How to Add Contact Page on a Website.

Pin Me!

Bonus – Spam Protection

I mentioned earlier that Contact Forms serves as a protection of our website, and there are ways to do that, you can do that within the form itself or by using a third party like, Akismet or Captcha.

Within the contact form you can actually include quiz using the Quiz Tag. Bots will not be able to answer quizzes.

To do that, you check and get additional information here.

Wrapping Up

Now, that you know How to Add Contact Form on a Website and reason why you need to have it, you can just follow the steps I provided in this post.

7 Steps on Adding Contact Form on a Website

Install the plugin, Contact Form 7
Create Contact Form
Configure your Contact Form
Edit your Email Settings
Adding a Form Messages
Configure Additional Settings
Adding your Contact Form on Contact page of your Website

There you go, I hope you find this helpful. And if you try to follow it, let me know in the comments below.

Do you have any questions? Kindly put it in the comments as well.

Itsy-bitsy request : If you find this post helpful, please share?

Sharing this post will mean a lot and will give me a sort of “energy” to create more helpful posts like this.

So, by pressing that social sharing button would really help to grow this blog.

Here’s what you can do :

Pin it!
Share to you favorite blog
Share it your Facebook / FB Group
Tweet it!

It won’t take more than 10 seconds of your time. The share buttons are right here.

Thanks! See you in my next post!

Minah

Hi there! This is Minah, the blogger behind of Niches and Earnings | Start A Blog.

I created this website to be a place where you can get information on how you can start your blog. Also tips on blogging, how to use social media for your blog and make money in the cofort of your home.

Let’s connect on social media too!

How To Add a Contact Page on a Website