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>
Eloqua Progressive Profiling 1: What is it?
Most clients I have ask me how they can quickly start doing Eloqua progressive profiling on their Eloqua landing pages. I hear you ask why? Easy, the Eloqua progressive profiling module is pony (pony is a slang UK English word for rubbish - fun fact for your day). ...
HMH: Eloqua campaign reporting on SFDC Dashboards
Client Challenge HMH approached Automate2Revenue who I was contracted to with the following objectives: Deliver SFDC CMO dashboards in Early 2021 that reflect current lead management state Agree on an approach for lead and campaign management using industry best...
Eloqua Tool: Eloqua Blind Form Submit Tool
Using the tutorial I have created here: https://greg-staunton.com/eloqua-blind-form-submit add in the different things you need to create your blind form submit in the tool below. Simple!
Eloqua Training 2.0: Eloqua Blind Form Submit
I quite often get asked during implementations for functionality over and above clickthroughs on emails or request that button on their website do things that they wish to use form processing functionality for. Well, the geniuses at Oracle came up with blind form...
