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
default:1_2_3
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?

1
[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:

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

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

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

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

1
[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.

Cheers!

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


DO YOU NEED OUR HELP?

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

Those who found this page were searching for:

  • name with empty value in contact form 7 drop down
  • contact form 7 dropdown with selection
  • adding country dropdown in wordpress
  • adding country dropdown in wordpress
  • wordpress contact form 7 default dropdown
  • wordpres contact from 7 drop down menu default
  • contact form 7 change include_blank
  • change dropdown default contact 7
  • contact form 7 select empty value
  • Contact Form 7 dropdown
  • 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

    Hi,

    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?
    thanks

  • Chris

    Hi

    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”]

    Thanks

  • 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: