In this tutorial, I will be showing you how to create a contact form in WordPress using the Contact Form 7 plugin.
How to create a contact form in WordPress
First of all, log in to your site.
For this tutorial I’ll be using Astra WordPress theme, a super lightweight easy to use WordPress theme for WordPress developers, here’s a link I recommend you check them out – https://wpastra.com/?bsf=737.
Add the contact form 7 plugin
Next, you need to click on plugins located on the left side of your screen on the sidebar. Once you have done that you can simply search for ‘contact form’ and Contact Form 7 should appear at the top of your search results.
Let’s dive right in!
After clicking ‘contact’ in the sidebar as you can see above, you’ll be met with your contact form section. By default, this comes with a contact form that we’ll be using for the purposes of this tutorial – hover over ‘contact form 1’ and click edit.
Contact form content
Containing the form content, this box shows you what fields you’ll be using to gain information from your users. These are separated into two parts, the label that’s displayed above the field or around the field, and the user-friendly label to specify what information you need to get from your user.
As you can see below, this form has areas for your user to enter their name, email, the subject of their message and the message itself.
The star to the right of text signifies that this is required and for the form to be able to submit they have to fill out this information first, similarly, text without this star means that it’s optional. It is recommended that if you’d like to add a required section that you add a disclaimer in the text to signify that it’s required.
Above this text box, you’ll be able to see a range of fields you can include in your forms such as dates, a drop-down menu, checkboxes and quizzes. For the purposes of this how to create a contact form in WordPress tutorial we’re going to keep it simple and move on to the next section.
Click on mail and you’ll be able to adjust your settings to where and how this form is going to be sent and is separated into some easy sections that are good to remember when learning how to create a contact form in WordPress.
- To: Who your form will be sent to.
- From: This will tell you who it’s from, and what contact form 7 does is pull the information from the fields (like your user’s name) and adds it so you have a name to work with.
- Subject: So you can customise your subject and change it to ‘contact form submission’ or ‘enquiry’.
- Additional headers: This determines where your reply will go once you respond to this form – in this case, it will return right back to your user’s email.
- Message body: This is important as it lays out the structure for the contact form in terms of what you will receive to your email address by pulling the information you gathered from your contact form.
To show you how the form fields work we’re going to add another here. As you can see below just click ‘URL’ above the text box and you’ll see some options.
First, rename your field then click ‘required’ and lastly insert tag at the bottom.
Then as you can see below you need to add your label in the text box.
<label> Your website*
[url* URL] </label>
Then you switch back over to your ‘mail’ section and add the tag there so the form includes this information when you receive an email.[URL]
Finally, the last part of the mail section to look at is at the bottom where it tells you where your mail has come from, in this instance it says “This e-mail was sent from a contact form on my blog”. You might want to be more specific for your own records and change it to something like “This e-mail was sent from the Contact Form on the Square Internet website”.
Generally speaking, this section tends not to get much use by users because many of the messages are fit for purpose, but it’s still an important section to go over when learning how to create a WordPress contact form.
The two messages you may want to customise with your branding are your sent messages which are displayed when your users submit your form. For instance, instead of “Thank you for your message. It has been sent” you could change it to “Thank you for submitting my video tutorial form” or anything that makes it more unique to your website.
After you have filled these in the scroll down and hit the save button to update your settings. You’ve almost learnt how to create a contact form in WordPress!
Embed your form into your website
Depending on your theme you may already have an option to use Contact Form 7 on your website, to check you need to either check your page builder by searching through your modules.
If you don’t have that option, what you need to do is copy this shortcode that you can see below and paste it onto your website – you can do this in a couple of ways.
- Shortcode: Click on the shortcode box and paste it in, it should appear on your website.
- Text box: If you don’t have a shortcode option, you can use a text block instead as long as it’s formatted correctly.
Once you have inserted your form, make sure you click save and check it is displaying correctly on your website.
Hopefully, you found this tutorial on how to create a contact form in WordPress useful. If there’s anything you’d like to see expanded upon let me know, or if you need help with how to create a WordPress contact form, email me at – firstname.lastname@example.org.