Menu
Create your first form
Quotes

Multi-step quote form template

Split a quote request into two steps while validating fields before continuing.

Local preview: changes stay in this browser. No message or email is sent.

Multi-step quote

Project first, contact details next: an easier request to complete.

1 / 2

1 / 2

LittleReply
Customize the template
Labels and required fields

Add your identity, purpose, applicable basis, retention, rights contact, and privacy link. This example is not legal advice.

Standalone HTML / CSS
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Contact form</title>
<style>form[data-littlereply]{max-width:640px;margin:2rem auto;padding:1.5rem;font:16px/1.6 system-ui,sans-serif;color:#202033;background:white;border:1px solid #e4e4ee;border-radius:16px;box-sizing:border-box}form[data-littlereply] label{display:block;margin-top:1rem;font-weight:600}form[data-littlereply] input,form[data-littlereply] textarea,form[data-littlereply] select{box-sizing:border-box;width:100%;padding:.75rem;font:inherit;border:1px solid #727285;border-radius:8px;background:white;color:#202033}form[data-littlereply] input[type=checkbox],form[data-littlereply] input[type=radio]{width:auto}form[data-littlereply] button{margin-top:1rem;padding:.8rem 1.1rem;font:inherit;font-weight:600;border:0;border-radius:8px;background:var(--form-accent,#4f46e5);color:white;cursor:pointer}form[data-littlereply] :focus-visible{outline:3px solid #f59e0b;outline-offset:3px}form[data-littlereply] button:disabled{opacity:.6}form[data-littlereply] [role=status]{min-height:1.6em}form[data-littlereply] fieldset{border:0;padding:0}form[data-littlereply] .privacy-notice{font-size:.875rem;color:#4b4b60}
form[data-littlereply]{--form-accent:#4f46e5;--form-ink:#ffffff}
form[data-littlereply] button{color:var(--form-ink)}form[data-littlereply] button[data-fq-back]{background:#eee;color:#202033}form[data-littlereply] [hidden]{display:none}</style></head><body>
<form action="https://littlereply.com/api/submit" method="POST" data-littlereply="YOUR_ACCESS_KEY" data-locale="en" data-success="Your quote request has been stored.">
  <input type="hidden" name="_fq_key" value="YOUR_ACCESS_KEY" />
  <input type="text" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" aria-hidden="true" />

<fieldset data-fq-step="0"><legend>Step 1 of 2</legend>
  <label for="fq_service">Service type *</label>
  <select name="service" id="fq_service" required><option value="">—</option><option>Construction and renovation</option><option>Website development</option><option>Consulting</option><option>Another service</option></select>

  <label for="fq_postal_code">Postal code (optional)</label>
  <input type="text" name="postal_code" id="fq_postal_code" autocomplete="postal-code" maxlength="20" />
  <small>Postal or ZIP code, if your address has one.</small>

  <label for="fq_message">Your project *</label>
  <textarea name="message" id="fq_message" required maxlength="5000" rows="5"></textarea>
</fieldset>
<fieldset data-fq-step="1"><legend>Step 2 of 2</legend>
  <label for="fq_name">Your name *</label>
  <input type="text" name="name" id="fq_name" required autocomplete="name" />

  <label for="fq_email">Your email address *</label>
  <input type="email" name="email" id="fq_email" required autocomplete="email" />

  <label for="fq_phone">Phone (optional)</label>
  <input type="tel" name="phone" id="fq_phone" autocomplete="tel" pattern="^\+?(?:[ \(\)\.\-]*[0-9]){7,15}[ \(\)\.\-]*$" maxlength="25" />
  <small>Example: +1 212 555 0123 or +33 6 12 34 56 78.</small>
</fieldset>

  <button type="submit">Send my quote request</button>
  <p role="status" aria-live="polite"></p>
</form>
<!-- Accessible AJAX errors and duplicate-safe retries -->
<script src="https://littlereply.com/client/v1.js" data-api="https://littlereply.com" defer></script>
</body></html>

Replace YOUR_ACCESS_KEY with your form's public key. The code includes its styles and an AJAX enhancement; the native HTML POST also works without JavaScript.

Install this template

  1. Continue validates the current step before changing screens.
  2. Back lets you correct the project without losing contact details.
  3. Without JavaScript, the HTML code shows both field groups on one page.
  4. Create your form using “Use this template”. Its fields and your customizations will carry over.
  5. Verify the recipient, publish the form, then replace the key in the copied code.
  6. Send an identified test and inspect the stored message and then its delivery.

Frequently asked questions

Is data sent at each step?

No. One request is sent when all steps have been validated.

Are fields validated on the server?

Yes, the published configuration is also checked by the backend.