Eloqua Blog · Progressive Profiling

Eloqua Progressive Profiling 2: Resetting the form if the email address is wrong

I like to break form questions down into into four parts.

📅 First published: Aug 23, 2023

⏱ Reading time: 5 minutes • 👤 Author: Greg Staunton • 🎯 Focus: Progressive profiling, form reset

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 first piece of the tutorial you are reading I strongly suggest you start from the beginning). Let’s say I forward an Eloqua email sent to you that is linked to an Eloqua landing page and form. You then click through. My contact ID is set in the Eloqua redirect through the link to the Eloqua landing page. This means the Eloqua landing page and Eloqua form is going to be populated with my information, not yours – not cool.

You need to have a function that will drop my details and reload the page with a new form for you. Buckle up buckeroos, in this second part of the tutorial I will teach you how to do this.

Greg Staunton

So… How do you get these questions sent over to the CRM. Eloqua CDOs you say? Close but no cigar. You can set the responses given on an Eloqua CDO but how are you going to get them in the CRM so sales can make use of them?

Step 1: Modify your HTML form to include a link or button next to the email address field.

Code - dark mode

HTML

<form id="myForm">
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email">
  <a href="#" id="resetLink">Reset</a> <!-- Add the reset link here -->

  <br>

  <label for="firstName">First Name:</label>
  <input type="text" id="firstName" name="firstName">

  <br>

  <label for="lastName">Last Name:</label>
  <input type="text" id="lastName" name="lastName">

  <br>

  <input type="submit" value="Submit">
</form>

Step 2: Add a script to reset the form when the reset link is clicked.

Code - dark mode

SCRIPT

<form id="myForm">
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("myForm");
    const resetLink = document.getElementById("resetLink");

    resetLink.addEventListener("click", function(event) {
      event.preventDefault();
      form.reset();
    });
  });
</script>

In this script, the event.preventDefault() method is used to prevent the default behavior of the link (navigating to a new page). Instead, the form.reset() method is called to reset the form.

Step 3: Save the HTML file and open it in a web browser. Enter an incorrect email address, and you’ll see the “Reset” link next to it. Clicking the link will reset the form, clearing the entered values.

You can customize the styling and appearance of the reset link to match your design. Additionally, you might want to enhance the user experience by providing feedback or confirmation after the form is reset.

This code includes all the necessary to reset the form if the email address is incorrect.

Code - dark mode

FULL EXAMPLE

<!DOCTYPE html>
<html>
<head>
  <title>Reset Form with Incorrect Email</title>
</head>
<body>
  <form id="myForm">
    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email">
    <a href="#" id="resetLink">Reset</a> <!-- Reset link next to email field -->

    <br>

    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName">

    <br>

    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName">

    <br>

    <input type="submit" value="Submit">
  </form>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const form = document.getElementById("myForm");
      const resetLink = document.getElementById("resetLink");

      resetLink.addEventListener("click", function(event) {
        event.preventDefault();
        form.reset();
      });
    });
  </script>
</body>
</html>

Eloqua Progressive Profiling 1: What is it?

Start with the recovered introduction to the progressive profiling series.

Read article

Next existing series article

Eloqua Progressive Profiling 3: Hiding standard fields when you have the data

A practical follow-on showing how to hide known standard fields after Eloqua prepopulation.

Read article

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.