Simulate optgroups in Gravity Forms select (drop down) element

Gravity forms is an amazing plugin. I have extensively worked with it, made addons for it and did a lot of hack style work. It has a great interface. The actions and filters make addon building and customization a breeze.
But obviously, as every rose has its thorns, GF too has a few things that developers (and especially the designers who have to tackle with their ul/li based markup) are bugged of! There’s one thing that I found a little weird, despite being such a big plugin, they have an essential HTML element missing, that is ‘optgroups’. optgroups come in handy when your putting grouped data items in HTML selects. Like ‘cars’ can be an optgroup and the model names could be its options.

To solve this issue, I wrote this little hack using jQuery, which will allow you to simulate an optgroup in an HTML select/drop down when using GF.

Things you should know:

• Gravity forms backend interface – How to add new elements, edit them, set their properties etc.
• jQuery – This is what does the magic!

Let’s assume we want to make optgroups of cars, with the manufacturer as an optgroup and the models as their respective options. To begin with, lets make a simple Gravity Form first. Or you could use an existing one. Add a ‘Drop Down’ element to it. Name it as ‘Vehicles’. Give it a CSS class as ‘custom-opt’ (or anything you want, we’ll be using it later). Now, when we add the choices to this drop down, make sure to check ‘show values’. This will enable values for the options, which otherwise are just labels if this is unchecked. This is essential for our trick to work!

Now, say we want to add a list of BMW cars to our drop down. Here, ‘BMW’ will be an optgroup and its models will be the options/choices. So, lets add ‘BMW’ as a choice ‘Label’ and enter its corresponding ‘Value’ as ‘start’. The label ‘BMW’ will become the label for our optgroup, and the value ‘start’ will indicate the begin of an optgroup. Next on, lets add the model names as we wish, and also add their corresponding values. Values could be just the same as the labels, but with spaces and upper cases replaced with underscores and corresponding lower cases respectively! When we’re done adding the options, lets add an ending for the optgroup. Enter ‘BMW’ again as a choice label, and it’s value as ‘end’. I’m sure you understood that we’re indicating the start and end of the BMW optgroup with values as ‘start’ and ‘end’ respectively. My drop down looks like this in the edit mode:

Now insert the form in a page you desire, and take a look at how it looks in the front end:

Oops, where are the optgroups?

Well relax, we are yet to add the jQuery that does the magic!
The idea is simple. We’ll read the drop down with our jQuery, check whichever choice has a value ‘start’, use it to start a new optgroup with the label as the optgroup label, and look for the next choice with the value as ‘end’ and use it to end the optgroup.

Here’s the jQuery that does it:

[code lang=”js”]
jQuery(document).ready(function(){
//Use the class you used for the drop down here, I used ‘custom-opt’
jQuery(‘.custom-opt select option’).each(function() {
//look for ‘start’, start a new optgroup with the label
if(jQuery(this).val()==’start’) {
var label = jQuery(this).text();
jQuery(this).replaceWith("<optgroup label=’"+label+"’>");
}

//look for ‘end’ end the optgroup here
if(jQuery(this).val()==’end’) {
jQuery(this).replaceWith(‘</optgroup>’);
}
});
});
[/code]

Put this code wherever suitable for your project environment, and now take a look at the form in the front end again.

Hurrah, we have the optgroups! You have to take care to put the start and end values correct, else, results may vary! 😉

I hope this little snippet helped you to achieve a simple but missing element in Gravity Forms! I assume their newer versions have ‘optgroup’ available. Anyways, if you’re using an older version, this should come in handy for you!

Peace 😀