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 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.
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.
<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.
<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(); // Prevent the link from navigating form.reset(); // Reset the form to its initial state
});
});
</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.
<!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(); // Prevent the link from navigating form.reset(); // Reset the form to its initial state });
});
</script>
</body>
</html>
Looking for some Eloqua help?
Schedule a call 📅
Let's talk Eloqua!
Designing an off the shelf lead nurture engine for Oracle
A few years back Oracle asked me to design an off the shelf partner lead nurturing engine that they could use to enable their partners to market to their own databases on a shared instance of Eloqua. They essentially wanted me to architect what I had created when I...
Eloqua Blog: Lead Nurturing Markie – Runner Up
I am going to switch tack with some more theoretical posts rather than the technical ones. Before I begin though I feel it is appropriate to establish my credibility though in the field as a marketer. It was 2011 and I returned to work at Axios Systems back up in...
Best time to send email: Eloqua Send Time Optimization
As a marketer you have so many decisions you need to make when planning your Eloqua email campaign, namely: The subject line The call to action Content personalization Send time Email send time is the one decision that is a problem for even the most experienced email...
Eloqua Blog: New Topics
It has come to the time of year where I need to ask you all what you want me to write about next. Please use the poll below to vote for the topics you want covered, you can also add your own topics... so...
