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

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

1 Like

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”)

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

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

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

2 Likes

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

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

@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:

This is great! I don’t get the instruction ’ Please change the first line from this:’ though. Which part should I copy to where and how does the entire script look like now?

@UnbounceTechTeam any idea? see the previous reply:

This is great! I don’t get the instruction ’ Please change the first line from this:’ though. Which part should I copy to where and how does the entire script look like now?

Here’s @Hristian’s code as I believe it was meant to be formatted. I also added the script start and end tags so you can easily copy and paste the entire block into a new Javascript. Make sure this script is loaded Before Body End Tag.

<script>
    src="http://code.jquery.com/jquery-2.1.4.min.js";
</script>
<script>
    var dataObj = {};
    var data = document.location.search.substr(1);

    $.each(data.split("&"), function () {
        var el = this.split("="), 
        elName = decodeURIComponent(el[0]),  
        elVal = el.length > 1 ? decodeURIComponent(el[1]) : null;
        if (!(elName in dataObj)) {
            dataObj[elName] = [];
        }
        dataObj[elName].push(elVal);
    });
    (":input").each(function () {
        if (!((this).attr("name") in dataObj)) {
            this.checked = false;
        }
    });
    $.each(dataObj, function (i, val) {
        $("[name='" + i + "']").val(val);
    });
</script>

Thanks @Alex_Le, very much appreciate your help. I’ve tried to include your script but my page is still not loading the prefilled dropdown/radiobutton (see in bold). Here’s the link I’m trying to test on one of my pages:

freeviews.nl/meanail-kit-ruby-confirmation-page/i.html?first_name=FinalTest&last_name=Test&email=elvin@roekoo.nl&phone=0612345678&adres=lutmastr123&postcode=1234AB&woonplaats=Babylon&motivation=motivation_test&experience=experience_test&experience_details=experience_details_test&suitability=suitability_test&purchase_intention=purchase_intention_test&expectations=expectations_test&Agree_to_write=Nee%2C+niet+akkoord&product_variant=Rood&utm_source=mc&utm_medium=email&utm_campaign=20200630_polar&holiday=holiday_test&product1=MEANAIL+Kit+Ruby&product2=MEANAIL+6+kleuren+gel+nagellak

Any suggestions as to what I might be overlooking?

Hey Elvin,
First, I have to apologize since I should’ve tested Hrishan’s script myself before my post. After testing I noticed a few bugs in the reformat, which I’ve adjusted below with additional comments:

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">
        // Loads jQuery into the site. Insert this script tag into the head
    </script>

    <script>
        // Insert this script before body end tag
        $(document).ready(() => {
            var dataObj = {};
            var data = document.location.search.substr(1);

            // For each URI component, split into name and value and insert into dataObj object
            $.each(data.split("&"), function () {
                var el = this.split("="),
                    elName = decodeURIComponent(el[0]),
                    elVal = el.length > 1 ? decodeURIComponent(el[1]) : null;
                if (!(elName in dataObj)) {
                    dataObj[elName] = [];
                }
                dataObj[elName].push(elVal);
            });

            // Uncheck any boxes with names that were not included in the URL
            $(":input").each(function () {
                if (!($(this).attr("name") in dataObj)) {
                    this.checked = false;
                }
            });
            // For every key in dataObj, write its value or check a box if there is a form element with a name that matches
            $.each(dataObj, function (i, val) {
                $("[name='" + i + "']").val(val);
            });
        });
    </script>

This should work as intended to autofill checkboxes and radio buttons. As for your URL, are you trying to check multiple items at once with the Agree_to_write component? If so, the script might not work as intended and you may want to try loading them one at a time (eg. Agree_to_write=Nee&Agree_to_write=niet&Agree_to_write=akkoord)

1 Like

Awesome Alex, it works!!! I appreciate your help so much, thanks!
As for the component, the answer is no; that was actually one option. But you did trigger me to check multiple options for the checkbox questions, see the example below.

Perfect, thanks!

freeviews.nl/product-confirmation-dior?first_name=FinalTest&last_name=Test&email=elvin@roekoo.nl&phone=0612345678&adres=lutmastr123&postcode=1234AB&woonplaats=Babylon&motivation=motivation_test&experience=experience_test&experience_details=experience_details_test&suitability=suitability_test&purchase_intention=purchase_intention_test&current_use=current_use_test&expectations=expectations_test&frequency=2+keer+per+week&requirements=Mascara&requirements=Eyeliner&agree_to_write=Nee%2C+niet+akkoord&agree_to_period=Nee%2C+niet+akkoord&agree_to_return=Nee%2C+niet+akkoord&agree_own_risk=Nee%2C+niet+akkoord&product_variant=Rood&utm_source=mc&utm_medium=email&utm_campaign=20200630_polar&holiday=holiday_test&product1=Diorshow%20Iconic%20Overcurl%20Mascara&product2=5%20Couleurs%20Couture%20Oogschaduwpalette