Support » Plugin: Contact Form 7 » How to add optgroup in a drop down menu?

  • Resolved pbul2004



    I am using Version 2.4.3 of contact form 7. I want to be able to create a drop down menu for users to select what area they are from within the UK so the drop down menu will need option groups, like the html below.

    How do you add this into the generated code?

    <select name=”county”>
    <optgroup label=”England”>
    <optgroup label=”Ireland”>


Viewing 8 replies - 1 through 8 (of 8 total)
  • I’m looking for a solution for this too but I couldn’t find one. Any help?

    I would also like to be able to do this. If it is not possible now, it would sure be nice in future upgrade.

    Looks like no one knows lol.

    Sometimes duno why i bother posting for support

    Try reading the plugin’s extensive documentation & FAQ.

    I can’t speak for anyone else, but I don’t post here unless I have read the documentation and FAQ’s. Extensively. If you have found an answer in them that I have missed, please share.

    I also searched without finding a solution, but was able to get it mostly working using jquery. There is something strange in the way jquery is auto closing the tag. I’ll post an update if I get it fully working.

    First I created a drop down list in CF7. For each item that I wanted to be an optgroup item, i gave it a prefix of optgroup-.

    For example my list looks like:

    optgroup-Title 1
    item 1
    item 2
    item 3
    optgroup-Title 2
    item 4
    item 5

    Then using jQuery searched for the prefix, removed it and replaced the tag with <optgroup label=”Title 1″>

    Here is the code:

    $(function() {
    		//Search for optgroup- items
        	var foundin = $('option:contains("optgroup-")');
        		$.each(foundin, function(value) {
        			//remove optgroup prefix
        			var updated = $(this).val().replace("optgroup-","");
        			//replace items with optgroup tag
        			var replaced = $(this).replaceWith('<optgroup label="'+ updated +'">');
        	var foundin2 = $('option:contains("endoptgroup")');
        		$.each(foundin2, function(value) {
        			//replace items with </optgroup> tag
        			var replaced = $(this).replaceWith('</optgroup>');



    After searching the 115 pages in the support forum, looking through the documentation, and reading through the FAQs, I have come up empty handed. So, I decided to write a solution myself. Here’s my contribution.

    In the folder for contact-form-7, navigate to the modules folder. Open up the select.php file, and scroll down to the following line (around line 92):

    $html .= '<option value="' . esc_attr( $value ) . '"' . $selected . '>' . esc_html( $label ) . '</option>';

    My ammendant (overwrite) is as follows:

    if(strpos(esc_attr($value), "!optgroup") > -1) {
    	$exploded_value = explode('-', esc_attr($value));
    	$html .= "<optgroup label=\"" . $exploded_value[1] . "\">";
    } elseif(esc_attr( $value ) == "optgroup!") {
    	$html .= "</optgroup>";
    else {
    	$html .= '<option value="' . esc_attr( $value ) . '"' . $selected . '>' . esc_html( $label ) . '</option>';

    To use this, set up a select menu as follows:
    !optgroup-Group 1 Name

    What the code is:
    1. Looks at the first item, which has a prefix of !optgroup-.
    2. Creates an tag for <optgroup lable=”NAME_GOES_HERE”> where NAME_GOES_HERE is whatever you want it to be, as long as it doesn’t have a “-” hyphen. If you want to edit that, it’s right there in the code.
    3. Continues listing out the other options that you want in this group.
    4. Find optgroup!, and uses that a trigger to close off the current option group.

    You can use this to create as many option groups as you want in the list. Have fun, and let me know if this code presents any bugs.

    Hi Falariem

    Thank you for taking the time to post your code. What will happen when CF7 is updated though, will the code be overwritten?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to add optgroup in a drop down menu?’ is closed to new replies.