Pre-Fill Form Select Fields with URL Parameters


#1

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…


The Ultimate List of Unbounce Tips, Scripts & Hacks
#2

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!


#3

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?


#4

Hi Phillip, 
Would love to feature this in our ‘Unbounce Tips & Scripts’ series. I’m going to reach out to you directly. 


#5

Superb. Works perfectly. Many thanks.


#6

hi Phillips, it says  getUrlParams is not defined(anonymous function) 


#7

Elysium, I was already using the getUrlParams function on my page, so I didn’t include it (probably should have).

You can find it here:
https://gist.github.com/cgilchrist/826851


#8

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); });