There are a lot of plugins for WordPress that allow you to add a contact form to a page. In this tutorial, we will talk about the most popular plugin: Contact Form 7
Contact Form 7
Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.
You can find docs, FAQ and more detailed information about Contact Form 7 on contactform7.com. If you were unable to find the answer to your question on the FAQ or in any of the documentation.
Create a contact page
To create a contact form using contact form 7 plugin, follow the steps below:
Install “Contact Form 7” plugin: Navigate to the admin dashboard, click on Plugins > Add New and enter Contact Form 7 in the Search box. From the results, click on the Install Now button. After finished, click on Active the plugin.
- Create a Contact Form: click on Contact > Contact Forms from the admin dashboard. You can manage multiple contact forms there.
- Get contact shortcode: Just after installing the Contact Form 7 plugin, you’ll see a default form named “Contact form 1”, and a code like this:
[[contact-form-7 id="1234" title="Contact form 1"]]
- Create Page: Copy this code. Then, navigate to “Page > Add New” and then input contact form shortcode into the contents of the page.
Now your contact page setup is complete. Visitors to your site can now find the form and start submitting messages to you.
Customizing a Form
Navigate to Contact > Contact Forms then select the form you would like to edit. Tags can be created using a list with the tags as below:
- text fields (text, text*, email, email*, textarea and textarea*)
- checkboxes, radio buttons and menus (checkbox, checkbox*, radio, select and select*)
- file uploading an attachment (file and file*)
- captcha
- submit button
To add fields to a form, make tags for them and insert them into the ‘From’ field. You’ll find unfamiliar codes in the ‘Form’ field, for example: [text* your-name]. These codes are called “tags” in the vocabulary for Contact Form 7.
A tag has a rather complex syntax, but don’t worry! You don’t have to learn it. You can use the “Generate Tag” tool to generate as many tags as you want.
The second word in the tag is its name. For example, the name of [text* your-name] is ‘your-name.’ This name is important as it is used later in your mail template.
Customizing Mail
You can edit mail templates in the ‘Mail’ fieldset as you did with the form template. You can use tags there as well, but note that tags for mail are different from those tags for forms.
Tags you can use in a mail template contain only one word in brackets and look like [your-name]. You should be aware that this ‘your-name’ is the same as the name of the form tag which is noted in the previous example. The two tags correspond to the same name.
In the mail, [your-name] will be replaced by the user’s input value, which is submitted through the corresponding form field, which, in this case, is [text* your-name].
How to Prevent Spam
It’s really important to add measures to prevent spam from getting through your form submissions. The best way is to use CAPTCHA fields of contact plugins.
How to Add Contact Information at the Right Sidebar?
Refer to this article for further information.