Sales Lead Form

Capture company, role, and budget info from prospects. Pipe straight to your CRM or inbox via webhook.

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.

lead-form.html

<section class="ft-lead-demo" aria-label="Sales lead 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"
    >
      <div class="ft-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24">
          <rect x="4" y="3" width="16" height="18" rx="2" />
          <path d="M9 21v-4h6v4" />
          <path d="M9 8h.01" />
          <path d="M9 12h.01" />
          <path d="M15 8h.01" />
          <path d="M15 12h.01" />
        </svg>
      </div>

      <div class="ft-form-heading">
        <h2>Sales Lead Form</h2>
        <p>Tell us about your needs and our team will reach out shortly.</p>
      </div>

      <div class="ft-field">
        <label for="ft-company">Company Name</label>
        <div class="ft-control">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <rect x="4" y="3" width="16" height="18" rx="2" />
            <path d="M9 21v-4h6v4" />
            <path d="M9 8h.01" />
            <path d="M9 12h.01" />
            <path d="M15 8h.01" />
            <path d="M15 12h.01" />
          </svg>
          <input
            id="ft-company"
            type="text"
            name="company"
            placeholder="Your company"
            autocomplete="organization"
            required
          />
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-email">Work 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="name@company.com"
            autocomplete="email"
            required
          />
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-role">Role</label>
        <div class="ft-control">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <rect x="2" y="7" width="20" height="14" rx="2" />
            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
          </svg>
          <input
            id="ft-role"
            type="text"
            name="role"
            placeholder="e.g. Founder, Head of Growth"
            autocomplete="organization-title"
          />
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-budget">Budget</label>
        <div class="ft-control ft-control-select">
          <svg aria-hidden="true" viewBox="0 0 24 24">
            <line x1="12" y1="1" x2="12" y2="23" />
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
          </svg>
          <select id="ft-budget" name="budget">
            <option value="" disabled selected>Select your budget range</option>
            <option value="under-500">Under $500/mo</option>
            <option value="500-2000">$500 - $2,000/mo</option>
            <option value="2000-plus">$2,000+/mo</option>
          </select>
          <svg class="ft-chevron" aria-hidden="true" viewBox="0 0 24 24">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </div>
      </div>

      <div class="ft-field">
        <label for="ft-notes"
          >Notes <span class="ft-optional">(optional)</span></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-notes"
            name="notes"
            rows="4"
            placeholder="How can we help your team?"
          ></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>Request Demo</span>
      </button>

      <p class="ft-status">
        <svg aria-hidden="true" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="10" />
          <path d="m9 12 2 2 4-4" />
        </svg>
        Leads are securely sent to your CRM via
        <span class="ft-highlight">webhook</span>.
      </p>
    </form>
  </div>
</section>

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

  .ft-lead-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-lead-demo,
  .ft-lead-demo * {
    box-sizing: border-box;
  }

  .ft-lead-demo::before,
  .ft-lead-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-lead-demo::before {
    top: 9%;
    left: 5%;
  }

  .ft-lead-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: 20px;
    padding: clamp(28px, 5vw, 40px);
  }

  .ft-icon {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(
      160deg,
      rgb(37 99 235 / 0.22),
      rgb(15 23 42 / 0.4)
    );
    border: 1px solid rgb(148 163 184 / 0.18);
    box-shadow: 0 0 30px rgb(37 99 235 / 0.18);
  }

  .ft-icon svg {
    width: 24px;
    height: 24px;
    color: #3b82f6;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ft-form-heading {
    margin-top: -4px;
    text-align: center;
  }

  .ft-form-heading h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(24px, 4.5vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.03em;
  }

  .ft-form-heading p {
    margin: 8px auto 0;
    max-width: 340px;
    color: #94a3b8;
    font-size: clamp(14px, 2.4vw, 15px);
    line-height: 1.5;
  }

  .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-optional {
    color: #64748b;
    font-weight: 400;
  }

  .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 select,
  .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,
  .ft-control select {
    height: 54px;
    padding: 0 18px 0 56px;
  }

  .ft-control select {
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
    color: #64748b;
  }

  .ft-control select:has(option:checked:not([value=""])) {
    color: #f8fafc;
  }

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

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

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

  .ft-chevron {
    position: absolute;
    left: auto;
    right: 18px;
    width: 18px;
    height: 18px;
    color: #64748b;
  }

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

  .ft-control input:hover,
  .ft-control select: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 select: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: 20px;
    height: 20px;
    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-status {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }

  .ft-status svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #22c55e;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ft-highlight {
    color: #60a5fa;
    font-weight: 600;
  }

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

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

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

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

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

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

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

    .ft-submit {
      height: 52px;
    }

    .ft-status {
      flex-wrap: wrap;
    }
  }
</style>

Why Use This Template

What is a sales lead form?

A sales lead form collects the details a sales team needs before the first call: company, role, budget, and email, instead of just a name and a message. It's built for lead generation, not general enquiries.

Why do you need a dedicated lead form instead of a contact form?

A generic contact form tells you someone is interested. A lead form tells you who they work for, what they do, and roughly what they have to spend, which is what turns a form submission into a qualified lead your sales team can act on.

How do you add a lead form with a backend like Formtorch and connect it to your CRM?

Copy the HTML, React, Next.js, or Astro snippet above and point it at your Formtorch endpoint: the fields are ready to submit with no backend to build. Add a webhook in your Formtorch dashboard to forward every lead to HubSpot, Salesforce, Pipedrive, or any CRM automatically.

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