HOME SERVICES · CONTACT FORM TEMPLATE

Roofing Quote Request Form

Roofing leads split between insurance-claim work (storm damage, hail) and replacement shoppers. Same crew, completely different sales cycle. The form needs to flag which kind walked in.

Get free access key Copy the code

1,000/mo free·no card·works on any host

form.htmlhtml52 lines

01<form action="https://splitforms.com/api/submit" method="POST">
02  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
03  <input type="hidden" name="subject" value="New roofing quote request">
04 
05  <label for="name">Full name *</label>
06  <input id="name" type="text" name="name" placeholder="Marie Dubois" required>
07  <label for="email">Email *</label>
08  <input id="email" type="email" name="email" placeholder="marie@example.com" required>
09  <label for="phone">Phone *</label>
10  <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required>
11  <label for="address">Property address *</label>
12  <input id="address" type="text" name="address" placeholder="1247 Valencia St" required>
13  <label for="service">What do you need? *</label>
14  <select id="service" name="service" required>
15    <option value="">Choose…</option>
16    <option>Inspection only</option>
17    <option>Repair</option>
18    <option>Full replacement</option>
19    <option>New install (new build)</option>
20    <option>Storm damage / insurance claim</option>
21  </select>
22  <label for="material">Roof material</label>
23  <select id="material" name="material">
24    <option value="">Choose…</option>
25    <option>Asphalt shingle</option>
26    <option>Metal</option>
27    <option>Tile</option>
28    <option>Flat / TPO / EPDM</option>
29    <option>Slate</option>
30    <option>Not sure</option>
31  </select>
32  <label for="age">Roof age</label>
33  <select id="age" name="age">
34    <option value="">Choose…</option>
35    <option>Under 5 years</option>
36    <option>5–10 years</option>
37    <option>10–20 years</option>
38    <option>20+ years</option>
39    <option>Not sure</option>
40  </select>
41  <label for="details">Describe the issue *</label>
42  <textarea id="details" name="details" placeholder="Leaks, missing shingles, storm damage, age concern…" required></textarea>
43 
44  <!-- honeypot — bots fill every field -->
45  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
46 
47  <button type="submit">Send</button>
48</form>
49 
50<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
51  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
52</p>

1,000

submissions / mo, free

fields, ready to ship

code outputs

60s

from copy to inbox

Roofing Quote Request Form — example splitforms template with submissions inbox

§ 01Why it mattersthe qualifying-fields argument

Roofing has two distinct sales cycles. Insurance-claim work (post-hail or storm) closes fast — adjuster sets the price, customer just needs a contractor. Replacement shoppers compare three quotes over weeks and pick on warranty and aesthetics. The form needs to ask 'is this an insurance claim?' up front because the entire follow-up sequence differs. Roof age, material, and stories determine whether you send a sales rep or a tarp-and-inspection truck. Photo upload is non-negotiable — adjusters and remote estimators need to see the damage.

Photo upload included on Pro · webhooks into Roofr / JobNimbus / AccuLynx.

✦ at a glance

→Roofing inspection / quote · 8 fields
→HTML, JS, React, PHP, cURL outputs
→One POST endpoint, no SDK
→Honeypot + classifier, no CAPTCHA

§ 02Live previewinteractive · sandboxed · no key required

See exactly what your visitors see — and you’ll receive.

Left: the rendered form, fully interactive in a sandboxed iframe. Right: the email and dashboard view that lands the moment a visitor submits.

preview · roofing-contact-formlocalhost:3000

✦ what you’ll see in your inbox

Every submission becomes an email plus a dashboard row. The fields below are the exact payload your form will send. Reply-to is wired to the visitor’s email so hitting reply goes back to them.

dashboard · new submission14ms · 200 OK

SUBJECT · New roofing quote request

Full name: Maya Iyer
Email: maya@studio71.co
Phone: +1 415 555 0142
Property address: —
What do you need?: Inspection only
Roof material: Asphalt shingle
Roof age: Under 5 years
Describe the issue: Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.

Iframe is sandboxed — submit doesn’t actually fire. Get your access key to wire it up live.

§ 03Three steps3 steps · ~60 seconds

Generate, embed, receive.

Three actions stand between you and your first lead. None of them require a backend, a database, or a CAPTCHA library.

STEP 01GENERATE

Capture damage and roof details

Required: address, roof age, roof material (asphalt / metal / tile), issue (leak / storm damage / replacement / inspection). Insurance-claim flag is the most important field.

Create your form

key=sk_live_••••••••

STEP 02EMBED

Allow photo upload

Use the file-upload variant — Pro feature. Customers snap the damage from the ground; you get an idea of severity before the truck rolls. Saves dozens of unbillable inspections per month.

snippethtml

<form action="https://splitforms.com/api/submit" method="POST">
  …
</form>

STEP 03RECEIVE

Route insurance vs cash leads

Webhook with a router rule: insurance leads go to the supplement specialist; cash quotes go to the residential sales rep. Different scripts, different urgency.

inbox · 1 newjust now

FROM contact@yoursite.com

New roofing quote request

Maya Iyer maya@studio71.co

Loved your last open house in Hayes — looking for similar with parking. Pre-approved through Wells Fargo.

§ 04Copy & ship5 languages · same endpoint

Five outputs. One backend.

HTML by default. Click open the language you ship in — every variant POSTs to the same /api/submit endpoint.

01HTMLform.html52 lines

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New roofing quote request">

  <label for="name">Full name *</label>
  <input id="name" type="text" name="name" placeholder="Marie Dubois" required>
  <label for="email">Email *</label>
  <input id="email" type="email" name="email" placeholder="marie@example.com" required>
  <label for="phone">Phone *</label>
  <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required>
  <label for="address">Property address *</label>
  <input id="address" type="text" name="address" placeholder="1247 Valencia St" required>
  <label for="service">What do you need? *</label>
  <select id="service" name="service" required>
    <option value="">Choose…</option>
    <option>Inspection only</option>
    <option>Repair</option>
    <option>Full replacement</option>
    <option>New install (new build)</option>
    <option>Storm damage / insurance claim</option>
  </select>
  <label for="material">Roof material</label>
  <select id="material" name="material">
    <option value="">Choose…</option>
    <option>Asphalt shingle</option>
    <option>Metal</option>
    <option>Tile</option>
    <option>Flat / TPO / EPDM</option>
    <option>Slate</option>
    <option>Not sure</option>
  </select>
  <label for="age">Roof age</label>
  <select id="age" name="age">
    <option value="">Choose…</option>
    <option>Under 5 years</option>
    <option>5–10 years</option>
    <option>10–20 years</option>
    <option>20+ years</option>
    <option>Not sure</option>
  </select>
  <label for="details">Describe the issue *</label>
  <textarea id="details" name="details" placeholder="Leaks, missing shingles, storm damage, age concern…" required></textarea>

  <!-- honeypot — bots fill every field -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">

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

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

02JavaScriptform.js68 lines

<form id="lf-form">
  <label for="name">Full name *</label>
  <input id="name" type="text" name="name" placeholder="Marie Dubois" required>
  <label for="email">Email *</label>
  <input id="email" type="email" name="email" placeholder="marie@example.com" required>
  <label for="phone">Phone *</label>
  <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required>
  <label for="address">Property address *</label>
  <input id="address" type="text" name="address" placeholder="1247 Valencia St" required>
  <label for="service">What do you need? *</label>
  <select id="service" name="service" required>
    <option value="">Choose…</option>
    <option>Inspection only</option>
    <option>Repair</option>
    <option>Full replacement</option>
    <option>New install (new build)</option>
    <option>Storm damage / insurance claim</option>
  </select>
  <label for="material">Roof material</label>
  <select id="material" name="material">
    <option value="">Choose…</option>
    <option>Asphalt shingle</option>
    <option>Metal</option>
    <option>Tile</option>
    <option>Flat / TPO / EPDM</option>
    <option>Slate</option>
    <option>Not sure</option>
  </select>
  <label for="age">Roof age</label>
  <select id="age" name="age">
    <option value="">Choose…</option>
    <option>Under 5 years</option>
    <option>5–10 years</option>
    <option>10–20 years</option>
    <option>20+ years</option>
    <option>Not sure</option>
  </select>
  <label for="details">Describe the issue *</label>
  <textarea id="details" name="details" placeholder="Leaks, missing shingles, storm damage, age concern…" required></textarea>
  <button type="submit">Send</button>
</form>

<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
</p>

<script>
  document.getElementById('lf-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New roofing quote request');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    if (json.success) {
      e.target.reset();
      alert('Sent!');
    } else {
      alert('Error: ' + (json.message || 'Try again'));
    }
  });
</script>

03React / Next.jsForm.tsx83 lines

'use client';

import { useState, type FormEvent } from 'react';

export default function RoofingQuoteForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');

    const data = new FormData(e.currentTarget);
    data.set('access_key', 'YOUR_ACCESS_KEY');
    data.set('subject', 'New roofing quote request');

    const res = await fetch('https://splitforms.com/api/submit', {
      method: 'POST',
      body: data,
      headers: { Accept: 'application/json' },
    });

    const json = await res.json();
    setStatus(json.success ? 'sent' : 'error');
    if (json.success) e.currentTarget.reset();
  }

  if (status === 'sent') return <p>Thanks — we&rsquo;ll be in touch.</p>;

  return (
    <>
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Full name *</label>
      <input id="name" type="text" name="name" placeholder="Marie Dubois" required />
      <label htmlFor="email">Email *</label>
      <input id="email" type="email" name="email" placeholder="marie@example.com" required />
      <label htmlFor="phone">Phone *</label>
      <input id="phone" type="tel" name="phone" placeholder="+1 555 0142" required />
      <label htmlFor="address">Property address *</label>
      <input id="address" type="text" name="address" placeholder="1247 Valencia St" required />
      <label htmlFor="service">What do you need? *</label>
      <select id="service" name="service" required>
        <option value="">Choose…</option>
        <option>Inspection only</option>
        <option>Repair</option>
        <option>Full replacement</option>
        <option>New install (new build)</option>
        <option>Storm damage / insurance claim</option>
      </select>
      <label htmlFor="material">Roof material</label>
      <select id="material" name="material">
        <option value="">Choose…</option>
        <option>Asphalt shingle</option>
        <option>Metal</option>
        <option>Tile</option>
        <option>Flat / TPO / EPDM</option>
        <option>Slate</option>
        <option>Not sure</option>
      </select>
      <label htmlFor="age">Roof age</label>
      <select id="age" name="age">
        <option value="">Choose…</option>
        <option>Under 5 years</option>
        <option>5–10 years</option>
        <option>10–20 years</option>
        <option>20+ years</option>
        <option>Not sure</option>
      </select>
      <label htmlFor="details">Describe the issue *</label>
      <textarea id="details" name="details" placeholder="Leaks, missing shingles, storm damage, age concern…" required />

      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>

      {status === 'error' && <p>Something went wrong. Try again.</p>}
    </form>

      <p style={{ marginTop: 12, fontSize: 11, color: '#888', textAlign: 'right' }}>
        Powered by <a href="https://splitforms.com" target="_blank" rel="noopener" style={{ color: '#888', textDecoration: 'none' }}>splitforms</a>
      </p>
    </>
  );
}

04PHPsubmit.php28 lines

<?php
// Drop into a PHP page. Receives a form POST and proxies it to splitforms.com.
// Useful when you want to add server-side validation or rate limiting.

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $allowed = ['name', 'email', 'phone', 'address', 'service', 'material', 'age', 'details'];
    $payload = ['access_key' => 'YOUR_ACCESS_KEY'];
    $payload['subject'] = 'New roofing quote request';

    foreach ($allowed as $f) {
        if (isset($_POST[$f])) $payload[$f] = $_POST[$f];
    }

    $ch = curl_init('https://splitforms.com/api/submit');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($payload));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, ['Accept: application/json']);
    $response = curl_exec($ch);
    $status   = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    header('Content-Type: application/json');
    http_response_code($status);
    echo $response;
    exit;
}
?>

05cURLtest.sh12 lines

curl -X POST https://splitforms.com/api/submit \
  -H "Accept: application/json" \
  -d "access_key=YOUR_ACCESS_KEY" \
  -d "subject=New roofing quote request" \
  -d "name=Jane Builder" \
  -d "email=jane@example.com" \
  -d "phone=+15555555555" \
  -d "address=Jane Builder" \
  -d "service=Inspection only" \
  -d "material=Asphalt shingle" \
  -d "age=Under 5 years" \
  -d "details=Hello from cURL"

Replace YOUR_ACCESS_KEY with the key from your dashboard. That’s the only edit.

§ 04bUse this template with…17 frameworks · same backend

One template. Every framework.

The same field set works on every framework splitforms supports. HTML, React, Next.js, Vue, Astro, Hugo, WordPress — same POST, same backend.

§ 06FAQ4 answered

Things people ask before they ship.

Direct answers, no marketing fluff. Missing one? Email hello@splitforms.com.

01Can the customer attach a photo of the damage?

Yes — Pro plan unlocks file uploads. Customers attach photos from the ground, you triage before sending a truck. Reduces no-bid inspections by 30-40% in our roofing customers' data.

02How do I qualify storm damage vs general wear?

Add a 'when did this start?' question. Damage that appeared after a known local hailstorm date is a likely insurance claim. Damage that's been there 'for years' is a cash-pay replacement. Different lead, different sales cycle.

03Should I offer free inspections via the form?

Free inspections are the standard hook. The form schedules them; the inspection turns into a quote. Make sure your form captures preferred week, not just 'someone will call' — pre-scheduled inspections close at 2-3x the rate.

04What about Roofr / Hover / EagleView integrations?

splitforms webhooks the submission with address. Pipe that into a Zapier flow that triggers a Hover or EagleView measurement, then the rep arrives with the report in hand. Big efficiency win.

✻ ✻ ✻

Ship your roofing quote request form in 60 seconds.

1,000 free submissions per month. No credit card. Copy the snippet, paste your access key, watch leads land in your inbox.

Get free access key →Browse all 60 templates →

v0.1 · founders pricing locked in · early access open