Unbounce is a great landing page creation tool but in some areas it lacks those “extra” little features desperately needed to make the end user experience comfortable and as we know, comfort leads to conversions!
For example, I wanted to create a PPC campaign so that when the user clicks on an ad, I needed certain drop downs on the landing page to be pre-populated with values passed from the url string so the user does not have to select them manually.
I checked A LOT of posts on the unbounce forum (as recommended by Unbounce technical support) , none of them really worked that well and in most cases were overly complicated, so in the end after some google searches I found a simple, working solution.
Here is the code below I used in the end to populate the drop down menus with url parameters from the query.
I tested this on 19th of October 2019 in Chrome 77.0.3865.120 on Mac and works great.
ENJOY!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// Relinquish control of `$` to previous library
jQuery.noConflict();
// Wrap jQuery code in IIFE
(function($) {
$(document).ready(function() {
// Construct URL object using current browser URL
var url = new URL(document.location);
// Get query parameters object
var params = url.searchParams;
// Get value of location
var location = params.get("location");
var type = params.get("type");
// Set it as the dropdown value
$("#location").val(location);
$("#type").val(type);
});
})(jQuery);
</script>
HOW TO IMPLEMENT?
First, make sure the names of your fields match the names of the fields specified in your script. In the case below, the field is called location. You could use a different name but make sure the names in the url, script and form are the same.
Second, don’t forget to put your code in the <head> part of the landing page so that it loads before the fields on the landing page.
JOB DONE!