Webinar & Event Registration Form
An event and webinar registration form built for high conversion with Tailwind CSS and violet gradients. Features interactive session time selection, invisible honeypot anti-spam defense, and instant calendar invite notifications dispatched to your attendees via Backforms email automation and webhooks.
Session timezone & time slot selector
Invisible honeypot (_gotcha) spam trap
Full React / Next.js client component with state
Event schedule summary and high-contrast CTA styling
Automatic attendee sync to Google Sheets & Email
Live Form PreviewComponent Sandbox
Serverless Form Architecture
Live walkthrough of form pipelines, spam defenses, and webhook automations.
Thursday, Dec 12
10:00 AM PST (45 min)
Live Stream & Q&A
Pre-configured for Backforms endpoint with calendar email dispatch
Honeypot anti-spam active
Zero backend neededstyle="color:#9ece6a;">"use client";
import { useState } from style="color:#9ece6a;">"react";
import { Calendar, Check } from style="color:#9ece6a;">"lucide-react";
export default function WebinarRegistrationForm() {
const [status, setStatus] = useState<style="color:#9ece6a;">"idle" | style="color:#9ece6a;">"loading" | style="color:#9ece6a;">"success" | style="color:#9ece6a;">"error">(style="color:#9ece6a;">"idle");
const [errorMessage, setErrorMessage] = useState(style="color:#9ece6a;">"");
async function handleSubmit(e: React.FormEvent<style="color:#f7768e;font-weight:600;">HTMLFormElement>) {
e.preventDefault();
setStatus(style="color:#9ece6a;">"loading");
setErrorMessage(style="color:#9ece6a;">"");
const form = e.currentTarget;
const formData = new FormData(form);
try {
style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">// Replace YOUR_FORM_ID with your Backforms endpoint ID from app.backforms.com
const response = await fetch(style="color:#9ece6a;">"https:style="color:#565f89;font-style:italic;style="color:#9ece6a;">">//backforms.com/f/YOUR_FORM_ID", {
method: style="color:#9ece6a;">"POST",
headers: {
Accept: style="color:#9ece6a;">"application/json",
},
body: formData,
});
if (response.ok) {
setStatus(style="color:#9ece6a;">"success");
form.reset();
} else {
const data = await response.json().catch(() => null);
setErrorMessage(data?.error || style="color:#9ece6a;">"Registration failed. Please try again.");
setStatus(style="color:#9ece6a;">"error");
}
} catch {
setErrorMessage(style="color:#9ece6a;">"Network error. Please check your internet connection.");
setStatus(style="color:#9ece6a;">"error");
}
}
return (
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"flex flex-col items-center justify-center min-h-[500px] p-4">
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"w-full max-w-md bg-gradient-to-b from-[#181528] to-[#0d0c15] border border-violet-500/30 rounded-2xl p-6 sm:p-7 shadow-2xl text-zinc-100">
{style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Header Bar */}
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"flex items-center justify-between mb-4 pb-3 border-b border-violet-500/20">
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"flex items-center gap-2">
<style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"relative flex h-2.5 w-2.5">
<style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"animate-ping absolute inline-flex h-full w-full rounded-full bg-rose-500 opacity-75"></style="color:#f7768e;font-weight:600;">span>
<style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"relative inline-flex rounded-full h-2.5 w-2.5 bg-rose-500"></style="color:#f7768e;font-weight:600;">span>
</style="color:#f7768e;font-weight:600;">span>
<style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"text-[11px] font-mono uppercase tracking-wider text-rose-400 font-bold">
Live Virtual Workshop
</style="color:#f7768e;font-weight:600;">span>
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"text-[10px] font-mono font-medium text-emerald-400 bg-emerald-950/80 border border-emerald-500/30 px-2.5 py-0.5 rounded-full">
100% Free
</style="color:#f7768e;font-weight:600;">span>
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">h2 className=style="color:#9ece6a;">"text-xl sm:text-2xl font-extrabold text-white mb-1 tracking-tight">
Webinar Registration
</style="color:#f7768e;font-weight:600;">h2>
<style="color:#f7768e;font-weight:600;">p className=style="color:#9ece6a;">"text-xs text-zinc-400 mb-5 leading-relaxed">
Reserve your free seat for the live masterclass and interactive Q&A.
</style="color:#f7768e;font-weight:600;">p>
{status === style="color:#9ece6a;">"success" ? (
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"p-5 bg-violet-950/50 border border-emerald-500/40 text-emerald-300 rounded-xl text-center space-y-2">
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"size-8 mx-auto rounded-full bg-emerald-950/70 border border-emerald-500/40 flex items-center justify-center text-emerald-400">
<style="color:#f7768e;font-weight:600;">Check className=style="color:#9ece6a;">"size-4 stroke-[2.5]" />
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">p className=style="color:#9ece6a;">"font-bold text-base text-white">Your Seat Is Reserved!</style="color:#f7768e;font-weight:600;">p>
<style="color:#f7768e;font-weight:600;">p className=style="color:#9ece6a;">"text-xs text-zinc-300">
We have sent the calendar invite (.ics) and access link to your email.
</style="color:#f7768e;font-weight:600;">p>
<style="color:#f7768e;font-weight:600;">button
type=style="color:#9ece6a;">"button"
onClick={() => setStatus(style="color:#9ece6a;">"idle")}
className=style="color:#9ece6a;">"mt-3 px-4 py-1.5 bg-violet-700 hover:bg-violet-600 text-white rounded-lg text-xs font-semibold transition cursor-pointer"
>
Register Another Colleague
</style="color:#f7768e;font-weight:600;">button>
</style="color:#f7768e;font-weight:600;">div>
) : (
<style="color:#f7768e;font-weight:600;">form onSubmit={handleSubmit} className=style="color:#9ece6a;">"space-y-3.5">
{style=style="color:#9ece6a;">"color:#565f89;font-style:italic;">/* Invisible Honeypot Spam Trap (Catches automated bots) */}
<style="color:#f7768e;font-weight:600;">input
type=style="color:#9ece6a;">"text"
name=style="color:#9ece6a;">"_gotcha"
style={{ display: style="color:#9ece6a;">"none" }}
tabIndex={-1}
autoComplete=style="color:#9ece6a;">"off"
/>
{status === style="color:#9ece6a;">"error" && (
<style="color:#f7768e;font-weight:600;">div className=style="color:#9ece6a;">"p-3 bg-red-950/80 border border-red-500/50 text-red-300 text-xs rounded-lg">
{errorMessage}
</style="color:#f7768e;font-weight:600;">div>
)}
<style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">label className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1" htmlFor=style="color:#9ece6a;">"webinar-name">
Full Name
</style="color:#f7768e;font-weight:600;">label>
<style="color:#f7768e;font-weight:600;">input
id=style="color:#9ece6a;">"webinar-name"
name=style="color:#9ece6a;">"fullName"
type=style="color:#9ece6a;">"text"
required
placeholder=style="color:#9ece6a;">"Jane Developer"
className=style="color:#9ece6a;">"w-full bg-[#1b172e] text-white border border-violet-500/25 rounded-lg px-3.5 py-2 text-sm placeholder:text-zinc-500 focus:outline-none focus:border-violet-400 transition"
/>
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">label className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1" htmlFor=style="color:#9ece6a;">"webinar-email">
Work Email
</style="color:#f7768e;font-weight:600;">label>
<style="color:#f7768e;font-weight:600;">input
id=style="color:#9ece6a;">"webinar-email"
name=style="color:#9ece6a;">"email"
type=style="color:#9ece6a;">"email"
required
placeholder=style="color:#9ece6a;">"jane@company.com"
className=style="color:#9ece6a;">"w-full bg-[#1b172e] text-white border border-violet-500/25 rounded-lg px-3.5 py-2 text-sm placeholder:text-zinc-500 focus:outline-none focus:border-violet-400 transition"
/>
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">label className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1" htmlFor=style="color:#9ece6a;">"webinar-company">
Company Name <style="color:#f7768e;font-weight:600;">span className=style="color:#9ece6a;">"text-zinc-500">(Optional)</style="color:#f7768e;font-weight:600;">span>
</style="color:#f7768e;font-weight:600;">label>
<style="color:#f7768e;font-weight:600;">input
id=style="color:#9ece6a;">"webinar-company"
name=style="color:#9ece6a;">"company"
type=style="color:#9ece6a;">"text"
placeholder=style="color:#9ece6a;">"Acme Corp"
className=style="color:#9ece6a;">"w-full bg-[#1b172e] text-white border border-violet-500/25 rounded-lg px-3.5 py-2 text-sm placeholder:text-zinc-500 focus:outline-none focus:border-violet-400 transition"
/>
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">label className=style="color:#9ece6a;">"block text-xs font-medium text-zinc-300 mb-1" htmlFor=style="color:#9ece6a;">"webinar-session">
Choose Session Time
</style="color:#f7768e;font-weight:600;">label>
<style="color:#f7768e;font-weight:600;">select
id=style="color:#9ece6a;">"webinar-session"
name=style="color:#9ece6a;">"session"
className=style="color:#9ece6a;">"w-full bg-[#1b172e] text-white border border-violet-500/25 rounded-lg px-3.5 py-2.5 text-sm focus:outline-none focus:border-violet-400"
>
<style="color:#f7768e;font-weight:600;">option value=style="color:#9ece6a;">"10am-edt">Session 1 • 10:00 AM EDT (Americas / EMEA)</style="color:#f7768e;font-weight:600;">option>
<style="color:#f7768e;font-weight:600;">option value=style="color:#9ece6a;">"6pm-edt">Session 2 • 6:00 PM EDT (APAC / West Coast)</style="color:#f7768e;font-weight:600;">option>
</style="color:#f7768e;font-weight:600;">select>
</style="color:#f7768e;font-weight:600;">div>
<style="color:#f7768e;font-weight:600;">button
type=style="color:#9ece6a;">"submit"
disabled={status === style="color:#9ece6a;">"loading"}
className=style="color:#9ece6a;">"w-full mt-2 bg-gradient-to-r from-violet-600 via-indigo-600 to-purple-600 hover:from-violet-500 hover:to-indigo-500 text-white font-bold py-2.5 px-4 rounded-xl transition cursor-pointer shadow-lg shadow-violet-600/25 disabled:opacity-60 flex items-center justify-center gap-2"
>
<style="color:#f7768e;font-weight:600;">Calendar className=style="color:#9ece6a;">"size-4" />
<style="color:#f7768e;font-weight:600;">span>{status === style="color:#9ece6a;">"loading" ? style="color:#9ece6a;">"Reserving Your Seat..." : style="color:#9ece6a;">"Reserve Free Seat"}</style="color:#f7768e;font-weight:600;">span>
</style="color:#f7768e;font-weight:600;">button>
</style="color:#f7768e;font-weight:600;">form>
)}
</style="color:#f7768e;font-weight:600;">div>
</style="color:#f7768e;font-weight:600;">div>
);
}Replace YOUR_FORM_ID with your Backforms key
Connect this component to your Backforms endpoint
Create a free form endpoint in under 30 seconds. Zero backend servers or databases required.
Frequently Asked Questions & Technical Integration
Can Backforms automatically send a calendar invite (.ics) to webinar attendees?
Yes! Backforms offers auto-responder emails with customizable templates. You can include your Zoom or Google Meet link and attach a calendar invite file directly.
How can I synchronize attendees into Google Sheets or our CRM?
In your Backforms dashboard, enable the one-click Google Sheets integration or connect HubSpot/Salesforce via webhooks. Every new attendee registration is instantly synced in real time.
How does the invisible honeypot prevent automated registration spam?
The hidden _gotcha input traps registration bots and scrapers. If filled, Backforms rejects the submission silently without exposing your calendar invites or webinar link to bots.