All Form Templates

Multi-Column Contact Form

A two-column layout that makes better use of horizontal space. First/last name and email/phone sit side by side — message spans full width.

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-row">
      <div class="ft-field">
        <label for="ft-fname">First name</label>
        <input
          id="ft-fname"
          type="text"
          name="first_name"
          placeholder="Jane"
          autocomplete="given-name"
          required
          minlength="2"
        />
      </div>

      <div class="ft-field">
        <label for="ft-lname">Last name</label>
        <input
          id="ft-lname"
          type="text"
          name="last_name"
          placeholder="Doe"
          autocomplete="family-name"
          required
          minlength="2"
        />
      </div>
    </div>

    <div class="ft-row">
      <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-phone">Phone number</label>
        <input
          id="ft-phone"
          type="tel"
          name="phone"
          placeholder="+1 (555) 000-0000"
          autocomplete="tel"
        />
      </div>
    </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: 600px;
    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-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  @media (max-width: 520px) {
    .ft-row {
      grid-template-columns: 1fr;
    }
  }

  .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