One of the most important pages of a blog after the homepage and the about page is the contact page. There is no doubt about it.
A contact page is very important to be able to get messages from people who are trying to reach out to you.
However, creating a page like that and connecting it to your email may take a lot of time. Also, you need to have experience with coding to create a functional and good-looking contact form on your blog.
But the good news is here!
You don’t need to spend a lot of time nor have any experience with coding to be able to pull it off.
This post will teach you how to create a good-looking and functional contact form without wasting your whole day trying to do so.
- Why Do You Need A Contact Page?
- How To Create A Contact Form In WordPress
- How To Create A Contact Page In WordPress
- Other Contact Form Plugin for WordPress
But first, let’s talk about why you need a contact page.
Why Do You Need A Contact Page?
It may seem easier to just add your email in the page, and you are good to go, right? But one of the problems with this approach is the spam.
Spammers can easily scan your whole site to find emails and use it to spam you with offers and promotions that will fill your inbox.
But you don’t want to be put in that position, and that is why creating a contact form is essential.
By simply adding a contact form, spam is decreased by more than 95%. Gmail can take care of probably another 4% leaving you with the rest 1%, which is nothing.
Then, you are worry-free.
Another reason why you need to add a contact form is that it enables you to get the exact information that you want.
You may want to ask people to share their blog URL, address, or gender that will help you understand them. You can also want to categorize the questions.
Convinced that you need a contact form? Now, let’s build yours.
How To Create A Contact Form In WordPress
WordPress is known for the ability to add plugins to help you do almost anything without messing around with code. And creating a contact form is the same.
There are a lot of contact form plugins to help you. We will talk about few of the best plugins here in this post, but the main focus will be on the Contact Form 7 plugin because it may be the perfect one for most of the people reading this post.
It has over 5 million active installations, constantly updated, and has most of the features you need to create a good looking and functional contact form.
So, let’s see how you can create a contact form with the contact form 7 plugin.
Step #1: Install ‘Contact Form 7’ Plugin
The first step obviously is to install the plugin on your site. And I am sure you have done this multiple times already.
If not, here is how to do it:
- Go to WordPress Dashboard > Plugins > Add new and then search for the plugins name “contact form 7”
- The very first result will be the Contact Form 7 plugin. Simply click on the ‘Install Now’ button.
- Then click on ‘Activate’ after it is downloaded, and you are good to go.
You can also download the zip file from WordPress.org and upload it.
But the first one is obviously easier.
Step #2: Create A New Contact Form
Once you installed the plugin, the next step is to simply create the contact form.
You can do this by clicking on ‘Add New’ under “Contact” in the WordPress dashboard.
Once you land on the page, you may be dazzled at the beginning, but after that, you will realize that it is easier to understand it than you thought.
But first let me tell you this, contact forms consist of different fields: one for email and one for the message. Then, there is the name and the email. You can go through in other fields, but that is what will be discussed later.
For contact form 7, a label is a field. First is the text that appears before the field to enter, and then the part where they add their text.
Now, look again at the editor, and you will find that it is easy to understand, and you know what is already present in the field.
If you want to add a simple contact form, then these four fields are enough. You don’t need to add extra fields.
Step #3: Configure The Form
The next step is to configure the form to add more functionality and get the most out of it.
Want to add a drop-down menu for clients to choose from the purpose of contacting you or maybe inquire about things that may be beneficial for you helping them?
First, place the cursor where you want the menu to be. Before the subject? After the form? You can do whatever you want.
After that, click on the drop-down button in the toolbar. Now, you can customize it to appear as you want.
Fields already available are:
- Field type: A checkbox to confirm whether this is a required field or not.
- Name: This will be the name used in the tag. It won’t appear for visitors, just for you.
- Options: Here, you add the options that should be available for the person once they click on the drop-down menu. Each option in a line.
- Id & Class Attribute: This can be used to style your form using CSS. Not necessarily needed.
Once you are done, click on the Insert Tag button.
There is one step left, and that is adding the label that should appear before the field. Once added, you are done.
You can then edit any of the things in the field itself once you get used to the plugin. It is super easy to understand what is inside the field.
Once you are done with this step, the next step is.
Step #4: Edit Email Settings
Obviously, you want to set up where the emails should be sent to.
Once you are finished with the form, go to the mail tab. You will find fields that are already pre-filled with tags that may sound familiar because they were already used in the contact form. You can customize how you receive messages.
Here is what each field means:
- To: The email address to which the message is sent.
- From: The Sender of the email. By default, the name & email of the sender is included here.
- Additional Headers: Used to add extra header fields. This can be used to put addresses to CC or BCC in there as shown in this article.
- Subject: What is included in the subject. It can be the title + any of the forms like the purpose of emailing you and so on.
- Message Body: This will show you what is included in the body of the email that you receive.
- Exclude lines with blank mail-tags from output: This checkbox, when checked, will make sure that any of the tags that are not used won’t be included in this message.
- Use HTML content type: This option, when checked, will send the message in HTML. Not what most of you may need.
- File Attachments: If you have added file uploads in your forms, then they will be added in this part.
- Mail (2): This helps you create additional mail template. Can be used as an autoresponder. Activated only once you check it.
One sneaky tip is to use the purpose as a filter in your email client like Gmail so that it gives higher priority to specific purposes. So, you make sure that you get to these messages.
Step #5: Edit Form Messages (If Needed)
Once you are done with the mail tab, the next one is the Messages tab.
Here, you can edit the messages that will appear to your visitors when using your form. Most of the time, you won’t need to edit any of these.
So, take a look if there is anything you want to edit. If not, leave it as it is, and save the form.
Step #6: Copy The Shortcode
Once you save your form, a shortcode will appear, copy it and paste where you want it to appear. It is that simple.
If you want to place it on a new page, just create the new page, add the shortcode in it and you are good to go.
If you want to add it as a widget on your site on the sidebar, for example, go to Appearance > Widgets. Add a text widget in any of the widgetized areas on the page where you want to place your contact form. Open it, and paste the shortcode. That is it.
How To Create A Contact Page In WordPress
Now that you have created the form and have the shortcode, the next step is to finally have your contact form. Here is how to do so:
Step #1: Create A New Page
Since you don’t have a contact page yet, just create a new page, and name it contact page, or whatever you want to. Place any text you want to place like the number of emails you receive and the duration where you respond to emails.
Step #2: Enter The Short Code
Once you add the text, place the shortcode after that. Just as that, and the form should pop in when you check that page.
Step #3: Test The Form & You’re Done
Obviously, you want to check if everything is working fine or not. This is more important than you think. The last thing you want is a broken contact form.
Other Contact Form Plugin for WordPress
Contact Form 7 is one of the most popular plugins and it is used by many WordPress blogs. But here are other options that you may entertain.
- WPForms: Owned by the team behind WPBeginner, W Forms is another leading contact forms plugin in the market. It is a great drag and drop WordPress form builder that has many cool features.
- Ninja Forms: Ninja forms is created by the famous The WP Ninjas team, and this is a quality plugin as all their other plugins. It can be used for more than a contact form.
- Jetpack Forms: This is the one available already by the WordPress team. It is a great one but doesn’t have many customization features
- Gravity Forms: One of the first premium plugins available in the market. It has way more cool features than you would need in a contact form. There are many add-ons that you could add to accept payments and do much more from the form.
Creating a contact form shouldn’t be an issue for you anymore. It is very important for you and your business. A lot of opportunities are driven from the contact form.
It is also a great way to hear from your audience, and help build deeper trust, so they become more loyal to you.
And you have multiple options to consider, but you know how to get the most out of the Contact Form 7 plugin.
Share below your contact page and which plugin did you use and why.
It is indeed a great joy to meet you again here today. I am so glad that I found you today on twitter. Good to read about this contact plugin tutorial. A contact form is very essential to any blog or website. That really helps the reader or visitor to get in touch with you fast.
Thanks for the way you presented this tuto.
All good wishes form Philipscom India.
A blog needs to have some essential pages and the contact page is one of them.
It gives our readers the ability to contact with us.
The details tutorial you’ve shared in this post is easy to follow and implement. It’ll be helpful for beginners. Thanks for that.
However, I created my contact page using the contact form 7 plugin and it does its job best.