Title: HTML5  optgroup in mail section.
Last modified: August 30, 2016

---

# HTML5 optgroup in mail section.

 *  Resolved [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/html5-in-mail-section/)
 * I find HTML5 <optgroup> as a great way to add some extra form functionality which
   is not currently available via CF7 tags. Knowing that one can include any standard
   HTML form elements within CF7 forms.
    Consider the code below
 *     ```
       <select>
       <optgroup label="USA">
           <option>Alabama</option>
           <option>Alaska</option>
           <option>Arizona</option>
       </optgroup>
       <optgroup label="Canada">
           <option>Alberta</option>
           <option>British Columbia</option>
           <option>Manitoba</option>
       </optgroup>
       </select>
       ```
   
 * ​​​
    The output is a nice list of options with none selectable headers. My questions
   is, in what way can I display the selected option in the mail section?
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-6558654)
 * Give a `name` attribute to the `<select>`. You can use the selected option value
   by calling the name in mail.
 *  Thread Starter [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-6558705)
 * The `name` attribute was added to the `<select>` as follows:
 * `<select name="menu-587">`
 * Added the selected option to the mail section as follows
 * `Selection: [menu-587]`
 *  [macbookandrew](https://wordpress.org/support/users/macbookandrew/)
 * (@macbookandrew)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-6558984)
 * Adding the HTML itself in the CF7 editor works, as long as the `<select>` has
   a `name` attribute.
 * Caveat: multiple selections do not currently work with optgroups. See [this post](https://wordpress.org/support/topic/select-menu-dropdown-bug-optgroup-and-multiple-selections)
   for more info.
 *  [chris340301](https://wordpress.org/support/users/chris340301/)
 * (@chris340301)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-8333645)
 * Contact Form 7 is an excellent plugin – thank you Takayuki.
 * One question: when adding an HTML <select> construct into a form, as opposed 
   to using the [select] shortcode, is it possible to make it a required field (
   as in [select*……])?
 *  [macbookandrew](https://wordpress.org/support/users/macbookandrew/)
 * (@macbookandrew)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-8334586)
 * [@chris340301](https://wordpress.org/support/users/chris340301/), you should 
   be able to add the `required` attribute on the `<select>` element. See this post
   for more information: [http://maxdesign.com.au/articles/select-required/](http://maxdesign.com.au/articles/select-required/)
 *  [chris340301](https://wordpress.org/support/users/chris340301/)
 * (@chris340301)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-8334856)
 * Thank you [@macbookandrew](https://wordpress.org/support/users/macbookandrew/)
 * I tried using the ‘required’ attribute but it seems to be ignored and the form
   submits even if the required fields are not completed.
 * I think my best option is to rethink my dropdown lists to confirm to CF7 (that
   is, not using <optgroup>).
 * Thank you again.
 *  [macbookandrew](https://wordpress.org/support/users/macbookandrew/)
 * (@macbookandrew)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-8335081)
 * [@chris340301](https://wordpress.org/support/users/chris340301/) Or write some
   JS to do custom validation on form submission, depending on your specific requirements

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘HTML5 optgroup in mail section.’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 7 replies
 * 4 participants
 * Last reply from: [macbookandrew](https://wordpress.org/support/users/macbookandrew/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/html5-in-mail-section/#post-8335081)
 * Status: resolved