Webinar registration

Why these fields

Full name: Full name captures a short, searchable answer and is required to complete the request.
Email: Email provides a validated reply address and is required to complete the request.
Company: Company captures a short, searchable answer but remains optional.
Session date: Session date collects an unambiguous date but remains optional.
Questions for the host: Questions for the host leaves room for context and detail but remains optional.

Fields

Full nametextrequiredEmailemailrequiredCompanytextSession datedateQuestions for the hosttextarea

Preview

Code

import { useState } from "react";

export function WebinarRegistrationForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Full name</label>
      <input type="text" name="name" id="name" required />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label htmlFor="company">Company</label>
      <input type="text" name="company" id="company" />
      <label htmlFor="session">Session date</label>
      <input type="date" name="session" id="session" />
      <label htmlFor="questions">Questions for the host</label>
      <textarea name="questions" id="questions" />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Customize before publishing

Remove fields you do not need and mark only essential answers as required.
Replace placeholder wording with terms your audience already understands.
Add your privacy notice, retention details and expected response time.
Test keyboard focus, validation errors and the confirmation state on mobile.

Use this with Formward

Create a form, copy your endpoint, and replace https://forms.formward.eu/f/your-form-id in the code above.

Get started free →