We were just doing an update to a registration form for a client, and found that it was actually pretty easy to set up using a popular contact form plugin, Contact Form 7.

A standard select box created in Contact Form 7 lets you choose a single option each time.

selectone

Lets say you have a list of countries and you would like the person filling out the form to be able to select multiple options. You have three options; a checkbox array, the old clunky way of holding down a button and choosing all of your options, or using select2 – a jQuery plugin.

checkboxes multiselect2

Turns out, setting it up in Contact Form 7 is actually fairly easy. First, however, you need to get the underlying code set up.

Select2 has some easy documentation – add a few lines to your header to begin with, the rest is done in the form. Start off with this in your header.php file:

Next, head over to your contact form. If you don’t have a list of countries, GitHub to the rescue! Find the list here.

The list we grabbed is great, it means no typing, we just need to modify it slightly.

First off, we need to add a class, and second, we need to make it a multiple. Right at the very start is where we make the change, so just after country add the following, it should look like this (shortened for simplicity): Then at the very bottom of your form, add one line of code, and publish it. You’re done!  [/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]