Wanna know how you can add a contact form on your WordPress website? You have come to the right place looking for answers. This guide shall give you the knowledge you need, to have your very own contact form on your site.
Contact forms are simple online forms where your website users can enter their message or queries and reach out to you (the website owners). While building a website, you will ultimately come across the issue of communication with your users. And the ultimate solution you will find is a contact form.
In this article, we’ll tell you everything you need to know about adding a contact form to your site. This includes defining a contact form, creating one, editing it, and publishing it on the contact us page. Let’s get started!
What is a Contact Form? (Definition)
A contact form in WordPress is simply a form on your website that lets the visitors contact you. The contact form on your website will significantly increase the user experience of your site. Moreover, your website will feel more trustable if there is a way to contact the admin.
The important and interesting thing about having the contact form is that you can exponentially increase your interaction with users. If you’re just starting your website, then adding a contact form is an important checkpoint.
The foremost concept of using the contact form is to get queries from users. And that with the fastest speed. You can only pick one call at a time, but the number of forms you can receive at one time? Infinite.
Reasons Why You Need a Contact Form on Your WordPress Website
Well, if you think (no need to think too hard), you will realize how much a contact form will help your website. There are many reasons to have a contact form on your website. Since we don’t want to bore you with the longest of articles, we’ll mention key ones.
- Spam Protection: Giving off your email address as a way for users to contact you is the worst idea. Many spam bots are waiting to scrape your site for an email address. Soon as they find one, they’ll start spamming. And contact form prevents that without compromising the user experience and user interaction in the slightest.
- Getting the right information: A contact form will allow you to specify the fields you want to add. This way, you can ask for specific information with users, like their name, contact, email address, their query, or else. This greatly reduces confusion between you and your users.
- Time management: Using a contact form significantly improves the time management of you and your users. Through a contact form, you can let your users know when they can expect a reply from you. And, you can set yourself a specific time to handle the contact forms. So, using the contact form is a win-win strategy.
- Increase standard: Having a professional-looking contact form on your website makes users trust you more. Because you are more likely to respond to them. It will also increase the standards of your website, making it look more official.
Now that you’ve run your mind through the reasons, it’s time to know how to.
Well, adding a contact form to your site is simple. You choose a plugin, you create and configure your form and you add it to your site. So the first thing to do is to choose the best WordPress contact form plugin.
Best Plugins to Add a Contact Form to Your Website
There are two ways to add a contact form to your site: with coding and without coding. Now, programmers might say coding is a better way.
But, if you’re like us and you want to keep things simple, then installing plugins is the best way there is. And we have just the right list of contact form plugins for you.
1. Everest Forms
Everest Forms is the best WordPress plugin available for creating contact forms. With sophisticated design and ideal coding standards, the Everest Forms plugin has proved to be an awesome freemium platform for creating a contact form.
Furthermore, Everest Forms features a drag and drop interface and advanced fields like radio, dropdown, checkbox, and more, as well.
The basic and important features of Everest Forms are free. And you can unlock more possibilities and advanced features like surveys, payment options, and more, at $49/year.
2. Gravity Forms
Gravity Forms is a powerful, mobile-responsive contact form plugin for building a contact form in WordPress. This premium plugin boasts a great integration with popular web applications and services including MailChimp, PayPal, Stripe, Quiz, and many more.
At $59/year for the basic plan, you can create a professional-looking contact form for your site. And at $159/year for Pro License, you can have basic contact form features for 3 websites. The Elite license at $259/year will give you advanced contact form features for an unlimited number of websites.
3. Contact Form 7
Contact form 7 is the most popular plugin for creating contact forms in WordPress. Since it’s free, you can create unlimited contact forms on unlimited websites.
Contact form 7 features a very good integration with security measures like Akismet spam filtering, reCAPTCHA, and comment blacklist. Moreover, there are third-party plugins that play the role of add-ons for enhancing Contact Form 7, like MailChimp Extension, Condition Fields, etc.
Surely, these are not the only contact forms plugins in WordPress. There are many, many more. Most of them are user-friendly. So you should not have a problem creating a contact form with any of them.
How to Create a Contact Form in WordPress
Now to serve the main dish. Plugins are usually, mostly and widely used to create contact forms in WordPress. There are tons of plugins to choose from. But don’t worry, because all of them follow a similar kind of user interface.
For this article, we are going to use Everest Forms to demonstrate building contact forms. Why do we choose Everest Forms? It’s because this plugin stands atop when it comes to beginner friendliness. No coding, drag-and-drop interface, tons of customization options, a genuine support team, and a whole bunch of good reasons made us do it.
Contact Forms 7 is indeed a free and most popular plugin for adding a contact form in WordPress. But turns out, Contact Forms 7 may be somewhat
limited in terms of customization. The plugin needs third-party extensions to add features and you might have to get your hands on some coding.
If you want to know more in detail, about how Everest Forms and Contact form 7 are different, then please check out our article on Everest Forms vs Contact Form 7.
And we are going to take you through a detailed step-by-step process of creating a contact form with the Everest Forms plugin. So let’s get started.
Step-1: Installing the Everest Forms Plugin
The first thing to do while building a contact form is to install a contact form plugin. Finding a specific plugin to install is one of the easiest things you can do in WordPress. You just type the name and lo and behold, your desired plugin.
First, log in to your WordPress Dashboard.
Then, click on the Add New option in the Plugins tab of the WordPress Dashboard Menu.
After you click on Add New, you will be taken to a page with numerous plugins.
On the right-hand side is a search bar. Type Everest Forms in the search bar. As soon as you type Everest Forms, you will see that Everest Forms and other contact forms plugin will show up.
After you see the Everest Forms pane. Click on Install Now in the upper right corner of the pane.
Everest Forms has now been added to your ‘Installed plugins’ collection.
You own the Everest Forms plugin. But for Everest Forms to start creating contact forms on your site, it should be activated. So, go ahead and do that, click on Activate.
Congratulations, you have received the power to create contact forms in WordPress.
Step-2: Creating a WordPress Contact Form With a Click
After you activate Everest Forms, you will be redirected to the Everest Forms Welcome Page. It’s a very helpful checkpoint on building a contact form as it offers tutorials on how to start using the plugin.
There’s a video guide waiting for you on the Welcome Page. We recommend watching it since you’re going to learn about all the features of Everest Forms.
If you want to learn about everything in Everest Forms including account management, translation, troubleshooting, tutorials, add-ons, form settings, etc, you should check out the full guide.
Once you’ve done that or choose to skip the guides, click on the Create Your First Form option.
At this point, you should be able to see the different templates that Everest Forms offers its users to help them speed things up.
There is an option to start from scratch as well. We’ve shown how to build a contact form from scratch in the second last section below.
For total beginners, it’s best to use a template. This will save you time and teach you a lot about contact forms as well. So, let’s first build a contact form with a simple template.
Creating a Contact Form With a Template (Easiest & Fastest Method)
On the Everest Forms template page, you will see more than 10 templates. Half of them are available for the free version.
The first template you will see is the Simple Contact Form template. This is a simple yet great template to get started. Let’s use this one.
Hover your mouse over the template and you will see two options. To see how this form is going to look like, use the ‘Preview‘ option on the right. If you want to start using this template, click on the ‘Get Started‘ button on the left.
After you click the ‘Get Started‘ button, you will be asked to put a name for your Contact Form. Write a name for your contact form and click on Continue.
Then, you will see the Everest Forms editor page.
On your right-hand side, you can see that the required fields for a simple contact form are already applied.
And, fields that are required for a simple contact form are added. Meaning, it’s a ready-to-use contact form. So, you can simply save the form by clicking on the ‘Save’ button at the top right corner.
Now your Contact Form has successfully reserved its place in the database. But, it’s still only in the database and users can’t see it. So, let’s publish it.
But before that, you should configure its settings. We’ll show how to do so in the step 3 and 4. Now, let’s see how
Step-3: Configuring your Contact Form Settings
There are many amazing things about a WordPress contact form. One of them is that you can take total control of it. Meaning that you can adjust which email the contact form gets sent to, what message will be displayed when the form is submitted or disabled, etc.
To configure your contact form in WordPress, simply click on the ‘Settings’ tab at the top of the page.
You will see two sections on the settings tab, ‘General’ and ‘Email‘. Under the General section, you will see options to make some tweaks in your form. And under the ‘Email’ section, you’ll be able to control the email you receive notifications in, the reply your visitors will get, etc.
i) Configuring General Settings on Your Contact Form
Well, based on your specific WordPress site, you might want to change what users see when the form is submitted or disabled.
To make these tweaks in your contact form click on the ‘Settings’ tab of your Everest Forms’ editor page. Then under the general section, you will see different fields dedicated to a specific feature of your page.
To change the name of your page, type a new name in the ‘Form Name‘ field. Changing the form description is also the same process.
There are fields dedicated to submit messages and form disabled messages too. You can change those as your website’s needs.
You can also choose which page the users will be redirected to after they submit the contact form. Just choose the page you want on the Redirect to the dropdown field.
That’s not all. You can even change what the Submit button text will look like when users are filling the form and it’s being processed for submission.
ii) Configuring Email Settings on Your Contact Form
If you’re the only one managing your website, then you’ll be getting emails about all the contact form submissions in the administrator email inbox.
But, when your website becomes larger and needs more people, you might assign different roles to different people.
Some other people might get to handle contact forms while assigning new roles. But the contact forms are still coming to your email. Luckily, we have a way to change that.
Go to Settings>> Email in Everest Forms’ editor page. There you will see different options regarding emails about contact forms.
If you don’t want to receive an email about the contact forms, just toggle the Email button off. But to keep in touch with users from anywhere at any time, it’s best to leave it on.
Under the ‘Email‘ settings, you can see different options. The name of the email notification, the email in which the form is sent, the name of the website, etc.
To keep it clear, let’s go over one by one.
a) Admin Notification Email Settings
The field on the top is for the name of the notification. By default, it is set to Admin Notification.
Below that is the To Address field. In this field, enter the email address to which the email notification, that a form has been filed, is to be sent. You can add an email address here. If you want to add multiple emails, then they need to be separated by a comma ( , ).
In the From Name field, type the name of your website or the contact form. This name will be displayed in your email, letting you know where the email notification is from.
b) Email for Replying to Users
The fields below that are for the email that you want to send to your user. These are very helpful for maintaining the trust of your users. Soon as they submit a form, they will get this email to let them know that you value their query.
The From Address field is for putting your email address. This is the email address from which you want to send your users the reply.
The Reply-To field also holds an email address. This email address used here should be the user’s email address since this is the email address where your reply is going. You can use the smart tag at the right of your field to add the email address of your user from the contact form itself.
The Email Subject field is for the subject of your email. And the field below that, the Email Message field is for you to write the context of the mail you are about to send to the user.
With these configuration options, your contact form has just been made more organized and trustworthy.
Make the necessary changes and then click on the ‘Save‘ button at the top to save the changes. Now your contact form is all set and ready to use!
However, to display the form on your site, you need to set up a contact us page with the form. We’ll show you how to do so in the steps below.
Step-4: Publishing your Contact Form
Bet you’re dying to see your WordPress Contact Form in action. While making your contact form, you can use the ‘Preview’ button on the top right corner to see a preview of your Contact Form.
To get your contact form into your website is well, simple as a click. All you need to do is add your form to a page, commonly the ‘Contact Us’ page.
Allow us to put in a simple step-by-step process.
Creating a Contact Page in WordPress
There are two options ahead of this point. You can either cr
eate a new page, entirely dedicated to your contact form. Or, you can put your contact form somewhere on an existing page.
The contact form should stand out and become readily available. So it’s better to dedicate a new page to it, don’t you think?
Let’s create a ‘Contact Us’ page for our contact form.
First, go to your WordPress dashboard.
Go to the Add New option on the Pages option of your dashboard.
After that, you’ll see the WordPress page editor screen. The page editor is a block-based editor where you can add each content element as a block.
First of all, give your page a title, something like “Contact Us”.
Let’s use the block below the title to tell our visitors about the purpose of our contact form. It will be something like- “ Please leave us your valuable feedback.” or, “Wanna reach out to us? Do so with this contact form.” These are just examples, we know you can come up with something better.
Adding Your Contact Form to The Contact Page
Hit Enter on your keyboard. This will automatically create a new paragraph block for you.
To change the block from paragraph to something else click on the Plus ( + ) sign on the on the right of the block you are in.
After that, different blocks will drop down. There are options to add a paragraph, heading list, image, etc. Choose Everest Forms from the list of blocks that dropdown.
If you can’t find it, please search it from the search box.
When you click on Everest Forms, the Everest Forms block will show up. In the Everest Forms block, you will see an option to choose which form you want to add to your page. Choose the contact form that you created before.
You have successfully added the form to your page. Once you’re done, publish the page. Click on the Publish button that sits on the top right corner.
Your contact form has now been added to your site. You will soon start hearing from your users. Keeping in touch with your users has been made easier by your effort. Congratulations.
Step-5: Adding Your ‘Contact Us’ Page to a Menu
Even after publishing the contact us page, you may still not see the page link on your website homepage. To solve that, you should place your ‘Contact Us’ page link in a visible place like a menu. Here’s how to do that.
Go to ‘Appearance>> Menus’ from your dashboard. Select the menu that should hold your contact form.
Note: If you don’t already have a menu, you can create one by simply typing the name, choosing a location and clicking the ‘Create Menu‘ button.
On the ‘Pages‘ pane of the menu editor window, click on ‘View All‘. This will view all your pages.
Check the page that contains your contact form and hit ‘Add to Menu‘.
Click on ‘Save Menu’ to finally add your contact form to your menu.
These may only be a few changes in your dashboard. But, for your visitors, it’s a greatly improved way of reaching you. Adding a contact form to your menu results in a richer user experience.
Creating a Contact Form From Scratch (Alternative Method)
If you are confident about the fields you are going to add to your contact form, then you can start from scratch as well. You’ll have to do more work but this will give you complete control over your form.
To start from scratch with a contact form, click on ‘Start From Scratch‘ on the Everest Forms ‘Add New’ page.
Note: You can always access the Everest Forms templates by going to Everest Forms >> Add New in your WordPress dashboard menu.
After that, you will be asked to put a name for your contact form. Choose a name and click on continue.
You will then be redirected to the Everest Forms editor page.
Before we start building your contact form, we probably need a quick look at the Everest Forms’ builder page.
On your left-hand side, you will see a section dedicated to adding and editing fields. There are two tabs, Add Fields and Field options.
The Add Fields tab contains fields to be added to your contact form. Whereas, the Field options tab has options to customize your field.
On your right-
hand side, you will see the editor section. This is where your fields will be added. WordPress will translate what you add here, into your contact form.
i) Add Fields and Rows to Your Contact Form
To add a field to your contact form, simply drag the field from left to right. You can add different types of fields in your forms. For example, First Name, Last Name, Dropdown, Checkbox, Radio, URL, etc.
If you need more rows, then all you need to do is click on the Add Row button.
When you add a row, you will be given a row with two columns by default. But sometimes you may want a row with a single column that supports only one field. This can be achieved with simple steps.
Hover your mouse over the row you want to change. You will see two buttons in its top-right corner. The button on the right looks like a pen. Click on it. This will show you two types of rows, single columned and dual columned. Click on the type of row you need.
Now that you know this, you can insert as many fields and rows as your contact form needs.
ii) Editing Your Contact Form Field
Everest Forms plugin, by default, gives you the field name like First Name and Last Name. But sometimes the field name and other attributes may not agree with the contact form you are trying to make. Nothing to worry about here, Everest Forms plugins will handle that like a pro.
To edit different attributes of your field, simply, click on it. On your left-hand side, the tab will change to Field Options.
Under the Field Options tab, you will see different attributes assigned to the field like the label, meta key, description, etc.
Basic Field Options
The label attribute is used to assign a name to your field. For example, First Name, Last Name, etc.
The Meta Key is a unique name for your field for the database to recognize it. Everest Forms plugin gives your field a meta key by default. So, there goes one thing you’d have to worry about.
The description attribute is used to describe your field. It will be displayed under the field. So, users will know what they are expected to input in the field.
Below the description attribute, you will see a checkbox with the name “Required”. Checking this box will make your field mandatory. Hence, users won’t be able to submit the contact form if this field is left empty.
A little asterisk will appear to the right of your field when you check the “required” box. Below the checkbox, you will see the Required Field Message option.The text you type here will be displayed when the user tries to submit a form without filling up this field.
These were the basic field options to customize the fields of your WordPress Contact Form.
If you upgrade your plan, you can gain access to advanced customization options like Style customizer options, the ability to connect other tools to your form, etc.
Advanced field options
Some advanced field options like placeholder text and CSS classes are also available in the free version of Everest Forms.
Placeholder Text
A placeholder text is like a default input to your field. It temporarily occupies the field until users input their text. A placeholder text is very useful in telling the users in what style they should enter content on the fields.
Below the Placeholder Text option, there is another option for hiding the label. Simply checking it will hide the label of your field.
Another advanced option is the CSS classes. If you know a bit of HTML and CSS, then you will be able to change the appearance and behavior of your field as well. But, as we agreed, no coding. Besides, the form looks great on its own too.
That was about adding and editing fields on your contact form. The next thing to do is to save your contact form. To do that, simply click on the Save button on the top-right corner of your Everest Forms editor page.
Now your contact form has safely acquired its position on your database. Next comes publishing the contact form. From here, you should follow the same steps as explained above in Step-3, 4, and 5.
Taking your WordPress Contact Form Further
These were the basics of adding a contact form to your WordPress website. But receiving queries is not the only thing for which the contact form was built for. There are many things the contact form can work with, to enhance the user experience of your site and make things easier for you.
For example, the Everest Forms plugin has tons of powerful add-ons. The addons offer a wide variety of features including adding style to your form, grow your site traffic, improve interaction, etc.
For example, the style customizer add-on enables you to make changes in the design of the form, without coding. Yes, no HTML, no CSS, nothing. Plus, there are addons to connect popular email marketing services like Mailchimp, ConvertKit, MailerLite, etc.
The point is, Contact Forms are no longer limited to simple boxes asking users for queries. They have grown into much more. You can collect donations, get email notifications, instantly reply to your users to maintain their trust. We can go on.
Wrapping Things Up
At a glance, contact forms are a great way to receive queries from users and keep in touch with them. But it’s not about just that. Contact forms have become a necessary part of websites to gain and maintain the trust of users.
With external features like add-ons, contact forms can do much more, like receive a donation, filter spam emails, connect to web applications, etc. So having a contact form on your website is very important.
And creating and adding a contact form to your WordPress website is nothing hard either. With regularly updated plugins like Everest Forms, Gravity Forms, etc, it has become even easier.
Besides contact form, you need good security, SEO, speed, backup plugins on your site. If you’re looking for suggestions, then check out our handpicked list of best and must-have WordPress plugins.
If you think this article helped you make things beautiful regarding your WordPress contact form, let us help others in that matter too. Share the article, you know you want to.
The post How to Add Contact Form in WordPress? (Step by Step) appeared first on ThemeGrill Blog.
