While using Eloqua you may have a need to update a hidden form field with data that is in the the URL parameter so here is a guide on how to do that.
First off, lets explain the URL parameter.
Your user clicks on a link to your form at www.martechhero.com?LeadSource=Email
Notice after the .com there is ?LeadSource=Email – this is what is called a query string parameter. It won’t affect the page at www.martechhero.com but you can use this parameter once the visitor arrives.
The part after the “?” and before the “=” sign is the key (in this case LeadSource) and the value after the “=” is the value (in this case it is Email). If you have more than one key then each subsequent key is preceded by a ‘&”. For example www.martechhero.com?LeadSource=Email&Region=US
Note that whether you go to www.martechhero.com or www.martechhero.com?LeadSource=Email you will arrive at the same page. The part after the ‘?” is ignored but we can use it upon a page visit if we so choose.
How to Use This
In your HTML within the Head tags we are going to add a reference to JQuery which is a simple Javascript library. We will use the Google hosted version since that will always be accessible and it saves us from hosting a file and keeping it up to date. So in this case the JQuery code will look like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head> Now we will add a GetParameters function to retrieve the value variable from our URL.
JQuery call + Get URL function:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null) {
return null;
}
return decodeURI(results[1]) || 0;
}
</script>
</head> Now on our Eloqua form, we have a hidden form field with an ID of LeadSourceFormField – like this:
<input name=leadSource id="LeadSourceFormField"> This field will capture the value we supply & we can use this id to target the field with JQuery.
Lastly we’re going to add a short script just before the closing tag to run once the page loads, It will look into the URL for our query string parameter & grab the value to put it in the form field:
Call to get Parameter & posting it into the form field
<script>
$( document ).ready(function() {
$('#LeadSource').val($.urlParam('LeadSource'));
;
});
</script>
</body> This above code will run on the page load and it will scan through the URL for the parameter with the id=LeadSource and get the associated value and input it into the form field with the ID LeadSourceFormField.
When the user submits the form, the hidden value will be submitted for you to track on your Eloqua form.
Please let me know if you have any comments or questions.
