Quote request form template

03 / Make it yours

Choose your stack. Copy your form.

Replace the example endpoint with your Formward endpoint, then adapt the fields to your needs.

<form action="https://forms.formward.eu/f/your-form-id" method="POST">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" required />
  <label for="email">Email</label>
  <input type="email" name="email" id="email" required />
  <label for="company">Company</label>
  <input type="text" name="company" id="company" />
  <label for="service">What do you need?</label>
  <select name="service" id="service" required>
    <option value="Design">Design</option>
    <option value="Development">Development</option>
    <option value="Consulting">Consulting</option>
    <option value="Something else">Something else</option>
  </select>
  <label for="budget">Budget range</label>
  <select name="budget" id="budget">
    <option value="Under €1,000">Under €1,000</option>
    <option value="€1,000 to €5,000">€1,000 to €5,000</option>
    <option value="€5,000 to €20,000">€5,000 to €20,000</option>
    <option value="Over €20,000">Over €20,000</option>
    <option value="Not sure yet">Not sure yet</option>
  </select>
  <label for="deadline">When do you need it?</label>
  <input type="date" name="deadline" id="deadline" />
  <label for="details">Tell us about the project</label>
  <small id="details-help">Scope, quantities or links to examples help us give an accurate quote.</small>
  <textarea name="details" id="details" aria-describedby="details-help" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
  <button type="submit">Send</button>
</form>

Accessibility

Accessible by default, and how to keep it that way

• Every field in the code has a visible label tied to it with for and id, so screen readers announce what to enter and a click on the label focuses the field.
• Required fields carry the required attribute, so the browser explains a missing answer before anything is sent. Say “required” in words as well; an asterisk or a colour alone is easy to miss.
• The spam trap field (_gotcha) is hidden from screen readers with aria-hidden and skipped by the Tab key, so people never meet it.
• In the JavaScript versions, show the confirmation or error in an element with role="status" so the result is announced, and keep the entered answers when sending fails.

Changed the fields? Paste your version into the HTML form tester to see exactly what it sends, or run it through the GDPR form checker.

04 / Implementation

How the code talks to Formward

Next.js client component

Copy"use client";

import { useState } from "react";

export function QuoteRequestForm() {
  const [sent, setSent] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const res = await fetch("https://forms.formward.eu/f/your-form-id", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    if (res.ok) {
      setSent(true);
      form.reset();
    }
  }

  if (sent) return <p>Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={onSubmit}>
      <label htmlFor="name">Name</label>
      <input type="text" name="name" id="name" required />
      <label htmlFor="email">Email</label>
      <input type="email" name="email" id="email" required />
      <label htmlFor="company">Company</label>
      <input type="text" name="company" id="company" />
      <label htmlFor="service">What do you need?</label>
      <select name="service" id="service" required>
        <option value="Design">Design</option>
        <option value="Development">Development</option>
        <option value="Consulting">Consulting</option>
        <option value="Something else">Something else</option>
      </select>
      <label htmlFor="budget">Budget range</label>
      <select name="budget" id="budget">
        <option value="Under €1,000">Under €1,000</option>
        <option value="€1,000 to €5,000">€1,000 to €5,000</option>
        <option value="€5,000 to €20,000">€5,000 to €20,000</option>
        <option value="Over €20,000">Over €20,000</option>
        <option value="Not sure yet">Not sure yet</option>
      </select>
      <label htmlFor="deadline">When do you need it?</label>
      <input type="date" name="deadline" id="deadline" />
      <label htmlFor="details">Tell us about the project</label>
      <small id="details-help">Scope, quantities or links to examples help us give an accurate quote.</small>
      <textarea name="details" id="details" aria-describedby="details-help" required />
      <input
        type="text"
        name="_gotcha"
        tabIndex={-1}
        autoComplete="off"
        style={{ position: "absolute", left: "-9999px" }}
        aria-hidden="true"
      />
      <button type="submit">Send</button>
    </form>
  );
}

Questions

Can the quote form ask one step at a time?

Yes, as a Formward hosted page. In the page editor, pick the Quote Request template, which asks one question at a time, or set the form's presentation to Sections and add section dividers to split it into steps with a progress bar. As HTML on your own site the form stays on one page unless you add your own step script.

Should a quote form ask for a budget?

Ask, but make it optional and offer ranges with a Not sure yet choice. A required budget field makes some people leave, and an open number field gets you guesses.

Can people attach drawings or a brief?

Yes, with a file field and the Professional plan or above. On other plans, ask for a link to the files in the details field.

Related

• Lead generation

  UTM source and lead scores on every request.

• Contact sales template

  For a sales conversation rather than a priced job.

• Order templates

  Fixed products and quantities.

• Privacy notice for forms

  What to tell people who ask for a quote.

• Next.js forms

  The form as a client component.