All Form Templates

Basic HTML Contact Form

Copy-paste contact form that works instantly. No JavaScript, no backend, no setup. Works with HTML, React, Next.js, and Astro.

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.

contact.html
<section class="ft-form-wrap">
  <form
    action="https://formtorch.com/f/abc123"
    method="POST"
    accept-charset="UTF-8"
  >
    <input
      type="hidden"
      name="_redirect"
      value="https://yoursite.com/thank-you"
    />

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

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

    <div class="ft-field">
      <label for="ft-message">Message</label>
      <textarea
        id="ft-message"
        name="message"
        rows="5"
        placeholder="Tell us about your project..."
        required
        minlength="10"
      ></textarea>
    </div>

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

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

    --ft-accent-hue: 220;
    --ft-accent: hsl(var(--ft-accent-hue) 96% 56%);
    --ft-border: #e2e8f0;
    --ft-border-hover: #cbd5e1;
    --ft-text: #0f172a;
    --ft-muted: #475569;
    --ft-placeholder: #94a3b8;
    --ft-bg: #ffffff;
    --ft-bg-hover: #f8fafc;
  }

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

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

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

  .ft-form-wrap label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ft-text);
  }

  .ft-form-wrap input,
  .ft-form-wrap textarea {
    width: 100%;
    border: 1px solid var(--ft-border);
    border-radius: 8px;
    background: var(--ft-bg);
    color: var(--ft-text);
    font: inherit;
    padding: 10px 12px;
    outline: none;
    transition:
      border-color 120ms ease,
      box-shadow 120ms ease,
      background-color 120ms ease;
  }

  .ft-form-wrap input {
    height: 42px;
  }

  .ft-form-wrap textarea {
    min-height: 120px;
    resize: vertical;
  }

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

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

  .ft-form-wrap input:focus-visible,
  .ft-form-wrap textarea:focus-visible {
    border-color: var(--ft-accent);
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.15);
    background: #fff;
  }

  .ft-form-wrap input:focus-visible:invalid,
  .ft-form-wrap textarea:focus-visible:invalid {
    border-color: var(--ft-accent);
    box-shadow: 0 0 0 3px hsl(var(--ft-accent-hue) 96% 56% / 0.15);
  }

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

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

  .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) 96% 56% / 0.18);
    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