Eloqua Progressive Profiling 3: Hiding standard fields when you have the data
When an Eloqua landing loads, provided the user has the Eloqua cookie set, their information is automatically populated which gives you something to play with. The third part part is what I call standard Eloqua form fields (If this is the first piece of the tutorial you are reading I strongly recommend you start from the beginning). Standard Eloqua form fields on an Eloqua form are things like first name, last name, etc. These are fields that are personal to the person. There is no need to show someone their first name so they can reconfirm it. Even if it is pre-populated when the form loads it will still make your form look really long and less people will fill it out. Less form submission = less leads which is not cool.
You need to have a way to hide those Eloqua form fields if you already have that information. Buckle up buckeroos, in this second Eloqua progressive profiling tutorial I will teach you how to do this.
Scenario
In this scenario you have three standard Eloqua fields:
- Email address
- First name
- Last Name
What we want to do is stop the Eloqua form label, i.e the text asking the person and/or the Eloqua form field showing if we have that data stored against the Eloqua contact record.
Solution
Step 1: Start by creating the HTML structure for your Eloqua form. Include input fields for email address, first name, and last name. Also, create labels for each Eloqua field. (Make sure you add your normal Eloqua form processing scripts)
<form>
<label for=”email”>Email Address:</label>
<input type=”email” id=”email” name=”email”>
<br>
<div id=”firstNameBlock”>
<label for=”firstName”>First Name:</label>
<input type=”text” id=”firstName” name=”firstName” value=””><br>
</div>
<div id=”lastNameBlock”>
<label for=”lastName”>Last Name:</label>
<input type=”text” id=”lastName” name=”lastName” value=””><br>
</div>
<input type=”submit” value=”Submit”>
</form>
Step 2: Add a <script> element within the <head> section of your HTML to include your JavaScript code. This code will handle hiding the entire blocks containing the label and Eloqua form field.
<head>
<title>Hide Prepopulated Form Fields</title>
<script>
// Function to handle form load function handleFormLoad() {
var firstNameValue = document.getElementById(“firstName”).value.trim();
var lastNameValue = document.getElementById(“lastName”).value.trim();
if (firstNameValue !== “”) {
document.getElementById(“firstNameBlock”).style.display = “none”;
}
if (lastNameValue !== “”) {
document.getElementById(“lastNameBlock”).style.display = “none”;
}
}
</script>
</head>
Step 3: To execute the handleFormLoad function when the form loads, add the onload attribute to the <body> element. This attribute will trigger the function when the page is loaded.
<head>
<body onload=”handleFormLoad()”>
<!– Your form and other HTML content here –>
</body>
Step 4: Save your HTML file and open it in a web browser. You should see that the entire blocks containing the label and Eloqua form field are hidden if their values are prepopulated.
This code includes all the necessary input fields and the JavaScript function to hide the label and Eloqua field if you have the contact’s data for first name and/or second name in your Eloqua database.
<!DOCTYPE html>
<html>
<head>
<title>Hide Prepopulated Form Fields</title>
<script>
// Function to handle form load function handleFormLoad() {
var firstNameValue = document.getElementById(“firstName”).value.trim();
var lastNameValue = document.getElementById(“lastName”).value.trim();
if (firstNameValue !== “”) {
document.getElementById(“firstNameBlock”).style.display = “none”;
}
if (lastNameValue !== “”) {
document.getElementById(“lastNameBlock”).style.display = “none”;
}
}
</script>
</head>
<body onload=”handleFormLoad()”>
<form>
<label for=”email”>Email Address:</label>
<input type=”email” id=”email” name=”email”>
<br>
<div id=”firstNameBlock”>
<label for=”firstName”>First Name:</label>
<input type=”text” id=”firstName” name=”firstName” value=””><br>
</div>
<div id=”lastNameBlock”>
<label for=”lastName”>Last Name:</label>
<input type=”text” id=”lastName” name=”lastName” value=””><br>
</div>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
If you would like me to email you this content so you can use the code or content and images for a presentation click here.
Eloqua Progressive Profiling 3: Hiding standard fields when you have the data
Eloqua Technical: How to capture exactly which campaign, medium, etc, a lead used to come on to your website even though they navigated around several pages before conversion.
I got asked by a subscriber how they could track UTM parameters on the first touch to their website from all mediums, campaigns, etc because contacts where coming to their website, navigating around and then submitting forms. After I helped them they no longer had a...
Eloqua Blog: The benefits of Integrating Oracle Unity with Eloqua
I am getting more and more enquiries about Oracle Unity and what benefits integrating it with Eloqua will bring. To help you better understand this new world I have put together this article. If you want to know more about it or have a project to integrate the two...
Eloqua Guide: How to use the Eloqua Sandbox
In the ever-evolving landscape of digital marketing, it's crucial to have a safe and controlled environment to test new strategies, campaigns, and configurations before implementing them in your live Eloqua instance. Eloqua offers a sandbox environment for this...
Eloqua Progressive Profiling 2: Resetting the form if the email address is wrong
I like to break form questions down into into four parts. When an Eloqua landing loads, provided the user has the Eloqua cookie set, their information is automatically populated which gives you something to play with. The first part is email address (if this is the...
