Basic HTML Contact Form

A plain HTML contact form that sends email the moment someone submits it, with no JavaScript and no backend to build. Copy the markup into any HTML or Astro page and point it at your Formtorch endpoint.

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-basic-demo" aria-label="Basic HTML contact form demo">
  <div class="ft-window">
    <div class="ft-window-bar" aria-hidden="true">
      <span></span>
      <span></span>
      <span></span>
    </div>

    <form
      class="ft-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">Name</label>
        <div class="ft-control">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <path d="M20 21a8 8 0 0 0-16 0" />
            <circle cx="12" cy="7" r="4" />
          </svg>
          <input
            id="ft-name"
            type="text"
            name="name"
            placeholder="Your name"
            autocomplete="name"
            required
            minlength="2"
          />
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-email">Email</label>
        <div class="ft-control">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <path d="M4 6h16v12H4z" />
            <path d="m4 7 8 6 8-6" />
          </svg>
          <input
            id="ft-email"
            type="email"
            name="email"
            placeholder="you@example.com"
            autocomplete="email"
            required
          />
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-message">Message</label>
        <div class="ft-control ft-control-textarea">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <path d="M12 20h9" />
            <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z" />
          </svg>
          <textarea
            id="ft-message"
            name="message"
            rows="5"
            placeholder="How can we help you?"
            required
            minlength="10"
          ></textarea>
        </div>
      </div>

      <button class="ft-submit" type="submit">
        <svg aria-hidden="true" viewBox="0 0 24 24">
          <path d="m22 2-7 20-4-9-9-4Z" />
          <path d="M22 2 11 13" />
        </svg>
        <span>Send Message</span>
      </button>
    </form>
  </div>
</section>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    background: #05070d;
  }

  .ft-basic-demo {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    padding: clamp(24px, 5vw, 64px);
    display: grid;
    place-items: center;
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    color: #f8fafc;
    background:
      radial-gradient(circle at 22% 18%, rgb(37 99 235 / 0.2), transparent 32%),
      radial-gradient(
        circle at 78% 75%,
        rgb(37 99 235 / 0.18),
        transparent 30%
      ),
      #05070d;
  }

  .ft-basic-demo,
  .ft-basic-demo * {
    box-sizing: border-box;
  }

  .ft-basic-demo::before,
  .ft-basic-demo::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: clamp(90px, 16vw, 130px);
    height: clamp(130px, 20vw, 190px);
    pointer-events: none;
    opacity: 0.45;
    background-image: radial-gradient(
      rgb(37 99 235 / 0.9) 1.5px,
      transparent 1.5px
    );
    background-size: 20px 20px;
  }

  .ft-basic-demo::before {
    top: 9%;
    left: 5%;
  }

  .ft-basic-demo::after {
    bottom: 9%;
    right: 5%;
  }

  .ft-window {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    overflow: hidden;
    border: 1px solid rgb(148 163 184 / 0.22);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 130px),
      linear-gradient(145deg, rgb(15 23 42 / 0.96), rgb(2 6 23 / 0.96));
    box-shadow:
      0 26px 80px rgb(0 0 0 / 0.45),
      0 0 0 1px rgb(255 255 255 / 0.04),
      0 0 44px rgb(37 99 235 / 0.2);
  }

  .ft-window-bar {
    position: relative;
    z-index: 1;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 32px;
    border-bottom: 1px solid rgb(148 163 184 / 0.12);
    background: rgb(255 255 255 / 0.025);
  }

  .ft-window-bar span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 20px rgb(37 99 235 / 0.55);
  }

  .ft-window-bar span:nth-child(2) {
    background: #1d4ed8;
  }

  .ft-window-bar span:nth-child(3) {
    background: #334155;
    box-shadow: none;
  }

  .ft-form {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 5vw, 40px);
  }

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

  .ft-field label {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
  }

  .ft-control {
    position: relative;
    display: flex;
    align-items: center;
  }

  .ft-control svg {
    position: absolute;
    left: 18px;
    width: 20px;
    height: 20px;
    color: #3b82f6;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }

  .ft-control input,
  .ft-control textarea {
    width: 100%;
    border: 1px solid rgb(148 163 184 / 0.24);
    border-radius: 10px;
    background: rgb(15 23 42 / 0.52);
    color: #f8fafc;
    font: inherit;
    font-size: 16px;
    outline: none;
    transition:
      border-color 160ms ease,
      background-color 160ms ease,
      box-shadow 160ms ease;
  }

  .ft-control input {
    height: 54px;
    padding: 0 18px 0 56px;
  }

  .ft-control textarea {
    min-height: 150px;
    padding: 18px 18px 18px 56px;
    resize: vertical;
  }

  .ft-control-textarea {
    align-items: flex-start;
  }

  .ft-control-textarea svg {
    top: 20px;
  }

  .ft-control input::placeholder,
  .ft-control textarea::placeholder {
    color: #64748b;
  }

  .ft-control input:hover,
  .ft-control textarea:hover {
    border-color: rgb(148 163 184 / 0.38);
    background: rgb(15 23 42 / 0.7);
  }

  .ft-control input:focus-visible,
  .ft-control textarea:focus-visible {
    border-color: #2563eb;
    background: rgb(15 23 42 / 0.78);
    box-shadow: 0 0 0 4px rgb(37 99 235 / 0.18);
  }

  .ft-submit {
    appearance: none;
    height: 56px;
    border: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 650;
    cursor: pointer;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 16px 34px rgb(37 99 235 / 0.18);
    transition:
      transform 160ms ease,
      filter 160ms ease,
      box-shadow 160ms ease;
  }

  .ft-submit svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ft-submit:hover {
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 20px 42px rgb(37 99 235 / 0.24);
  }

  .ft-submit:active {
    transform: translateY(1px);
  }

  .ft-submit:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 4px rgb(37 99 235 / 0.22),
      0 20px 42px rgb(37 99 235 / 0.24);
  }

  .ft-submit:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    filter: grayscale(0.15);
  }

  @media (max-width: 520px) {
    .ft-basic-demo {
      padding: 18px;
    }

    .ft-basic-demo::before,
    .ft-basic-demo::after {
      display: none;
    }

    .ft-window {
      border-radius: 20px;
    }

    .ft-window-bar {
      height: 54px;
      padding: 0 22px;
    }

    .ft-form {
      gap: 18px;
      padding: 24px 20px;
    }

    .ft-control input {
      height: 50px;
    }

    .ft-control textarea {
      min-height: 130px;
    }

    .ft-submit {
      height: 52px;
    }
  }
</style>

Why Use This Template

What is an HTML contact form?

An HTML contact form is a plain form element with name, email, and message fields that sends a visitor's message to you on submit. It needs no JavaScript to work: the form's action attribute alone can post the data anywhere, including a form backend like Formtorch.

Why do you need a contact form on your website?

A contact form keeps your email address off the page, which cuts down on the spam bots collect by scraping visible addresses. It also turns every enquiry into structured data (a name, an email, a message) instead of a stream of free-form emails, which makes replying and organizing enquiries easier.

How do you add a contact form with a backend like Formtorch?

Copy the HTML above and swap the action URL for your Formtorch endpoint: the form is live with no server code to write. Formtorch receives the submission, stores it in your dashboard, and can forward it by email or webhook the moment it arrives.

How it works

Create a Formtorch endpoint

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 endpoint Contact us