[HOW-TO] Pre-Fill Radio & Checkbox Fields with URL parameters


#1

Unbounce supports natively pre-filling text fields and Phillip Barnes wrote a script for dropdown fields

My team and I, decided to fill the missing gap and help you pre-fill radio and/or checkbox fields with URL parameters. In order to do it, we had to write a small script to help us achieve it. 

This is a quick tutorial on how to pre-fill radio and/or checkbox fields with URL parameters.

  1. If you haven’t done so yet, set up your form with the desired fields.

  2. Note down the IDs of your radio and/or checkbox fields.

  3. Insert the following JS code on your page with placement set to: Before Body End Tag 

    http://code.jquery.com/jquery-2.1.4.min.js">


    var dataObj = {};
    var data = document.location.search.substr(1);

        .each(data.split("&"), function () {<br />&nbsp; &nbsp; &nbsp; &nbsp; var el = this.split("="),<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elName = decodeURIComponent(el[0]),<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elVal = el.length > 1 ? decodeURIComponent(el[1]) : null;<br />&nbsp; &nbsp; &nbsp; &nbsp; if (!(elName in dataObj)) {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataObj[elName] = [];<br />&nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; &nbsp; &nbsp; dataObj[elName].push(elVal);<br />&nbsp; &nbsp; });<br />&nbsp; &nbsp; (":input").each(function () {
            if (!((this).attr("name") in dataObj)) {<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.checked = false;<br />&nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; });<br />&nbsp; &nbsp; .each(dataObj, function (i, val) {
            $("[name=’" + i + “’]”).val(val);
        });
  4. Now you are ready to use parameters in your URL and the form will load with preselected values. 

  5. In order to select/check the desired value, your URL parameter should have the following structure: /?radio_id=desired_value

  • radio_id” - It’s the ID of your field
  • desired_value” - It’s the ID of the value you want pre-selected/checked

5.1. Of course, you can use more than one parameter by adding “&” between the different parameters such as:

Example: /?first_name=Hristian&radio_id=value&checkbox_id=value

5.2. In cases with checkbox fields you can pre-select more than one value for the same field. Simply string the desired values one after the other, similar to 5.1: 

Example: /?checkbox_id=value_1&checkbox_id=value_2

Here is a quick example of using a few of these fields and pre-selecting certain values. 

http://unbouncepages.com/radio_buttons_test/?testing_the_radio_buttons=Two&testing_check_boxes_i...

The script has been tested on desktop and mobile phones but as always make sure you run your own QA before going live with your landing page.

Best,
Hristian


Refreshing Form To Fetch URL Parameters
#2

A bit of clarification on point 4 since I can’t edit the above post:

  • radio_id” - It’s the name of the field(s) that you noted down in Step 2
  • desired_value” - It’s the name of the value you want pre-selected/checked

Also, the formatting of the script broke somehow when I was copy/pasting it.

Please change the first line from this:

" rel="nofollow" target="\_blank" title="Link http//codejquerycom/jquery-214minjs223E3C/script3E3Cscript3E"\>http://code.jquery.com/jquery-2.1.4.min.js"\>[

](http://code.jquery.com/jquery-2.1.4.min.js"></script><script> “Link http//codejquerycom/jquery-214minjs223E3C/script3E3Cscript3E”)


#3

Hristian - 

This is great. Hopefully, Justin will add it to his latest post. Can you point out a use case for pre-filled radio buttons? I have used pre-filled drop downs before but I rarely use radio buttons (check boxes even less frequently) but maybe I am overlooking a valuable resource.

Joe


#4

Hey Joe,

I wrote the how-to based on a recent question here in the community but just a couple use cases off the top of my head:

  • Registering a known lead for a new webinar. KissMetrics does something similar. The email campaign you send to your list would have a “tagged” URL which allows them to register for a new webinar in 2 clicks instead of 5,10, etc. 

You already have the information, so no reason to ask for it again. Unless, your lead needs to change something. 

  • Adding a pre-checked checkbox along the lines of “It’s OK to contact me about X and Y” (You have to be careful with this one since US, Canada and EU countries all have different rules for implied consent, etc.)

Dropdowns can be a serious friction point on mobile devices and should be used as a last resort. 

So it might be worthwhile looking into alternative form fields. 

Best,
Hristian


#5

This has come in handy so many times!!! Love it @Hristian :raised_hands:


#6

Hey @digibomb I’m happy that the script came in handy.

Any interesting implementations you can share with the community (just the general idea)?


#7

@Hristian Best use I have had is when visitors are coming from email campaigns and we want specific boxes checked based on campaign. Specifically “sign me up for …” or “Send me incentives and promos …” etc. Also great for coupon related stuff and we want certain product boxes checked initially.

I have also used this in multi-step surveys when boxes are checked based on option selected in previous steps.

Those are just a few off the top of my head :slight_smile: