Adding a “Province” Dropdown to an Address field with Formidable Forms

Working with a client on a site which only targeted the Canadian market, I was asked to add province drop-downs to the address field in a form we were building. Canadian addresses aren’t typically supported in as friendly a fashion as American addresses in form tools. American addresses often have a state drop-down by default, whereas all international addresses tend to just give you the option of direct entry. Well, that’s no fun. As I said, this client in particular is serving an exclusively Canadian clientele, so I needed to completely replace the form’s “State” field with a provincial drop-down.

To do this you’ll need to know your Form’s address field’s ID key. In my situation here, the address field’s ID key is jnwvw (but you could make it friendlier if you chose), so my code for changing it’s “state” field to a provincial drop-down is as follows:

jQuery(document).ready( function() {
	if (jQuery("#field_jnwvw_state").length) {
	jQuery("#field_jnwvw_state").replaceWith('<select id="field_jnwvw_state" type="text" name="item_meta[32][state]" data-sectionid="47" data-invmsg="Current Address is invalid" autocomplete="address-level1"><option value="" disabled selected>Province</option><option value="Alberta">AB</option><option value="British Columbia">BC</option><option value="Manitoba">MB</option><option value="New Brunswick">NB</option><option value="NFLD">NFLD</option><option value="Nova Scotia">NS</option><option value="NT">NT</option><option value="Nunavut">NU</option><option value="Ontario">ON</option><option value="PEI">PEI</option><option value="Quebec">QC</option><option value="Saskatchewan">SK</option><option value="Yukon">YT</option></select>');
	}
}

To break down *how* this works a bit, the opening line is the “document.ready” portion, which is explained in the jQuery learning centre.

The next line checks to see if the state field exists; in my particular use-case, this same form is on *many* different pages, so I have this in part of my child theme’s code. If you’re only using this code on the specific page that the form is loaded on, this may not be necessary for you (but it’s not a bad practice overall). I just don’t want to bother running the next part of the code if the form doesn’t exist, and this does a great job of checking for that!

The last (and largest) major section of code finds the existing “state” field – which is just a textbox – and replaces it with a <select> field and all the necessary <option> fields within it. It sets the values appropriately, and – when the form submits – it grabs the information appropriately from the selected fields. Pretty nifty, huh?