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.
-
If you haven’t done so yet, set up your form with the desired fields.
-
Note down the IDs of your radio and/or checkbox fields.
-
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 /> var el = this.split("="),<br /> elName = decodeURIComponent(el[0]),<br /> elVal = el.length > 1 ? decodeURIComponent(el[1]) : null;<br /> if (!(elName in dataObj)) {<br /> dataObj[elName] = [];<br /> }<br /> dataObj[elName].push(elVal);<br /> });<br /> (":input").each(function () {
if (!((this).attr("name") in dataObj)) {<br /> this.checked = false;<br /> }<br /> });<br /> .each(dataObj, function (i, val) {
$("[name=’" + i + “’]”).val(val);
});
-
Now you are ready to use parameters in your URL and the form will load with preselected values.
-
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