How to Add Drop-Down Menu to WordPress Contact Form 7 Forms?

Last time, when I talked about how to add CAPTCHA to Contact Form 7 forms, one of the reader asked me to show how to add a Drop-Down menu.

Before going to any details, let me inform you that HTML <select>, <input type = "checkbox" /> and <input type = "radio" /> are defined as [select] or [select*], [checkbox] or [chechbox*] and [radio] or [radio*] respectively in Contact Form 7 plugin. Any element with an * (asterisk) sign means that the element is mandatory field for the form.

Option Examples Description
id:(id) id:foo id attribute value of the select element.
class:(class) class:bar class attribute value of the select element. To set two or more classes, you can use multiple class: option.
tabindex:(num) tabindex:10 tabindex attribute value of the select element.
default:(num) default:2
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.
multiple   Make drop-down menu multi-selectable.
include_blank   Insert a blank item into the top of options of this drop-down menu.

Suppose you have a list of countries as follows:

  • Australia
  • Brazil
  • Canada
  • Denmark
  • Finland

Do you know how to code this drop-down menu in Contact Form 7?

[select your-country "Australia" "Brazil" "Canada" "Denmark" "Finland"]

First you need to define you element by select. Then add your element name, here I’ve used your-country. After that add your list item each with double quotations. If you want make the drop-down menu as mandatory form element (means user need to choose at least one of the item), please an * (asterisk) beside the select as follows:

[select* your-country "Australia" "Brazil" "Canada" "Denmark" "Finland"]

If you want to make the first element blank, then code as follows:

[select* your-country include_blank "Australia" "Brazil" "Canada" "Denmark" "Finland"]

If you want to assign any CSS class [class-name1],

[select your-country class:class-name1 "Australia" "Brazil" "Canada" "Denmark" "Finland"]

Hope the article was easy and simple. Let me know if you need further assistance. At the end, many many thanks to Takayuki Miyoshi, creator of Contact Form 7.


By | On Monday, October 4th, 2010 | Under How To's, Plugins | 8 Comments ยป


Contact our experts, most of the time we assist our readers free of charge.

Those who found this page were searching for:

  • wordpress add dropdown to comment form
  • how to display contact form 7 in drop down menu
  • contact form 7 selct value option
  • how do i add a drop down box to contact form 7
  • contact form 7 dropdown products
  • drop down lists in forms in word press australian post codes
  • dynamic drop down contact form 7
  • contact form in wordpress with dropdown field
  • how to add check box in contact form in wordpress
  • contact form with dropdown menu wordpress
  • hi, i have 1+1 drops downs with selected values…
    1st… option – “abcd” “hijk” “xyz”

    option “abcd” is connected to a range e.g
    if abcd is selected
    then values in other dropdown list will be
    “1-2” “2-4” “3-6” “6-9”..

    if hijk is selected
    then values in same dropdown list would be
    “11-12” “13-15” “16-17” …

    if xyz is slected
    then values
    “22-24” “26-90” “90-100”
    should appear.
    and how to do this in contact form 7 am very confused.. pls let me know any of you.

    e.g. if conuntry is selected, another drop down feeds that country states
    so like that way..

  • kishore


    I have two select boxes… then how to add two different include_blank text

  • Dan

    i made subject field to be a drop down selection, but can’t get it to actually send the mail with a subject name of that selection.
    to make it more clear: imagine a subject drop down menu with options “one, two three”.
    what i want is to get the email in my inbox that has subject name from that selection, so if somebody chose “three”, subject of the email should be “three”.
    any ideas?

  • Chris


    I don’t know CSS!

    What would I need to add to this code to move the object to the right?

    [select your-country class:class-name1 “Australia” “Brazil” “Canada” “Denmark” “Finland”]


  • This post is really helpful. Thanks for such a nice post.

  • ikhsan

    how if you want to include more than 50 countries?

    • I would create an external JavaScript file to store the data and embed in the form.

  • Canndy girl

    Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!

Previous post:

Next post: