A contact form is highly beneficial for your website – it helps to keep your email address private (this way reducing spam) and it makes easier and quicker for your visitors to get in touch directly via your website.
If you’ve created a Contact us page on your WordPress website, it’s easy to add a contact form, personalize it and start receiving messages.
The easiest way to create a form is by using a WordPress plugin – currently, there are many you can choose from. On this tutorial, we’ll use Contact Form 7.
With more than 3 million active installs, Contact Form 7 is the most widely used Contact Form WordPress plugin. Its intuitive interface and quick setup will help you create a form in no time.
Table of Contents
What you’ll need
- Access to your WordPress admin dashboard
Step 1 – Installing Contact form 7
- Log in to your WordPress dashboard, and select Plugins > Add new from the left-hand side menu.
- Search for Contact form 7 and select Install.
- Once installed, select Activate to activate the plugin on your website.
Step 2 – Creating a form
Once the plugin is active, a new section Contact is shown on your dashboard left-hand side menu.
- Select Contact -> Add new to create your first form.
- Add a title to your form – e.g. WordPress Contact Form.
- Some labels and input fields have been placed on the form to help you start. You can remove them, or add new labels and input fields by selecting them from the list displayed at the top of the text area.
If you’re not sure about what labels or input fields you may need, you can leave the form as it is, and you can always come back and edit it later.
Depending on the labels and input fields chosen, your final code should look like this:
Your Name (required) [text* your-name] Your Email (required) [email* your-email] Subject [text your-subject] Your Message [textarea your-message] [submit "Send"]
- You can add and remove elements, according to your needs. To help you start, try with the placeholders listed above the form.
- The star sign * indicates that a field is compulsory.
Step 3 – Setting up your emails format
When a visitor submits a message through your form, you’ll receive an email containing their name, contact details, and the body of their message.
You can set up the emails through the Mail tab – some mail-tags are listed at the top. Feel free to experiment by adding them to the fields – you can always come back and make changes later.
IMPORTANT: Make sure you type a valid email address in the To field – this is where all the messages will be delivered.
Step 4 – Personalise the user experience
On the Messages tab, you can personalise the messages your visitors see when they submit the form – for example, you could set up a message when the form has been submitted successfully and a different message in case some errors came up (e.g. the visitor provided an invalid email address, or didn’t fill out a required field).
Step 5 – Saving and publish your form
When you’re ready, you can save your changes by clicking Save on the right-hand side panel.
Once the form is saved, a “shortcode” will be displayed at the top. It is highlighted in blue, and it looks like this:
[contact-form-7 404 "Not Found"]
In order to publish your form:
- Select the shortcode, and copy it
- Paste the shortcode into the page, post or widget where you would like your form to be displayed.
- Final result should look like this:
Step 6 – Testing WordPress form
It’s important to test your form in order to make sure it looks and behave as expected. Also, it’s critical to ensure that you receive the messages via email.
In order to do this, simply visit your WordPress website, and submit the form like a visitor would do – you can always go back to the form editor, and make changes.
When making any changes, remember to press Save button. There’s no need to copy and paste the shortcode again.
The instruction provided in this tutorial, give you the foundation you need to create and publish a Contact Form for your WordPress website and to receive messages via email.
Feeling adventurous? There’s more to explore – you can experiment with tags and placeholders, and personalise even your form and your emails even more. You can also try Flamingo – a message storage plugin, to store all your received messages into a database (particularly useful if your mail server has issues).