The Problem

The Problem: Too Many Pages, Too Little Time

When you’re managing dozens of landing pages in Eloqua, it’s tempting to lean on HTML5’s built-in required attribute instead of Eloqua’s native validation. It works, it’s fast, and it automatically translates error messages based on the visitor’s browser language. But here’s the catch:

• HTML5 validation messages look inconsistent
• The input doesn’t get the red border like Eloqua fields
• The error message appears as a tooltip, not inline

For programmatic scale and localization, HTML5 is the smart choice—but we need to style it to look like native Eloqua validation.

The Solution

Match Eloqua’s Look with HTML5

You can override default browser styling and inject your own feedback message under the field. Bonus? It works with all standard input types and keeps your code lean and reusable across multiple templates.

How to do it

How to Style HTML5 Required Fields

Clean, consistent, and multilingual-friendly

1. Add required to Your Inputs

Eloqua already supports standard HTML5 attributes. Just make sure each required input looks like this:

The browser will automatically handle the error detection and show messages like “Please fill out this field” or “Enter a valid email address” — in the visitor’s native language.

2. Use CSS to Style Invalid Fields

Add this in your landing page template to match Eloqua’s red border and field behavior:

3. Add Custom Error Message Under the Input

Since HTML5 doesn’t natively show inline messages, use JavaScript to inject a message beneath invalid fields:

Add this class to your CSS:

Sprint Task Breakdown

Sprint Item: Prevent double form submissions on Eloqua landing pages

Subtasks:

• Add required attributes to all form fields
• Add :invalid styling to base CSS
• Add JavaScript error message injection
• QA cross-browser for message translations
• Roll out to shared templates

Level of Effort

Estimated Time

Task	Time Estimate
Update HTML form markup with required fields	30 mins
CSS updates for invalid state	30 mins
JavaScript injection for error messages	1 hour
QA (translations, browsers, mobile)	1–1.5 hours
Total Estimated Effort	3–3.5 hours

Why Use Pl8ypus

One Script. Every Page.

We help clients like you standardize campaign builds at scale. Whether it’s styling required fields, adding form logic, or localizing error messages, Pl8ypus brings clean execution and consistent delivery—without copy/paste fatigue.