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>
Looking for some Eloqua help?
Schedule a call 📅
Let's talk Eloqua!
Eloqua Development: Automatically add Query String to all pages links
Background to the problem One of the big problems that marketing has when it comes to using their analytics platforms is that essentially what they have found is that the way they have been setting up their web analytics software means that whenever a contact hits one...
Eloqua Devops: Free Eloqua devops certification course
Eloqua Devops crash course (DISCLAIMER - The examples used in here are satirical; past, present and future employers – I really enjoy my job and it’s more than a job to me but I have to let my sense of humour out once a while) By the end of this post you will be able...
Eloqua Blog: Developing an Eloqua naming convention generator tool
The Eloqua naming convention generator I had a reader ping me a message asking me if I could give them some advice on how to develop and Eloqua naming convention and a tool that they could use time and time again to generate the right name for any Eloqua asset every...
Eloqua Training: 101 Contact upload
1.1 Eloqua Contact Upload Overview There are two parts to a contact upload in Eloqua that that need to be considered: Contact upload Interest list association It is essential that you follow through with each of the procedures listed when importing contacts to the...
