• Hi there. I’m a big fan of Contact Form 7 and I always come to a point where I need to make a few extended customization to my forms. This time, I’m quite frustrated trying to add different classes to a select element <option> tag with no avail.

    For e.g:

    First, I need to create a select element with id=”cd-dropdown” and class=”cd-select”, until here, this can be easily achieved with the CF7 shortcode generator as bellow.

    [select* select-profissao id:cd-dropdown class:cd-select "Professional" "Nurse" "Lawyer"]

    Contact Form 7 aforementioned shortcode generates the html select element to something like this:

    <select id="cd-dropdown" class="cd-select">
        <option value="-1" selected>Professional</option>
        <option value="1">Nurse</option>
        <option value="2">Lawyer</option>
    </select>

    However, I’d like to be able to add a different class to each of the <option> tag, as the example below:

    <select id="cd-dropdown" class="cd-select">
     <option value="" selected>Professional</option>
     <option value="" class="fa-nurse">Nurse</option>
     <option value="" class="fa-lawyer">Lawyer</option>
    </select>

    Is it even possible to achieve that by using the CF7 shortcode generator? Are there any workarounds in order to achieve that maybe by making a few changes to plugin’s core files?

    Thanks in advance. I’d really appreciate any help regarding this issue.

    https://wordpress.org/plugins/contact-form-7/

  • The topic ‘How add a class to select element tag in Contact Form 7?’ is closed to new replies.