Newsletter Signup Form

Inline email capture with validation and success state.

newsletter form email validation | Claude 4.6 Opus

Prompt

# Role
You are a Senior Email Developer and HTML Specialist with expertise in conversion-optimized signup forms and accessible interactive components.

# Objective
Design an inline newsletter signup form with real-time email validation, a polished success state, and a visually refined focus effect — optimized for embedding in landing pages and footers.

# Instructions
1. Build a single-line form layout:
   - Email text input and submit button side by side on one row
   - Input takes majority width; button on the right
   - Rounded container with subtle border
2. Implement the email input:
   - Placeholder text: "Enter your email"
   - `type="email"` for native validation baseline
   - Gradient border effect on focus (animated or static)
   - Proper `<label>` element (visually hidden if needed, but present for screen readers)
3. Add client-side validation:
   - Validate email format on blur and on submit
   - Show error message below the input (red text, subtle fade-in)
   - Disable submit button while input is empty or invalid
4. Implement the success state:
   - On successful submission, replace the form with:
     - Animated checkmark icon (CSS or SVG)
     - Success message: "You're subscribed!"
   - Smooth transition between form and success state (300ms ease-out)
5. Style with dark mode aesthetics:
   - Dark input background, light placeholder text
   - Accent-colored submit button with hover brightness
   - Gradient border visible on focus state

# Constraints
- Semantic HTML with proper `<form>`, `<label>`, `<input>`, and ARIA attributes
- Full keyboard navigation: Tab to input, Enter to submit
- `aria-live="polite"` on the error/success message container for screen readers
- No external dependencies — vanilla HTML, CSS, and JavaScript
- Form should not actually submit — simulate with JavaScript state change
- Max-width: 500px, centered

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include both error and success states in the implementation
- Well-commented code with transitions clearly documented

Notes

Prompt

Role

You are a Senior Email Developer and HTML Specialist with expertise in conversion-optimized signup forms and accessible interactive components.

Objective

Design an inline newsletter signup form with real-time email validation, a polished success state, and a visually refined focus effect — optimized for embedding in landing pages and footers.

Instructions

Build a single-line form layout:
- Email text input and submit button side by side on one row
- Input takes majority width; button on the right
- Rounded container with subtle border
Implement the email input:
- Placeholder text: “Enter your email”
- type="email" for native validation baseline
- Gradient border effect on focus (animated or static)
- Proper <label> element (visually hidden if needed, but present for screen readers)
Add client-side validation:
- Validate email format on blur and on submit
- Show error message below the input (red text, subtle fade-in)
- Disable submit button while input is empty or invalid
Implement the success state:
- On successful submission, replace the form with:
  - Animated checkmark icon (CSS or SVG)
  - Success message: “You’re subscribed!”
- Smooth transition between form and success state (300ms ease-out)
Style with dark mode aesthetics:
- Dark input background, light placeholder text
- Accent-colored submit button with hover brightness
- Gradient border visible on focus state

Constraints

Semantic HTML with proper <form>, <label>, <input>, and ARIA attributes
Full keyboard navigation: Tab to input, Enter to submit
aria-live="polite" on the error/success message container for screen readers
No external dependencies — vanilla HTML, CSS, and JavaScript
Form should not actually submit — simulate with JavaScript state change
Max-width: 500px, centered

Output Format

Single HTML file with embedded <style> and <script> blocks
Include both error and success states in the implementation
Well-commented code with transitions clearly documented

Notes

Use HTML5 type="email" for native validation as a baseline enhancement.
Transition between form and success states with 300ms ease-out for a smooth feel.
The gradient border on focus is a subtle but impactful polish detail.

Related Prompts

Transactional Email Template

Responsive HTML email for order confirmations.

# Role You are a Senior Email Developer and HTML Specialist with deep expertise in cross-client email rendering and responsive email design. # Objective Build a production-ready transactional email template for order confirmations that renders consistently across all major email clients (Gmail, Outlook, Apple Mail, Yahoo). # Instructions 1. Create a table-based layout (600px max-width, centered): - Wrapper table with `width="100%"` and inner table with `max-width: 600px` - Use `align="center"` for centering — not CSS margin 2. Build the header section: - Logo placeholder image (centered, max-height: 40px) - Background color bar with brand accent 3. Build the body section: - Greeting line: "Hi {{customer_name}}, your order is confirmed!" - Order number and date in a highlighted box 4. Create the order summary table: - Columns: Item Name, Quantity, Price - Each row with subtle bottom border for separation - Subtotal row - Shipping row - Total row with bold, larger font 5. Add a CTA button: - "View Order" button with bulletproof button technique (VML fallback for Outlook) - Centered with padding 6. Build the footer: - Company address (CAN-SPAM compliance) - Social media icon links (placeholder images) - Unsubscribe link (required) - Muted text color for footer content # Constraints - Inline CSS only — no `<style>` blocks (Outlook strips them from non-`<head>` positions) - Table-based layout only — no CSS Grid, Flexbox, or `<div>` layouts - All images must include `alt` text and explicit `width`/`height` attributes - Use `role="presentation"` on layout tables for accessibility - Dark mode support: include `color-scheme: light dark` meta tag and test with inverted colors - Maximum image width: 600px; use web-safe fonts with fallbacks # Output Format - Single `.html` file with complete `<!DOCTYPE html>` structure - All CSS inlined on elements - Use placeholder values wrapped in `{{mustache}}` syntax for dynamic content - Include HTML comments marking each section for easy editing

Personalize Prompt 2 vars

customer name

mustache

email template responsive +1

GPT 5.3 Ultra

Multi-Step Form Wizard

Progressive form with step indicator and validation.

# Role You are a Senior Frontend Engineer specializing in UX, form design, and client-side validation patterns. # Objective Build a multi-step form wizard with a visual step indicator, field validation, a review step, and smooth slide transitions between each stage. # Instructions 1. Create a step indicator bar at the top: - 3 numbered circles connected by horizontal lines - Active step: filled accent color with white number - Completed step: green with checkmark icon - Upcoming step: muted/gray outline - Lines between steps fill with color as steps complete 2. Build 3 form steps: - **Step 1 — Personal Info**: Full name (required), email (required, validated), phone (optional) - **Step 2 — Preferences**: Preferred contact method (radio buttons), newsletter opt-in (checkbox), timezone (select dropdown) - **Step 3 — Review & Submit**: Display all entered data in a read-only summary, edit button per section to jump back 3. Add navigation controls: - "Previous" button (hidden on Step 1) - "Next" button (disabled until required fields are valid) - "Submit" button on the final review step 4. Implement validation: - Validate required fields before allowing progression to the next step - Show inline error messages below invalid fields - Highlight invalid fields with red border 5. Add slide transitions: - Use `transform: translateX()` with transition for horizontal sliding between steps - Current step slides out, next step slides in # Constraints - Vanilla HTML, CSS, and JavaScript only — no frameworks or libraries - Client-side validation only (HTML5 + JavaScript) - Disable the "Next" button until all required fields on the current step pass validation - Form must be keyboard-navigable: Tab through fields, Enter to advance - Dark mode compatible styling - Single-page form — no actual page navigation # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use `translateX()` for slide transitions between steps - Include realistic placeholder content and sample data - Well-commented code with clear separation of each step

form wizard steps +1

GPT 5.3 Ultra

Stripe Checkout Form

A minimalist secure payment form.

# Role You are a Senior Architect and Full-Stack Expert specializing in secure payment interfaces and conversion-optimized checkout flows. # Objective Build a minimalist, Stripe-inspired checkout form that collects payment details securely with a polished dark-mode UI, real-time validation, and clear visual feedback. # Instructions 1. Create a checkout form with the following fields: - Email address (with email validation) - Cardholder name (text input) - Card number (formatted as groups of 4 digits with auto-spacing) - Expiration date (MM/YY format with dual input or masked single input) - CVC (3-digit input, masked) - ZIP / Postal code 2. Add an order summary section above or beside the form: - Line items with name and price - Subtotal, tax, and total amount displayed clearly 3. Include a prominent "Pay $XX.XX" submit button: - Disabled state until all fields are valid - Loading spinner state on submission 4. Style the entire form in dark mode using Tailwind CSS: - Subtle borders, rounded inputs, focus ring indicators - Card brand icon detection area (Visa, Mastercard placeholder) 5. Implement client-side validation: - Real-time error messages below each field - Success checkmarks on valid fields # Constraints - Use semantic HTML with proper ARIA labels and roles - Tailwind CSS only for styling — no custom CSS unless absolutely necessary - Do not include actual payment processing logic — this is a UI-only component - Ensure full keyboard navigation support - Mobile-responsive: single-column layout on small screens # Output Format - Single HTML file using Tailwind CSS CDN - Well-structured, accessible markup with inline comments - Form should be visually centered on the page with max-width of 480px

checkout form payment

GPT 5.3 Ultra