How To Create The Perfect “Contact Us” Page (With A Killer WordPress Contact Form)
This Article Is Part Of Our "Build Your Own Website" Series.
If You Would Like To Learn How To Build Your Website From Scratch Then Check Out This Link.
Your website is like the virtual storefront of your business. It gives website visitors, clients, and customers a look into your business, your team, and what you have to offer them. But what happens when those same visitors, clients, or customers have questions, concerns, or want to get in touch with you?
Enter your “Contact Us” page.
The best “Contact Us” pages can mean the difference between a positive customer experience and a bad one, and nobody wants that! Being the go-to destination for customers who want to get in touch with your business, it is important that your “Contact Us” page is user-friendly and informative.
In this tutorial, I will show you how to set up your “Contact Us” page with a WordPress contact form. A contact form makes it super easy for your clients to easily get in touch with you directly from your website so it definitely is a must-have!
Why You Need A WordPress Contact Form
Let’s face it, not everyone is comfortable picking up the phone or sending an email when they would like to get in touch with a business – shoutout to all my fellow introverts out there 😉
And with life becoming busier and busier, often people want an easy way to contact you directly from your website without needing to pick up the phone or draft an email. This is where a WordPress contact form comes in!
But WordPress contact forms don’t only make your client’s lives easier, they are also incredibly helpful for you as well!
Let’s say you run a wedding planner business. When potential clients contact you, it would be incredibly helpful to know a couple of details up front such as, which services they are interested in or, how many guests they are planning to invite.
With this information in hand, you can really personalize each response you send and you can never go wrong by adding a personal touch to your correspondence!
|
FREE CHECKLIST Sign up for our newsletter and get our free website-building checklist! Easily keep track of your progress and make sure you’ve covered all the important steps as you build your own website. |
WordPress contact forms also help you to direct messages to the correct people within your business.
For example, if you have a sales team as well as a service team, using a form that requests which team the client wants to get in touch with, will not only make your life a lot easier but will also streamline client support.
How To Install A WordPress Contact Form Plugin
Unfortunately, by default, WordPress does not come with its own contact form included. This means that you will need to add a contact form by using a plugin.
If you have been following along with my tutorials you will know that we have been building our website from scratch using the Blocksy theme.
When we originally installed the Blocky theme, we also installed a starter site that allows us to work with a ready-made website that already includes a “Contact Us” page along with a WordPress contact form.
This contact form is created with a plugin called “WPForms Lite”.
If you haven’t been following along with tutorials but would still like to use it you can install and activate the plugin through the WordPress admin dashboard. Go to “Plugins” > “Add New” and search for “WPForms“.
This is the plugin you need to install:
If you are installing the plugin for the first time, you should be presented with a setup wizard to help you build your first form.
Once the “WPForms” plugin has been installed and activated you will see that a new menu item has been added to your WordPress admin dashboard menu called “WPForms“.
This menu contains the following items:
- All forms
- Add new
- Entries
- Form templates
- Settings
- Tools
- Addons
- Analytics
- SMTP
- About us
- Community
- Upgrade to Pro
It isn’t necessary to upgrade to the Pro version of the plugin because the free version will give you just about everything you need to set up the perfect contact us form!
How To Create A New WordPress Contact Form
If you already have a Blocksy starter site installed you should already have two forms pre-built for you – Simple Contact Form and Newsletter Signup Form. If you are happy with the contact form that has already been built for you then you can go ahead to test that it works correctly.
If you would like to build a new form for your “Contact Us” page, then follow along down below.
From the WPForms menu, select “Add New“.
A new page will open where you will be able to customize just about everything for your form.
The first step is to give your phone a name.
You can then choose whether you would like to use a ready-made template or whether you would like to start with a blank form.
If you would like to use a template you will see that there are a stack to choose from ranging from the simple contact form all the way to RSVP forms, community service forms, and many more. You will also see that there is a really great selection of pre-built forms available for free.
For this example, let’s start with the basic “Simple Contact Form“. We can then add a couple of extra fields to personalize it a little bit more.
Hover your mouse over the simple contact form box and click use template.
Congratulations you have just created your first WordPress contact form!
How To Edit Your New WordPress Contact Form
When the new page opens you will see your contact form displayed on the right-hand side of the page. On the left-hand side of the page, there is a dashboard with a bunch of fields that can be added to your form.
In the free version of the WPForms Lite plugin, you have access to all the standard Fields which include:
- Single line text
- Paragraph text
- Dropdown
- Multiple choice
- Checkboxes
- Numbers
- Name
- Number slider
- CAPTCHA
To use any of these, simply drag and drop them onto the form on the right-hand side of the page.
How To Add A Field To Your Contact Form
Let’s go ahead and add a couple of checkboxes to our contact form.
Select the “Checkboxes” field on the left-hand side of the page and drag it onto the form on the right-hand side of the page. I will place my checkboxes field in between the email and the comments boxes.
How To Edit A Field On Your Contact Form
To edit a field on your WordPress contact form, simply click on the form element you would like to edit. For this example, let’s add “Sales” and “Service” to the checkboxes form field.
Click on the “Checkboxes” form element. A dashboard will open on the left-hand side of the page where you will be able to edit the checkboxes as needed.
How To Specify If A Field Is Required
Sometimes you may want to ensure that your clients complete a specific field on your form before submitting.
For example, in our example above, you may want to make sure that your clients select either “Sales” or Service” before submitting their form.
To do this, simply toggle the “required” toggle button on.
If a specific field is required, your clients will not be able to submit the form unless they complete that particular field.
You will see that all required fields will have little red stars next to them on your form.
How To Delete A Field On Your Contact Form
Deleting a field from your WordPress contact form is really easy! Simply hover your mouse over the field you would like to delete and click the little trash can icon that is displayed.
How To Save And Preview Your Contact Form
When you are done editing your form, go ahead and click the “Save” button at the top right-hand side of the page.
You can now preview your form by clicking the “Preview” button. A new window will open where you can preview your form.
How To Add Your WordPress Contact Form To Your “Contact Us” Page
When you are happy with your form, it’s time to add it to your “Contact Us” page! The easiest way to do this is directly from the form editor.
Click the “Embed” button at the top of the page.
A popup will open where you will be able to choose whether you would like to add your form to a new page or an existing page. In this case, choose “Select Existing Page“.
Choose your “Contact” page from the dropdown and click “Let’s Go!“.
Your Gutenberg page editor will open.
Click the little Block Inserter button on the left-hand side of the page at the top.
Search for the WPForms block.
Drag the block onto your page.
Select the form you would like to use.
And voila! Your WordPress form has been added to your Contact page!
How To Edit An Existing Form
If you would like to edit an existing WordPress form, you can easily do this by choosing “All Forms” from the WPForms menu item.
When the WPForms dashboard opens, click on the form you would like to edit.
You will be taken to the WPForms editor where you will be able to edit and customize your form as you like.
When you are done, click “Save“.
How To Edit Your “Contact Us” Page
Once you are happy with your contact form, you can go ahead and edit the rest of your contact page.
If you are using Blocksy theme, and you have a starter site installed, you can just edit and remove existing blocks to create the perfect contact page.
If you need help with using the Gutenberg page editor, check out this tutorial: How To Add Content To WordPress: The Gutenberg Block Editor
If you would like to edit the look and feel of your “Contact Us” Page by adding a sidebar for example, check out this tutorial: How To Change Your WordPress Page Layout And Design In 5 Steps
Conclusion
The contact us page is a critical part of any website because it gives clients and website visitors a quick and easy way to get in touch with you. By using a WordPress contact form, you make it that much easier!
