LEAD CAPTURE · CONTACT FORM TEMPLATE

Contact Form with File Upload (Attachments)

Some contact forms need attachments — a project brief, a CV, a damaged-product photo. This is the form pattern for that, with drag-and-drop, multi-file, and removable file rows.

Get free access key Copy the code

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

form.htmlhtml32 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 quote request">
04 
05  <label for="name">Name *</label>
06  <input id="name" type="text" name="name" placeholder="Jane Builder" required>
07  <label for="email">Email *</label>
08  <input id="email" type="email" name="email" placeholder="jane@example.com" required>
09  <label for="phone">Phone *</label>
10  <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required>
11  <label for="company">Company</label>
12  <input id="company" type="text" name="company" placeholder="Acme Inc">
13  <label for="budget">Budget *</label>
14  <select id="budget" name="budget" required>
15    <option value="">Choose…</option>
16    <option>&lt; $5k</option>
17    <option>$5k–$15k</option>
18    <option>$15k–$50k</option>
19    <option>$50k+</option>
20  </select>
21  <label for="project">Tell us about the project *</label>
22  <textarea id="project" name="project" placeholder="Goals, timeline, anything we should know." required></textarea>
23 
24  <!-- honeypot — bots fill every field -->
25  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
26 
27  <button type="submit">Send</button>
28</form>
29 
30<p style="margin-top:12px;font-size:11px;color:#888;text-align:right">
31  Powered by <a href="https://splitforms.com" style="color:#888;text-decoration:none" target="_blank" rel="noopener">splitforms</a>
32</p>

1,000

submissions / mo, free

fields, ready to ship

code outputs

60s

from copy to inbox

§ 01Why it mattersthe qualifying-fields argument

File attachments are where most form backends fall over — they either don't support them, or they bolt on an upload service (Cloudinary, Uploadcare) you have to configure. splitforms ships drag-and-drop file upload as a Pro feature, with the same one-endpoint integration model. PDFs, screenshots, CVs, and project briefs arrive as actual attachments on the email, not links to a CDN.

🔒 File upload is a Pro feature — included on the $5/mo plan and the $59 4-Year plan.

✦ at a glance

→Quote request · 6 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 · contact-form-with-file-uploadlocalhost: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 quote request

Name: Maya Iyer
Email: maya@studio71.co
Phone: +1 415 555 0142
Company: Studio 71
Budget: $650k — $850k
Tell us about the project: —

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

Use the file-upload template

Copy the HTML/JS for the drag-and-drop zone. The same form action endpoint handles file payloads via multipart/form-data — no special API.

Create your form

key=sk_live_••••••••

STEP 02EMBED

Set per-file limits

Default cap is 10MB per file, 25MB per submission. Pro plans can raise these. File types are validated server-side.

snippethtml

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

STEP 03RECEIVE

Receive attached files

Files arrive as actual email attachments on every notification. The dashboard stores them with signed download URLs that expire on a schedule you control.

inbox · 1 newjust now

FROM contact@yoursite.com

New 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.html32 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 quote request">

  <label for="name">Name *</label>
  <input id="name" type="text" name="name" placeholder="Jane Builder" required>
  <label for="email">Email *</label>
  <input id="email" type="email" name="email" placeholder="jane@example.com" required>
  <label for="phone">Phone *</label>
  <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required>
  <label for="company">Company</label>
  <input id="company" type="text" name="company" placeholder="Acme Inc">
  <label for="budget">Budget *</label>
  <select id="budget" name="budget" required>
    <option value="">Choose…</option>
    <option>&lt; $5k</option>
    <option>$5k–$15k</option>
    <option>$15k–$50k</option>
    <option>$50k+</option>
  </select>
  <label for="project">Tell us about the project *</label>
  <textarea id="project" name="project" placeholder="Goals, timeline, anything we should know." 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.js48 lines

<form id="lf-form">
  <label for="name">Name *</label>
  <input id="name" type="text" name="name" placeholder="Jane Builder" required>
  <label for="email">Email *</label>
  <input id="email" type="email" name="email" placeholder="jane@example.com" required>
  <label for="phone">Phone *</label>
  <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required>
  <label for="company">Company</label>
  <input id="company" type="text" name="company" placeholder="Acme Inc">
  <label for="budget">Budget *</label>
  <select id="budget" name="budget" required>
    <option value="">Choose…</option>
    <option>&lt; $5k</option>
    <option>$5k–$15k</option>
    <option>$15k–$50k</option>
    <option>$50k+</option>
  </select>
  <label for="project">Tell us about the project *</label>
  <textarea id="project" name="project" placeholder="Goals, timeline, anything we should know." 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 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.tsx63 lines

'use client';

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

export default function QuoteForm() {
  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 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">Name *</label>
      <input id="name" type="text" name="name" placeholder="Jane Builder" required />
      <label htmlFor="email">Email *</label>
      <input id="email" type="email" name="email" placeholder="jane@example.com" required />
      <label htmlFor="phone">Phone *</label>
      <input id="phone" type="tel" name="phone" placeholder="+1 415 555 0142" required />
      <label htmlFor="company">Company</label>
      <input id="company" type="text" name="company" placeholder="Acme Inc" />
      <label htmlFor="budget">Budget *</label>
      <select id="budget" name="budget" required>
        <option value="">Choose…</option>
        <option>&lt; $5k</option>
        <option>$5k–$15k</option>
        <option>$15k–$50k</option>
        <option>$50k+</option>
      </select>
      <label htmlFor="project">Tell us about the project *</label>
      <textarea id="project" name="project" placeholder="Goals, timeline, anything we should know." 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', 'company', 'budget', 'project'];
    $payload = ['access_key' => 'YOUR_ACCESS_KEY'];
    $payload['subject'] = 'New 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.sh10 lines

curl -X POST https://splitforms.com/api/submit \
  -H "Accept: application/json" \
  -d "access_key=YOUR_ACCESS_KEY" \
  -d "subject=New quote request" \
  -d "name=Jane Builder" \
  -d "email=jane@example.com" \
  -d "phone=+15555555555" \
  -d "company=Jane Builder" \
  -d "budget=< $5k" \
  -d "project=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.

01What file types can I accept?

Anything you list in the input's accept attribute — PDFs, images, Word docs, ZIP archives, audio, video. Server-side validation enforces both extension and MIME type. Executable types are blocked by default.

02How big can the files be?

Up to 25MB per submission on Pro. The 4-Year plan allows 50MB per submission. Free plans don't include file upload — they're text-form only.

03Where are the files stored?

Files are stored in S3-compatible object storage with row-level security. Only the form owner can generate download links. Files are auto-deleted after 90 days unless your retention policy says otherwise.

04Can I forward attachments to a webhook?

Yes — the webhook payload includes signed download URLs for each file. Most teams forward to Slack / Discord / Notion this way; the file lives in our storage and the message in their app links to it.

✻ ✻ ✻

Ship your contact form with file upload (attachments) 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