This article is the first in a tutorial series for the WordPress plugin, Contact Form 7. Basic knowledge of WordPress and HTML coding is required to continue on with this article.
Step 1: Displaying a Form on a WordPress Page
Let’s start with displaying a form on your page. First, open the ‘Contact’ > ‘Edit’ menu on your WordPress administration panel. You can manage multiple contact forms there.
Just after installing the Contact Form 7 plugin, you’ll see a default form named “Contact form 1″, and a code like this:
Copy the brown highlighted code. Then, open the edit menu of the page (‘Pages’ > ‘Edit’) into which you wish to place the contact form. A popular practice is creating a page named “Contact” for the contact form page. Paste the code you copied into the content area of the desired page.
Now your contact form setup is complete. Visitors to your site can now find the CF7 form and start submitting messages to you.
Step 2: Setting up the Form and Mail Message
Customizing a Form
You may feel that you need to add more fields to default form that has already been set up. You can edit the form template in the ‘Contact’ > ‘Edit’ menu and add the necessary fields you need into the form.
To add fields to a form, make tags for them and insert them into the ‘Form’ 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 an unfamiliar syntax to it, but don’t worry you can use the easy to use “Generate Tag” tool to generate as many tags as you want.
The ‘*’ (after the tag type) will set the tag as being required. The second term in the tag is called the ‘tag name’. For example, the tag name of [text* your-name] is ‘your-name.’ The tag name is important as it is used later in your mail template .
Customizing the Mail Message
You can edit mail message templates in the ‘Mail’ field set 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.
In the mail message template, you are only using the tag name and looks 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 with the same name.
In mail message, [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].
Conclusion
With this article – you can setup the Form and Mail Messages in Contact 7 but only simple ones. In future articles of this series we will discover more about the tags and most importantly their syntax in Contact Form 7, this will help you create the more advanced looking and functioning forms that you need for your WordPress site. Also in this series, we will see how to use CSS and jQuery with CF7 and CF7’s extensions and how those are used in unique functional ways.
Next in the series: Tags and Tag Syntax in CF7 (coming soon)
Leave a Reply