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>
If you would like me to email you this content so you can use the code or content and images for a presentation click here.
Eloqua Progressive Profiling 2: Resetting the form if the email address is wrong
Eloqua Technical: How to capture exactly which campaign, medium, etc, a lead used to come on to your website even though they navigated around several pages before conversion.
I got asked by a subscriber how they could track UTM parameters on the first touch to their website from all mediums, campaigns, etc because contacts where coming to their website, navigating around and then submitting forms. After I helped them they no longer had a...
Eloqua Blog: The benefits of Integrating Oracle Unity with Eloqua
I am getting more and more enquiries about Oracle Unity and what benefits integrating it with Eloqua will bring. To help you better understand this new world I have put together this article. If you want to know more about it or have a project to integrate the two...
Eloqua Guide: How to use the Eloqua Sandbox
In the ever-evolving landscape of digital marketing, it's crucial to have a safe and controlled environment to test new strategies, campaigns, and configurations before implementing them in your live Eloqua instance. Eloqua offers a sandbox environment for this...
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...
