iDeasilo

Contact Form 7 tag syntax

—

by

Takayuki Miyoshi
in

This page explains the syntax of Contact Form 7‘s tag. If you are not familiar with basic usage of Contact Form 7, please see the plugin’s homepage.

Contact Form 7 uses “tags” for two purposes; one is for form content and the other is for mail (to, from and subject fields and message body). Tags for form content has different syntax from ones for mail.

Example of a tag used in form content:
[email* your-email 60/200 "your-email@example.com"]

Example of a tag used in mail:
[your-email]

As seen in above examples, a tag for form content generally has more complicated syntax and many options. In the rest of this page, I write mainly about the syntax and options of form content tag.

Contents

  1. Base syntax of form content tag
  2. Tags for text field (text, text*, email and email*)
  3. Tags for text area (textarea and textarea*)
  4. Tags for drop-down menu (select)
  5. Tags for checkboxes (checkbox)
  6. Tags for radio buttons (radio)
  7. Tags for CAPTCHA image (captchac)
  8. Tags for CAPTCHA text field (captchar)

Base syntax of form content tag

A form content tag consists of a type, a name, options (optional) and values (optional).

Here is the syntax rule with my bogus BNF.

form content tag =
"[" type name option* value* "]"
type =
"text" | "text*" | "email" | "email*" | "textarea" | "textarea*" | "select" | "checkbox" | "radio" | "captchac" | "captchar"
name =
(same constraint as the name attribute of the input element)
option =
space [0-9A-Za-z:#_/-]+
value =
space ('"' string '"' | "'" string "'")

submit type tag is an exception. It doesn’t have name.

Tags for text field (text, text*, email and email*)

Description
A tag with type of text, text*, email or email* is replaced by a text input field. The difference among the four types is how input text is validated. text* and email* suppose inputs are not blank, so they are used for required fields. email and email* suppose inputs are email address.
Example
[text your-name 40/100 "Your Name"]
[email* your-email 40/ class:email akismet:author_email]
Options
(size)/(maxlength) Field size and max length. You can omit one of them, like 40/ or /100.
id:(id) id attribute value of the input element.
class:(class) class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [text your-text class:y2008 class:m01 class:d01].
akismet:author
akismet:author_url
akismet:author_email 		Options for using Akismet (spam filter). See here.
Values
A tag with this type can accept only one value and the value is used as default input value.

Tags for text area (textarea and textarea*)

Description
A tag with type of textarea or textarea* is replaced by a text area. textarea* supposes input is not blank, so it is used for required fields. While textarea accepts blank input.
Example
[textarea your-message 40x10]
Options
(cols)x(rows) Columns (width) and rows (height) of text area. You can omit one of them, like 40x or x10
id:(id) id attribute value of the textarea element.
class:(class) class attribute value of the textarea element. To set two or more classes, you can use multiple class: option, like [textarea your-text class:y2008 class:m01 class:d01].
Values
A tag with this type can accept only one value and the value is used as default input value.

Tags for drop-down menu (select)

Description
A tag with select type is replaced by a drop-down menu and its options.
Example
[select your-menu "A" "B" "C"]
Options
multiple Make drop-down menu multi-selectable.
include_blank Insert a blank item “—” into the top of options of this drop-down menu.
default:(num) Pre-selected options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with _(underbar), as default:1_2_3.
id:(id) id attribute value of the select element.
class:(class) class attribute value of the select element. To set two or more classes, you can use multiple class: option, like [select your-menu class:y2008 class:m01 class:d01].
Values
A tag with this type can accept multiple values. The values are used as options of the selection.

Tags for checkboxes (checkbox)

Description
A tag with checkbox type is replaced by a set of checkboxes.
Example
[checkbox your-checkbox "a" "b" "c"]
Options
exclusive Make checkboxes exclusive. I mean, when you check a checkbox in the set, others are unchecked, so zero checked or one checked. This is a JavaScript gimmick, so JavaScript on client side is needed.
default:(num) Pre-checked options. The integer following default: is the position in the order of items. 1 is the first one. If you want to make two or more items selected, joint integers with _(underbar), as default:1_2_3.
id:(id) id attribute value of the span element surrounding checkboxes.
class:(class) class attribute value of the span element surrounding checkboxes. To set two or more classes, you can use multiple class: option, like [checkbox your-checkbox class:y2008 class:m01 class:d01].
Values
A tag with this type can accept multiple values. The values are used as checkbox values.

Tags for radio buttons (radio)

Description
A tag with radio type is replaced by a set of radio buttons.
Example
[radio your-radio "a" "b" "c"]
Options
default:(num) Pre-checked options. The integer following default: is the position in the order of items. 1 is the first one.
id:(id) id attribute value of the span element surrounding radio buttons.
class:(class) class attribute value of the span element surrounding radio buttons. To set two or more classes, you can use multiple class: option, like [radio your-radio class:y2008 class:m01 class:d01].
Values
A tag with this type can accept multiple values. The values are used as radio button values.

Tags for CAPTCHA image (captchac)

Description
A tag with captchac type is replaced by a CAPTCHA image. See also how to use CAPTCHA.
Example
[captchac your-captcha size:s fg:#ffffff bg:#000000]
Options
size:(sml) Image size. Only size:s (60×20), size:m (72×24) and size:l (84×28) are available.
fg:#(hex) Foreground color of the CAPTCHA image. Put RGB color code in hex format after fg:# as fg:#ff0000
bg:#(hex) Background color of the CAPTCHA image. Put RGB color code in hex format after bg:# as bg:#ff0000
id:(id) id attribute value of the img element for the CAPTCHA image.
class:(class) class attribute value of the img element for the CAPTCHA image. To set two or more classes, you can use multiple class: option, like [captchac your-captcha class:y2008 class:m01 class:d01].
Values
A tag with this type can not accept values.

Tags for CAPTCHA text field (captchar)

Description
A tag with captchar type is replaced by a CAPTCHA text input field. See also how to use CAPTCHA.
Example
[captchar your-captcha 40/100]
Options
(size)/(maxlength) Field size and max length. You can omit one of them, like 40/ or /100.
id:(id) id attribute value of the input element.
class:(class) class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [captchar your-captcha class:y2008 class:m01 class:d01].
Values
A tag with this type can accept only one value and the value is used as default input value.

Comments

102 responses to “Contact Form 7 tag syntax”

  1. kamal Avatar
    kamal

    @Dominic
    use this – onblur=’if (this.value == “”) {this.value = “Enter your email address”;}’ onfocus=’if (this.value == “Enter your email address”) {this.value = “”;}’

  2. Chris Avatar
    Chris

    Great plugin thanks, is there any way to style the form?

    Thanks in advance.

  3. miyoshi Avatar
    miyoshi

    Chris, you can do it with CSS stylesheets.

  4. voudini Avatar
    voudini

    Is there any way to use an image instead of a submit button?

  5. mbhan Avatar
    mbhan

    Its Great plugin. Thx dude.. Good Job! I was use it.

  6. Ian Avatar
    Ian

    A quick way to get a button for your submit is to style it in. This is not an ideal solution, but try making a class on your p tag, like this.

    [submit ” “]

    Then style wpcf7send like this.

    .wpcf7send input {
    border:none;
    background-image:url(images/btn_send_comments.gif);
    width:224px;
    height:31px;
    }

    You can see mine in action here.

    http://www.ianhoar.com/contact/

  7. Ian Avatar
    Ian

    Lets try that again. Here’s the HTML from the contact form tool.

    <p class="wpcf7send">[submit " "]</p>

  8. Rafael Avatar
    Rafael

    I’m a bit unclear with your instructions in the FAQ, I’m receiving an email with all of my codes in the form that i would like to be displayed in the email in order. What exactly am I doing wrong?

    here’s what my email looks like:
    [email* your-email] [text* PhoneNumber/30] [text* addresse1/100] [text addresse2/100] [text State/3] [text Zip/3] [radio injuries “Yes” “No”] [text Cardio/10] [textarea your-message/10]

  9. Tomas Sramek Avatar
    Tomas Sramek

    Great plugin. I used it on site of one of my clients.

  10. miyoshi Avatar
    miyoshi

    Rafael, In the Mail section, you need only the names of tags (the second parameter in the tag used within the Form section), so the correct code you should enter in the Mail Body is like this:

    [your-email]
    [PhoneNumber]
    [addresse1]
    [addresse2]
    [State]
    [Zip]
    [injuries]
    [Cardio]
    [your-message]

  11. Edvier Avatar
    Edvier

    Hi
    I am just wondering if there is a way to make the radio button list vertically instead of horizontally. Sometimes the items that I want put in the list are bigger, other are smaller, and what happen is something like this:

    O option a O option b

    I want something like this
    O option a
    O option b

    If somebody knows, please let me know

  12. Ranco Avatar
    Ranco

    Hello there,

    I’m using your plugin very much, but i’m wondering how i could get my checkboxes below eachother instead of all right after eachother.
    The look like this now: . A . B . C . D
    I want them like:
    . option A
    . option B
    . option C
    . option D

    Thankyou!

  13. Declan Avatar
    Declan

    Hi,

    Great contact plugin. I want to use the checkbox as an active part of the contact enquiry. I’m trying to work out how to get the checked boxes by the enquirer to arrive with the submitted e-mail. Any help or advise would be greatly appreciated.

    Thanks

  14. Phil Avatar
    Phil

    Using CF7 on a page dedicated to it works nicely and the fields seem formattable; but, there is a difference between browser realisations. FF shows narrower than IE7, for instance.

    Is this covered elsewhere? Or by a workaround?

    Thanks

  15. dale Avatar
    dale

    Hi the best form i’ve found.. thanks.. just wondering how to get the form to be more inline like your one. the form puts a tag after the text automatically?
    cheers

  16. Claude Gelinas Avatar
    Claude Gelinas

    This is an awesome plug-in!

    I wanted to know if there’s a way to send the “successfully completed form” to a specific “success page”.

    Thanks for any insight!

  17. Bill Rust Avatar
    Bill Rust

    Does anyone know the string or code you place in the e-mail part of the form builder to send the checkbox selections in the email when submit is clicked?

    Thanks,
    Bill

  18. Bill Rust Avatar
    Bill Rust

    I’ve tried every variation I think think of, using this code, and still does not send me the checkbox selection…

    [checkbox your-checkbox “a” “b” “c”]

    checkbox your-checkbox “a” “b” “c”

    Anyone have any ideas?

  19. Gene Avatar
    Gene

    Any way to set word wrap on a txtarea? Doesn’t seem to work, even when set as a class.

  20. Michelle Avatar
    Michelle

    How can I set my own fields as required to contain input? I need this for drop-down menu’s, radio buttons, etc., not just name and email fields.

    Any examples (explained in detail) will be greatly appreciated.

  21. john conner Avatar
    john conner

    I like how you set up your contact field on this page. How do I add “Leave a Reply” on top of the contact form, also the ‘field’ description “Name (required), on the side of the field?

    Thanks.

  22. Kelly Williams Avatar
    Kelly Williams

    Very easy to work with but like several above regarding check boxes, I cannot figure out how to get my custom drop-down box results emailed to me. What do I have to type in the mail form to receive the user selection with my email? Any help is appreciated!

  23. dawnaturservice Avatar
    dawnaturservice

    Hi,
    Looking for similiar answers. I have Your Phone (required)
    [text* your-Phone] in the form field and [your-phone] in mail field, but can’t get the phone # to appear in e-mail.

    Additionally, is there a way to have the id attributes for the radio buttons appear in the e-mail so I know which answers are pertaining to which questions without having to go back and look? I’ve tried various ways and after 10 attempts, am here to seek help.

    Any suggestions are greatly appreciated.
    Thanks,
    Dawn

  24. Calvin Avatar
    Calvin

    Great plugin… Is there anyway to mail a custom field from the page/post on which the form appears? how about any of the other page elements i.e. tags, category, post title?

    Any help is appreciated!

  25. drchivas Avatar
    drchivas

    very good – thanks

  26. Paul Avatar
    Paul

    I like your plugin a lot but I think FAQ for this plugin is very poor. It would be great if you can explain how to get List Menu or Check Box selected items to appear in Subject line.

    Thanks

  27. dimas Avatar
    dimas

    hi, love your plugin. im using it to create an online registration form. just curious, why not make an option for all the other input to be “required” ?

    thanks

  28. casey Avatar
    casey

    I have read all the FAQ’s, but I still don’t understand hwo to create a message with radio button values.

    my radio button is as so
    [radio Choices “Choice 1”]
    [radio Choices “Choice 2”]

    In my message area, I tried:
    [Choices]

    and:

    [radio Choices]

    and:

    [radio Choices “Choice 1”]

    None of these reply with the selection from the radio button. Can you please add a radio button example with all fields filled in correctly? Justa secreenshot would be helpful.

  29. casey Avatar
    casey

    My problem was with separating the radio buttons.

    [radio Choices “Choice 1”]
    [radio Choices “Choice 2”]

    so I needed it to be:
    [radio Choices “Choice 1” “Choice 2”]

    it’s almost a hack, cause you can separate the radio button groups, and they still select as a group. you can’t receive it in mail then though.

  30. designbyjm Avatar
    designbyjm

    Having issues getting anything to show up in the page. This is what I have copy and pasted into the HTML WYSIWYG editor.

    [contact-form 1 "Contact form 1"]

    Contact Name (required)

    [text* contact-name]

    Email Address (required)

    [email* email_address]

    Phone Number

    [text* phone_number]

    Company (required)

    [text* company_name]

    Title (required)

    [text* your_title]

    URL

    [text your_url]

    [select IndustrySector include_blank id:industry “Healthcare” “Utilities” “Financial” “Distribution” “Retail” “E-commerce” “Shipping” “Other”]

    [radio subscribe_email id:sub_email “Yes, please add me to your mailing list.”]

    [submit “Send”]

  31. Lise Avatar
    Lise

    Great Plugin. Thank you.
    However I have some problems implementing a
    textarea (used for collect an age) which validates only if the user enter a number. Could I use
    regular expressions? How?

    Thank you

  32. asfan Avatar
    asfan

    Hi

    Is there any way to allow the user to enter digits in the phone no text filed rather than text. Any check or ….

  33. Hans Avatar
    Hans

    Great plugin, thanks. Is there a way I can add an additional address as a CC?

  34. krttqo Avatar
    krttqo

    How can I change the submit button? thx

  35. muymalestado Avatar
    muymalestado

    @krttqo
    near the bottom of the ‘Form’ part of the screen, left side, look for something like this:
    [submit “Submit”]

    put whatever text you want into the quotes

  36. generosityfromtheheart Avatar
    generosityfromtheheart

    When I click save on the form settings, I get this message “You do not have sufficient permissions to access this page.” Is there a setting I missed somewhere?

  37. Acelio Avatar
    Acelio

    Great Plugin.

    Suggestion: add option for hidden field

    Adicionar uma função para adicionarmos campos hidden nos formulários.
    opções para preencher com o IP address and userAgent

  38. tavi Avatar
    tavi

    hi,

    is there a way i can have the drop-down lists on the same row? meaning i want to have 3 drop-down lists in the same paragraph. Right now i get the after each one apart.

    Anyone can help me?

    thanks!

  39. Jan Tonellato Avatar
    Jan Tonellato

    Hello,
    I’d like the email be sent to a specific receiver selected by the drop down menu.
    Is there a way to set a custom value=” for each ‘option’ item?

    Thanks

    JT

  40. Erik Avatar
    Erik

    Hi,

    I’m having a problem with the phone field of my contact form. If I test it using the format (111) 111-1111 for the phone number, the phone # is sent to me without the area code. How can I fix this?

    Thanks!

  41. השתלות שיניים Avatar
    השתלות שיניים

    I was looking for this! thanks

  42. velvia persky Avatar
    velvia persky

    Great…thanks…

  43. Linnera Avatar
    Linnera

    How to put text fields side by side? Forexample First name and last name on the same row?

  44. Gavin Avatar
    Gavin

    My form is all jumbled around and out of shape?

    How do I target each element using CSS to set it right?

  45. Othmar Avatar
    Othmar

    Please tell me the way to way to add an additional address as a CC and BCC?

    Thanks & KR Othmar

  46. THANKS Avatar
    THANKS

    Thanks for Bcc & CC – fine Plugin !

  47. Mad Eye Avatar
    Mad Eye

    I would like to see checkbox values as column, (not as line), is it possible ?

  48. placidway Avatar
    placidway

    can anybody give me the tag for drop down menu for the email… i have for the form…. but i cant fix for the email….

    thanks

  49. henry Avatar
    henry

    interested in knowing if you would consider adding support for “onfocus” in the future – this way the form fields could clear when clicked on?

    or if anyone knows of any way to make this happen with the current version please advise …

    btw – wonderful plugin!

  50. Rahul Sharma Avatar
    Rahul Sharma

    how can i use my own javascript at client side so i show user alert message box in contact form7……….can you help??

Leave a comment