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

  • contact form with dropdown menu wordpress
  • making down menu using contact form wordpress
  • contact form 7 dorp down value
  • contact form 7 dropdown mail
  • Contact Form 7 drop list
  • inserting drop down fielsd in contact 7
  • chained drop downs contact form 7
  • contact form 7 ограничение dropdown
  • i want to include list country and district to wordpress
  • contact form 7 select list form choose
  • 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: