Why hide standard Eloqua fields when data is already known?

Showing prepopulated fields makes forms longer and increases friction. Hiding fields like first name and last name when Eloqua already has the values can improve form completion rates while keeping normal Eloqua processing intact.

How does Eloqua know to prepopulate form fields?

When a landing page loads and the visitor has an Eloqua tracking cookie, Eloqua can identify the contact and prepopulate mapped form fields with stored values.

How do I hide an Eloqua field and its label together?

Wrap the label and input inside a container element such as a div. On page load, check the input value. If it is not empty, set the container to display:none so both the label and field are hidden.

Which fields are used in the example?

The example uses three standard fields: Email address, First name, and Last name. First name and last name blocks are hidden when values are prepopulated.

Eloqua landing page form with progressive profiling and hidden fields.

Eloqua Blog · Progressive Profiling

Eloqua Progressive Profiling 3: Hiding Standard Fields When You Have the Data

When an Eloqua landing page loads and the visitor already has an Eloqua cookie, their data is prepopulated. In this part of the series, I show how to hide standard Eloqua form fields like first name and last name when that data already exists, reducing friction and increasing submissions.

📅 First published: 23 Aug 2023

⏱ Complexity: Intermediate • 👥 Audience: Eloqua Admins, Marketing Ops • 🎯 Focus: Progressive profiling, form optimisation

Eloqua form showing hidden standard fields after prepopulation.

Quote

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.

Greg Staunton

Context: This assumes the visitor has an Eloqua cookie and Eloqua prepopulates known values when the landing page loads.

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

You need to have a way to hide those Eloqua form fields if you already have that information.

We are going to wrap each standard field in its own block, then run a simple JavaScript check on page load. If the field value is prepopulated, we hide the entire block so the label and field disappear together.

Make sure you add your normal Eloqua form processing scripts.

Step 1: Build the HTML structure for your Eloqua form

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.

Code - dark mode

HTML

<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 in the head to hide prepopulated blocks

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.

Code - dark mode

HEAD

<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: Execute handleFormLoad when the page loads

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.

Code - dark mode

BODY

<head>
<body onload="handleFormLoad()">
<!-- Your form and other HTML content here -->
</body>

Step 4: Test it, then use the full working example

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.

Code - dark mode

FULL EXAMPLE

<!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>

What you have now

You now have a simple pattern you can apply to standard Eloqua fields. If Eloqua prepopulates a value because the visitor is known, the field block disappears automatically.

Shorter form
Less friction
More submissions

That is progressive profiling done properly.

Need help implementing progressive profiling properly in Eloqua?

I work with teams who want shorter forms, higher conversion rates, and clean Eloqua data. If you are struggling with progressive profiling, blind submits, or form governance, I am happy to review what you have and show you how to tighten it up.