All Form Templates

RSVP Form

Collect event RSVPs with attendance confirmation, plus-ones, and dietary notes. Works for weddings, conferences, and any gathering.

Before you start
Before using the Form Template below, you need a Formtorch endpoint.
Don't have one yet? Sign up now and get one in less than 5 minutes.

Add your Formtorch endpoint

Paste your form ID and the code below updates instantly.

rsvp.html
<section class="ft-form-wrap">
  <form
    action="https://formtorch.com/f/abc123"
    method="POST"
    accept-charset="UTF-8"
  >
    <input type="hidden" name="_formName" value="Event RSVP" />

    <h2 class="ft-heading">RSVP</h2>
    <p class="ft-hint">Please confirm your attendance by [date].</p>

    <div class="ft-field">
      <label for="ft-name" class="ft-label">Full name</label>
      <input
        id="ft-name"
        type="text"
        name="name"
        placeholder="Jane Smith"
        autocomplete="name"
        required
      />
    </div>

    <div class="ft-field">
      <label for="ft-email" class="ft-label">Email address</label>
      <input
        id="ft-email"
        type="email"
        name="email"
        placeholder="you@example.com"
        autocomplete="email"
        required
      />
    </div>

    <fieldset class="ft-fieldset">
      <legend class="ft-label">Will you attend?</legend>
      <div class="ft-radio-group">
        <label class="ft-radio">
          <input type="radio" name="attending" value="yes" required />
          Yes, I&rsquo;ll be there
        </label>
        <label class="ft-radio">
          <input type="radio" name="attending" value="no" />
          No, I can&rsquo;t make it
        </label>
      </div>
    </fieldset>

    <div class="ft-field">
      <label for="ft-guests" class="ft-label"
        >Number of additional guests</label
      >
      <input
        id="ft-guests"
        type="number"
        name="guests"
        min="0"
        max="10"
        value="0"
      />
    </div>

    <div class="ft-field">
      <label for="ft-dietary" class="ft-label"
        >Dietary requirements <span class="ft-optional">(optional)</span></label
      >
      <input
        id="ft-dietary"
        type="text"
        name="dietary"
        placeholder="e.g. vegetarian, gluten-free"
      />
    </div>

    <button type="submit">Send RSVP</button>
  </form>
</section>

<style>
  .ft-form-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 440px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;

    --ft-accent-hue: 340;
    --ft-accent: hsl(var(--ft-accent-hue) 80% 52%);
    --ft-border: #e2e8f0;
    --ft-border-hover: #cbd5e1;
    --ft-text: #0f172a;
    --ft-label: #374151;
    --ft-hint: #6b7280;
    --ft-optional: #9ca3af;
    --ft-placeholder: #9ca3af;
    --ft-bg-field: #ffffff;
    --ft-bg-hover: #f8fafc;
  }

  .ft-form-wrap * {
    box-sizing: border-box;
  }

  .ft-form-wrap form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ft-heading {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ft-text);
    line-height: 1.3;
  }

  .ft-hint {
    margin: -8px 0 0;
    font-size: 13px;
    color: var(--ft-hint);
  }

  .ft-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .ft-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ft-label);
  }

  .ft-optional {
    font-weight: 400;
    color: var(--ft-optional);
  }

  .ft-form-wrap input[type="text"],
  .ft-form-wrap input[type="email"],
  .ft-form-wrap input[type="number"] {
    width: 100%;
    height: 42px;
    border: 1px solid var(--ft-border);
    border-radius: 8px;
    background: var(--ft-bg-field);
    color: var(--ft-text);
    font: inherit;
    padding: 0 12px;
    outline: none;
    transition:
      border-color 120ms ease,
      box-shadow 120ms ease;
  }

  .ft-form-wrap input[type="number"] {
    max-width: 100px;
  }

  .ft-form-wrap input::placeholder {
    color: var(--ft-placeholder);
  }

  .ft-form-wrap input:hover {
    border-color: var(--ft-border-hover);
    background: var(--ft-bg-hover);
  }

  .ft-form-wrap input:focus-visible {
    border-color: var(--ft-accent);
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 80% 52% / 0.15);
    background: var(--ft-bg-field);
  }

  .ft-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ft-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ft-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ft-text);
    cursor: pointer;
  }

  .ft-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ft-accent);
    cursor: pointer;
  }

  .ft-form-wrap button {
    appearance: none;
    border: 0;
    border-radius: 8px;
    height: 44px;
    padding: 0 24px;
    background: var(--ft-accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
      filter 120ms ease,
      transform 120ms ease,
      box-shadow 120ms ease;
  }

  .ft-form-wrap button:hover {
    filter: brightness(1.08);
  }

  .ft-form-wrap button:active {
    transform: translateY(1px);
  }

  .ft-form-wrap button:focus-visible {
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 80% 52% / 0.25);
    outline: none;
  }

  .ft-form-wrap button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

How it works

Create a Formtorch endpoint

Sign up and create a new form endpoint in the dashboard. You will get a unique URL in seconds.

Create endpoint

Paste it into your form

Set your form's action attribute to your endpoint URL. No other changes required.

Deploy and start receiving submissions

Every submission is stored in your dashboard, triggers email notifications, and can fire webhooks to any service.

Frequently asked questions

No. Formtorch works with standard HTML forms via the action attribute. No JavaScript required for basic submissions.

Start in less than 5 minutes

Create your endpoint, paste it into any template, and you are live.

Create endpointContact us