How to Add a Contact Form to Your WordPress Website
Most websites include contact forms, and if you want to be accessible on your blog, you may want to add a contact form so your readers and visitors can reach out to you.
Visitors can, of course, reach out to you on social media, and you could potentially list your email so they can just send you an email. But using a form instead of a plain email address has some advantages.
I recommend never putting your email address in plain text on your website because it’s really easy for spam bots to collect it and start sending you junk.
Advantages to using a contact form
- You can keep your email address unlisted.
- Visitors that aren’t active in social media can inquire about your blog, business or services.
- Readers and visitors to your blog can reach out to you privately.
- You can connect the form to your newsletter or email list autoresponder and help grow your list.
Options for getting a contact form installed on your WordPress site.
There are two ways to getting a contact form working on your blog. One is to install and configure a contact form plugin. The other one is without a contact form plugin. I recommend using a plugin.
What if you want to get a WordPress contact form without a plugin?
You could create a form scratch by writing HTML and PHP code as shown here, but I don’t recommend that for beginners. Heck, I wouldn’t do that as an advanced programmer because it’s just too much work, it’s unnecessary and prone to errors, then you have to update it if something breaks. In my opinion, it’s better to use a plugin.
List of plugins you can use to create a contact form in WordPress:
For this tutorial, we’ll be using WP Forms. I use WPForms for most of my contact forms, and I like how it integrates with other systems like my email list with Aweber.
Short video tutorial
Here is a short video that shows you the basic steps to creating your first form. I found that this video is good if you’re familiar with WordPress. Below the video, I’ve written an extensive tutorial explaining all the steps and options you’ll find along the way.
Let’s get started with the tutorial
First, install and activate the WP Forms plugin. I explained how to install and activate a plugin on this tutorial.
Because WP Forms is a paid plugin, you’ll need to insert your license key after you activate it.
Go to the new menu for WPForms (1), mouse over it, then click on Settings (2).
You’ll need to get your license key from the WPforms website and insert it, then click on the verify button.
You should see a confirmation window pop-up that will confirm that your plugin is fully activated and is eligible for automatic updates as shown below:
Create a new form
In the same menu where you found the Settings options, you’ll find the menu item to add a new form. Click on it to create your contact form.
Alternatively, you can click on the “All Forms” menu and then click on the Add New button from there.
WP Forms will present you with pre-made templates to get your form started. You’ll need to select the Simple Contact Form to continue.
The form template will have all the basics you need for a contact form; first name & last name, E-mail, comment or message as shown in the screenshot below:
Adding fields to your form
If you notice, there are additional fields you can add, those are the blue buttons on the left. There are three groups: standard fields, fancy fields, and payment fields.
For a contact form, the template provided is all you really need, but if you wanted to ask for additional information from your visitor, you just click on the blue button that you want and WPForms will add it to the end of your form.
For example, you may want to collect a phone number, you would click on the Phone field under the Fancy Fields (1) group, and this will add the phone field to the end of your form (2).
It doesn’t make sense to have the phone number at the end of the form, so you can just click and drag the field up, so it goes after E-mail.
At this point, you could click the Save button on the top right, and your form would be ready to be used. But we can add a little bit of polish.
Customizing the form
You’ll notice when you add the Phone field, that it doesn’t have the red asterisk next to it. That means it’s not a required field. If you want to make the field required to ensure your visitor fills it out, you can click on the field and edit the properties.
Another polishing touch is to rename the form. In this example, we change the name from Simple Contact Form to Main Contact Form. To rename your form, just click on the title.
This will open up the properties for the title, like we did for the phone field, allowing you to edit the title (1) and other parts of the form. In this screen, I’m also going to change the Submit button to say “Send” instead (2).
Now that the form has the fields we want and they look like we want them to, we need to take a look at the alerts.
Customizing alerts and notifications
By default when someone fills and submits the form from your website, WPForms will send a notification to the email address listed under the admin settings for WordPress. If you want to change this, you’ll need to enter the email address you want under the notifications section.
To access the notifications section, just click on the left-hand side from the screen where we customized the title of the form.
Updating Send to E-mail address
If you want the notification and form to be sent to a different address from the admin email address, you can change it here (1). Just replace the email address with the one you want; if you want to send it to multiple addresses, just add them by separating them with a comma.
The other part that I recommend you update is the Reply-to email address (2). This will make it easier to reply to the email address the visitor submitted.
When you get the email, you can just click on “reply, ” and their email address will be automatically filled in. If you don’t do this, sometimes depending on
Updating Reply-to email address
To update the Reply-to email address to match the email the visitor submitted on the form, you just need to click on the “Show Smart Tags” link then click on the Email listed.
This will add the code or “smart tag” for the email address. Generally, it will look like this “{field_id=”1″}”
Customizing the Message section content
The Message box contains the smart tag: “{all_fields}” which means you’ll receive all the information submitted by the visitor.
Sometimes you may want to add extra information, to see what’s available click on Show Smart Tags and scroll through the options.
I like to add date (1) and IP Address (2) at the bottom (3) just for my own records.
The last part to polishing up the form is to customize the confirmation the visitors see after they hit send.
Confirmation settings
After the visitor clicks on send, they will see the default message that reads:
“Thanks for contacting us! We will be in touch with you shortly.”
It will appear in a small green box as shown in the screenshot below:
To change the confirmation settings, click on the Confirmation menu item below the Notifications (1).
WPForms gives you three options, one is to show a message like described above (2), another one is to send the visitor to an existing page (2), and the third option is to send them to another URL (2).
We’ll cover the first two options: “Message” and “Show Page.” The third option is similar to “Show Page, ” but you just enter the full address of the page that you want the visitor to go to. This could be a web page outside of your own website.
Customizing the Message option
This is the simplest of the three. You just type in what you want to say in your message and save the form.
Customizing the Show Page option
When you select the Show Page option, you’ll be provided with all the existing pages on your website. You can then choose one of those.
This will send the visitor to that page after the form has been submitted successfully.
You can use this to send them to a Thank You page, or a page with additional information, like an FAQ, or a page that explains what they should expect after they have submitted the form.
To use the Show Page option, you must have the page you want to use already published on your site, once you select this option, you’ll be able to select the page from a drop-down menu.
How to use the form on your Blog
Once you have created your form, you’ll need to place it on a page or post so visitors can fill it out.
Inserting the form using a shortcode
WPForms uses shortcodes to embed forms on your pages or posts. You’ll find the shortcode in the edit window, next to the Save button.
Click on the button to reveal the code, it will look like the screenshot below:
You need to copy that entire shortcode and insert it into the page where you want the form to be displayed. This most likely will be your contact page.
Once you insert the code, save and publish your page, the page will show the contact form, and your visitors will be able to use it to send you messages, feedback or whatever type of message you want to collect from them.
Inserting the form with the visual editor
You may also use the “Add Form” button directly into a blog post or a page, available in the visual editing screen. When you use this, you can customize the title and description options for embedding the form.
When you click on “Add Form” the embed code will be inserted into your page or blog post.
Conclusion
If you have a WordPress blog, or a website, it is likely that you need to have a contact form so your visitors can contact you, send you feedback or provide some type of information.
WPForms is extremely reliable and easy to use for beginners and advanced bloggers. This blog post explains how to create a contact form for your WordPress website. I explain most of the options available and also how to use the form.
If you have questions or feedback about this tutorial, please leave a comment and I’ll get back to you as soon as possible.
The post How to Add a Contact Form to Your WordPress Website appeared first on How To Blog Tutorials.
