Progressive Profiling with Forms in Eloqua

Eloqua is a powerful tool to collect your customers’ data and automate your marketing activities. One of the most used features in Eloqua is the collection of customer data. This can be done through Eloqua Landing Pages or through Forms that reside on your own website.

Eloqua Forms

Eloqua Forms and Landing Pages

From an SEO perspective it is better to keep the content on your own website and embed the forms that you create in Eloqua. With simple forms this is very easy to do. However if you want to collect your customers’ data through progressive profiling it becomes more complicated to do this via forms since you need to implement multiple forms that add data to your customer’s profile. Instead of scaring them away with a long form that requires the customers to enter all their information on a single page you first ask them just for their email address. In a second step you might ask for their name and phone number and on another form you might want to find out the company they work for and what in particular they are interested in.

Implementing this multi-form progressive profiling approach with Eloqua Landing Pages is very easy to do but doing it with forms on your own website is more complicated since every form needs to include the unique identifier to update the profile with new information. Below I am explaining how this progressive profiling can easily be done with forms and with the help of a little Javascript. To keep it simple I will describe the approach with only two forms. On the first form we are asking the customer only for their email address, which is the unique key of the profile within Eloqua.

Form 1 in Eloqua

Eloqua form 1

On the second form we are asking the customer for First Name, Last Name, Phone Number and Company Name.

Form 2 in Eloqua

Eloqua Form 2

When submitting the second form we need to pass the email address that was collected in the first form to Eloqua again so that Eloqua updates the record versus creating a new record. This can be done through a hidden form field that gets prepopulated. If the first form would call the second form directly then that would be easy to do. However Eloqua passes all the information of a form first to an Eloqua server and then redirects the user to the page with the second form.

The diagram below shows the interaction between the browser, your server that hosts the forms and Eloqua’s server.

http requests eloqua forms

Eloqua http requests and responses

In order for this to work the following things need to be implemented.

1. Add a hidden custom field to form1 called Return Url. Enter the URL of the page that includes the second form.

hidden field eloqua

Add hidden field for Return Url

2. Under Processing Steps in Eloqua add as last step ‘Redirect to Webpage’. In settings choose ‘Send to an External Url’.

Return Url Eloqua

Eloqua Return Url

3. Choose ‘Use the value of a form field to select the Url’ and select the field ‘Return Url’ that you created in step 1.

Eloqua send to external url

Send to External Url Eloqua

4. Embed the form html from Eloqua in your html page of form1.html.

5. Add the following javascript to the action-value of the form1:

<form method="post" name="form-name-1458177860960-635944369960748268"­ action="" onsubmit="document.forms['leAdwordsTranspor-1458177860960-635944369960748268'].elements['retUrl'].value=document.forms['leAdwordsTranspor-1458177860960-635944369960748268'].elements['retUrl'].value+'?field4='+encodeURI(document.forms['leAdwordsTranspor-1458177860960-635944369960748268'].elements['emailAddress'].value);setTimeout(function(){if(document.querySelector){var s=document.querySelector('form#form607 input[type=submit]');if(s){s.disabled=true;}}},100);return true;" id="form607" class="elq-form" >

This piece of code will add the email address to the Return Url before it is send to Eloqua. So when Eloqua redirects the browser back to your second form it will have the unique key appended to the URL:

6. On the second form you need to add a hidden field to store the email address so that Eloqua can update the record versus creating a new one.

Eloqua hidden field

Add hidden email field to Eloqua

7. Once you embedded the Eloqua form in your form html you need to add the following piece of code into the header of your html:

<script type="text/javascript">
function setEmail()
        var hashParams ='&'); // substr(1) to remove the `?`
        for(var i = 0; i < hashParams.length; i++){
         var p = hashParams[i].split('=');
         document.getElementById(p[0]).value = decodeURIComponent(p[1]);
  }   window.onload=setEmail;

This piece of Java is a slightly modified version of the code listed here:

It will prefill your hidden email form field with the email address that is passed in via the Return Url of the first form. You have to make sure that the form id matches exactly the form id in your html code:


has to match this:

<input id="field4" name="hiddenField" type="emailfield" value=""<eloqua" />

That’s it. If you have any questions about this article feel free to reach out to me.

Roland Oberdorfer is a Managing Director and Co-Founder at SiteOlytics Inc. Prior to his current role Roland was the CTO of HP’s consumer direct organization and the General Manager for Web and eCommerce at NIVIDIA. You can find him on Google+ and on Facebook.



More from our blog

See all posts