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. Tommaso Avatar
    Tommaso

    Hi what a fantastic plugin!

    Can I give to “Radio Button” a “required field” option!

    Thanks a lot

  2. Tommaso Avatar
    Tommaso

    sorry for my bad english… it was a question…

  3. miyoshi Avatar
    miyoshi

    Tommaso,

    So far the plugin don’t offer such option. Hmm… but why do you need radio buttons as required? From my perspective, originally radio button is “required”, always one of the choices is submitted. … but, it may be interesting. Please tell me your detailed opinion about this. I’ll consider it. Thanks.

  4. Tommaso Avatar
    Tommaso

    Hi…
    thanks for your fast answer, I wanted to use the “Radio Button” to confirm some terms of a condition or contract and to give the consent to the treatment of the personal data.

    I use an iframe to load the document and then I wanted to position the “Radio” in this way:

    “(*)Accept () don’t Accept”

    I have succeeded to inserie the check on the first (*)Accept, but I should do so that if someone click on () it don’t Accept, the form give me an error message.

    I have also tried to use the the attribute “onclick”..can it be a solution?

    Make me know if you have some suggestion or also alternative… I am not really a magician of the code!

    You still compliment for the plugin.. really the best plugin of the kind!

    Thank You

    Tommaso

  5. Wayne Avatar
    Wayne

    How can I specify a subject? Or at least add a few words to the beginning of the subject so that I know that this email is from the website. like “From the website…”

    This is a great plugin! Thanks for your work on this.
    ~w

  6. miyoshi Avatar
    miyoshi

    Wayne,

    You can do it just by editting Subject field.

    You can find Contact Form 7’s admin page on [Options] – [Contact Form 7].

    Thanks.

  7. Hariadi Avatar
    Hariadi

    how can I put value like this:

    Training
    Services
    Other

    btw, great plugin! thanxz

  8. miyoshi Avatar
    miyoshi

    Hariadi,

    Some tags deleted? Sorry.

    I guess you were mentioning about dropdown menu or radio buttons. You can do it by using tag like [select yourtagname "Training" "Services" "Other"] or [radio yourtagname "Training" "Services" "Other"]. See this page if you do not yet.

  9. Hariadi Avatar
    Hariadi

    TQ..

    for now I using this [select yourtagname “Training” “Services” “Other”] and it works

    just in case I want to change input value. example..

    input value=”01″ : Training
    input value=”02″ : Services
    input value=”03″ : Other

  10. miyoshi Avatar
    miyoshi

    Hariadi,

    ok, I got your point. But unfortunately, it’s not supported so far.

    I’ve thought ever that there are few users need the function like you wrote. Could you tell me why you need it? Just for my future reference.

  11. Hariadi Avatar
    Hariadi

    Ok.. For example:

    input value=”trainee″ : Training
    input value=”serv″ : Services
    input value=”helpdesk″ : Other

    ..and I change:

    $mail_bcc = preg_replace_callback($regex, $callback, $contact_form[‘mail’][‘recipient’]);

    ..using switch()

    switch($mail_subject) {

    case “trainee” :
    $mail_recipient = $mail_subject . ‘@example.com’;
    $mail_subject = $mail_subject . ‘: Training’;
    break;

    case “serv” :
    $mail_recipient = $mail_subject . ‘@example.com’;
    $mail_subject = $mail_subject . ‘: Services’;
    break;

    case “helpdesk” :
    $mail_recipient = $mail_subject . ‘@example.com’;
    $mail_subject = $mail_subject . ‘: Helpdesk’;
    break;
    }

    .. so, when people select Training so email go to trainee@example.com with subject: Training and BCC to admin..

    hehe.. don’t take it so hard, just for example

  12. miyoshi Avatar
    miyoshi

    Hariadi,

    Thanks, I got it, but,,, why don’t you chenge <select> in HTML as well??? You can find the generating code in form_element_replace_callback() in wp-contact-form-7.php. Good luck.

  13. Lucia Avatar
    Lucia

    Is it possible to place a “Contact Form 7” within a template as in “page.php”.

    Thanks.

  14. Hariadi Avatar
    Hariadi

    hehe.. coz i’m PHP newbie.. but I will try. make it to send multi user email by subject..

  15. Lucia Avatar
    Lucia

    What I did to make it happen:

    Copied the HTML-output into a php file that I included into page.php so al my static pages have the same form.
    Made the subject input dynamic by echoing the title of the page.

    Great plugin!!

  16. lee Avatar
    lee

    Hi, great script – just what i was looking for.

    Just wondering if its possible to add a class & id to the submit button & the actual form itself?

    Thanks :)

  17. miyoshi Avatar
    miyoshi

    lee,

    I have a plan to add a function to add class and id to submit button in version 1.8. But, to form itself, I have no plan so far. I want to do it if it can be done with simply way.

  18. lee Avatar
    lee

    Thanks miyoshi. I look forward to 1.8 :)

  19. abi Avatar
    abi

    Cool plugin, just one thing, it there a way to add an image as a background? managed to do this with my own css using you classes above? BUT i cant get rid of the Value=send on the submit button? Where can i remove it from your code?

  20. miyoshi Avatar
    miyoshi

    abi,

    Use your CSS and this tag: [submit " "]

  21. dave Avatar
    dave

    your plugin looks the business! but is there anyway users can upload an image to the form as well?

    cheers

  22. miyoshi Avatar
    miyoshi

    dave,

    Contact Form 7 hasn’t implemented it yet, and I have no plan so far. I’m not sure how many users need the feature. I want to keep it simple.

  23. abhijit Avatar
    abhijit

    Hi…
    Thanks for sharing your contact form plugin. It;s lovely.

    I am using it here http://pratibimb.pubwebhost.com/?page_id=3

    How can I make Your message and Captcha fields as REQUIRED?
    If there is no message written or captcha written, the form shouldn’t be validated.
    Please help.

  24. miyoshi Avatar
    miyoshi

    abhijit, I saw your page with Firefox 2, and didn’t see any trouble. It seems working correctly. Could you explain what issue you are seeing?

  25. Jason Avatar
    Jason

    Great Plugin, thanks for your hard work. I am having a problem with a radio button. The question asks for yes or no in that order. If the no button is clicked (In both IE and Firefox) the button automatically goes back to yes. I have not been able figure out what is happening. Any suggestions?

  26. miyoshi Avatar
    miyoshi

    Jason, the most possible cause is incorrect HTML use. XHTML-CSS Validator may help.

  27. Li-An Avatar
    Li-An

    Hello,
    Your plugin works well (I will not speak about another very well known plugin not working at all on my blog :-)) but I have some questions and remarks:
    1. it will be nice if you explain in your “tag” page that we need to put in the mail form “[checkbox X] to get the field in checkbox. And the same for all the fields. It may be obvious for a lot of people but for a French user like me not used with your plugin, it was not easy to understand !
    2. how can I get the different choices for checkbox listed in a vertical mode ?
    I’ve got Choice1 choice2 choice3
    and I want
    Choice1
    Choice2
    Choice3

    Thank you for this nice plugin :-)

  28. miyoshi Avatar
    miyoshi

    Li-An, thanks for comments. I’ll improve the documentation. If you need checkboxes listed vertical, you can get it with CSS. See this post.

  29. Jared Avatar
    Jared

    Hi,

    Love the plugin. I’m trying to use the submit tag for the following:

    How can I make it work?

    Thanks!

    Jared

  30. Jared Avatar
    Jared

    Hi,

    My code wouldn’t post. Anyway, I’m trying to use the submit tag to specify an id and a class. Is this possible? I can’t do it with css because I the inputs are all the same and I want the “button” to be styled differently.

    I’ll try posting the code again:

    “”

    How can I make it work?

    Thanks!

    Jared

  31. miyoshi Avatar
    miyoshi

    Jared, sorry for the not easy commenting interface. The current version of 1.7.x has no option to add id and class to submit buttons. Next version 1.8 will include it and is planed to release in one or two months.

  32. Bret Avatar
    Bret

    Im trying to generate my own inputs, the fields show on the page, but the data never gets emailed.

    Here is the form code:

    Your Name (required)
    [text* your-name]

    Your Email (required)
    [email* your-email]

    [text* WebSiteAddress id:WebSiteAddress “www.YourWebSite.com”]

    Questions / Comment
    [textarea your-message]

    [submit “Send”]

  33. miyoshi Avatar
    miyoshi

    Bret, see this FAQ:

    Nothing shows up in the email, even after adding a tag to the form! How can I include a new field’s input in the email?

  34. Claire Avatar
    Claire

    Here is the form I have created using your amazing plug-in

    http://www.thewhatwherewhen.com/art/?page_id=6

    I was firstly wondering if there is a way to have pre-filled input fields. So where I have written “From – To DD/MM/YY” next to “Dates” it would actually appear in the part the visitor would type. I’m sure there’s a really easy way to do this.

    Also it would be great if you could make an image upload for this. I know I would definitely use it and there doesn’t seem to be a plug-in that offers this service.

    Thanks! And keep up the great work!

    Claire

  35. Claire Avatar
    Claire

    Oh and also I have just noticed…. on my form

    http://www.thewhatwherewhen.com/art/?page_id=6

    the section named “Kind: (required)” the checkbox for private view is on the line above. is there anyway to ensure that it is on the same line as the text?

  36. Hariadi Avatar
    Hariadi

    Greatt! finally its supports multiple contact forms!

    Thanks!

  37. ArthaGuru Avatar
    ArthaGuru

    See http://www.arthaguru.com/contact/

    All works fine

    But see the input boxes are not seen … meaning they are there but its white in color and my bg color is also white and it cant be seen

    Can u please help me so that

    Please help me fix it

  38. ArthaGuru Avatar
    ArthaGuru

    Codes i have used are

    Name *
    [text* your-name]

    Email Address *
    [email* your-email]

  39. miyoshi Avatar
    miyoshi

    ArthaGuru, it’s just a style. Add this in your CSS stylesheet.

    div.wpcf7 input { border: 1px solid #000; }

  40. ArthaGuru Avatar
    ArthaGuru

    Yes i did but all of the boxes are not in a straight line

    And the box for Message dont even appear

    I am a newbie in CSS

    Please help

  41. azmiii Avatar
    azmiii

    thanks for this plugin itis very useful ;)

    eskişehir mobilya

  42. Brian Avatar
    Brian

    Is there a way for checkboxes or radio buttons not to show a value in the form, but in the output? I want to use images as the button labels instead of text

    Replacing this code (brackets changed to display code):

    {input type=”radio” name=”car_type” id=”button1″ value=”button1″ /}

    {input type=”radio” name=”car_type” id=”button2″ value=”button2″ /}

    {input type=”radio” name=”car_type” id=”button3″ value=”button3″ /}

  43. miyoshi Avatar
    miyoshi

    Brian, it’s not supported currently. I added it to my todo list. Thanks.

  44. Nasir Avatar
    Nasir

    Dear,

    i am Nasir from Bangladesh.as far as i know there are lots of work for captcha typing which are still hanging.i am requesting you to allow me to do the work as i am deeply interested . i am very much keen in this work and also to fulfill your demand too.

    would you please inform me how can i procecd on?

    thanks,

    NASIR

  45. miyoshi Avatar
    miyoshi

    Nasir, welcome! You can send me a patch (diff) and I’ll include it to the package if I think it is useful for other users too. My contact is here. Thank you.

  46. jTequila Avatar
    jTequila

    Hi miyoshi,
    I have the “same problem that Hariadi”.

    option value=”abc@example.com″ : Factory
    option value=”def@example.com″ : Financial
    option value=”ghi@example.com″ : Support

    would be perfect to send the e-mail to the right sector!

  47. housag Avatar
    housag

    …I do find this plug in well done, easy to use, intuitive and intelligent. Thank you Miyoshi!!!

  48. Dominic Avatar
    Dominic

    Hi
    Thanks for a great plugin! Im trying to add a default value in the captcha input field that will disappear when I click in that field to enter the captcha digits – something like a onFocus=”ClearText();” . Not quite sure how to go about it though or if its possible?

  49. miyoshi Avatar
    miyoshi

    Dominic, it’s possible if you know javascript.

  50. Ferenc Avatar
    Ferenc

    Wow! Truly useful and time-saving. I’m new to WordPress, but this is my favorite plugin yet.

    Thanks!

Leave a comment