Pre-Fill Form Select Fields with URL Parameters

9 years ago
23 December 2014
8 replies
134 views

Phillip
99 replies

The Pre-Filling a Form with URL Parameters feature works great for text fields. I’d like this feature expanded to select fields, such as dropdown fields.

It’s fairly simple to do with jQuery. I modified the form’s javascript to make it work. I haven’t tested it extensively since I don’t have direct access to the Unbounce code base, but it should work fine. Please have one of your developers look into it.

Check it out: https://gist.github.com/philbar/8ffe4…

8 replies

Userlevel 2

Mark_Wainwright
Staff Developer @ Unbounce
91 replies
9 years ago
23 December 2014

Hi Phillip,

Thanks for the suggestion, and for showing us how that might work with a script!

I’ll pass that along to our developers so they can take a look.

Happy holidays!

Has there been any progress on this?

I have a list of study courses in a drop-down and I’d like to pass course_code as a query string parameter then have the course name corresponding to the passed course code pre-selected in the Course Interested In drop-down.

if course_code == ABC123 {
course_interested_in = “The ABC 123 Course”
}

if course_code == ABC234 {
course_interested_in = “The ABC 234 Course”
}

Is there any way I can implement this using on-page JavaScript?

i.e. are there script hooks which allow me to specify for the course name which matches the course code?

This ended up being a little more complicated than I first thought. Setting the value using jQuery, not only requires a match to a predefined list of values, but the match is case sensitive.

Here is the javascript I ended up using to autofill a “campus” field. The first part is a function to convert strings to proper case. The second part, the jQuery function, sets the value.

String.prototype.toProperCase = function () {



return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); };

 jQuery(function() {

 var campus = getUrlParams()['campus'];

 campus = campus.toProperCase()

 console.log(campus);

 jQuery("#campus").val(campus); });