Beekeepersblog logo


Contact Form 7 WordPress plugin image icon

Understanding Form-tags in Contact-Form-7 [Updated 2019]

Contact Form 7

Contact-Form-7 has shortcode for Forms and Email called tags. It is similar to the shortcode in WordPress and its easy to use. Tags are small piece of string enclosed in a square brackets [].

There are two types of tags Form-tag and Mail-tag


Form-tag are added in the Form tab. These Form-tag are replaced with HTML elements in the front-end of your Form. Which can be seen when in inspect that element.

Form-tag is highlighted in the Form tab - image
Figure 1: Screenshot of the Form tab in the Contact-Form-7 plugin page.
<!-- Form-tag -->
[text your-name]

<!-- HTML output -->
<input name="your-name" type="text">

You do not have to remember everyone, Contact-Form-7 has all these tags on top called Form-tag generator. Select anyone and it will ask you to fill in all the required and optional fields.

Once the tag is generated through Form-tag generator you can only edit it manually by adding or removing the text, but you cannot bring the Form-tag generator window by selecting the generated tag.

Form-tag generators in the Form tab - image
Figure 2: Screenshot of the Form tab in the Contact-Form-7 plugin page. Highlighted the Form tag Generators

Form-tag components has four different parts

  • Type
  • Name
  • Options
  • Values


Type defines what type of HTML element you need. Based on the Type selection the options will change. Type is the first thing you will have in the tags

<!-- for text input -->
[text ...]
<!-- for email input -->
[email ...]
<!-- for date input -->
[date ...]

Name (Must)

Name is to identify the input field. It is also be used in the Mail tab which will display as tags (a.k.a Mail-tags), it will automatically appear on top (see the image below) in the Mail tab. Name is must, if you do not give a name Contact-Form-7 will automatically assign a field name and number. ex: text-526

[... yourname ...]
Form-tag name is displayed in the Mail tab - image
Figure 3: Screenshot of the Mail tab in the Contact-Form-7 plugin page. List of unused Form tags listed as Mail tag


Is for behavior and appearance. Ex: class and id are comes under options. Options are optional.

[... id:name_id class:nameclass ...]


Use to define values of the field. you can also use this field as placeholder. You can only have value or a placeholder.

If you add a placeholder before a string, it will output placeholder="foobar". But if you just keep the string without the placeholder text it will output value="foobar"

<!-- value -->
[... "foobar"]
<!-- placeholder -->
[... placeholder "foobar"]
How do you like this article?
OkGoodHelpful!Very Helpful!Awesome!!   Is the article helpful?