How to build a quote request form for your website

A quote request form tells you more than a contact form: what the customer needs, the budget and the deadline. You’ll build one in plain HTML, get every request as a clearly laid-out email and send the customer an automatic “we’ve got it” reply.

You need: a free Frontmail account and about fifteen minutes.

1. Connect your mailbox

In Email services → Add service, connect Gmail, Outlook, an SMTP server or a transactional provider, tick Make default and click Verify & save.

2. Create the quote request template

1. Open Templates → From gallery and pick Quote request (category Business).
2. Click Use template. The request goes to your address; Reply-To is the customer.

The template has these parameters:

Parameter	Type	Required	Notes
name	string	yes
email	email	yes
phone	string	no
company	string	no
service	enum	yes	one of the values listed on the Parameters tab
budget	enum	no	one of the values listed on the Parameters tab
deadline	date	no	YYYY-MM-DD, exactly what <input type="date"> sends
details	text	yes	at least 10 characters

service and budget accept only their listed values. The gallery template in English offers Website, E-shop, Mobile app, Consulting, Other and Under $5k, $5k–20k, $20k–50k, Over $50k – change them on the Parameters tab to match what you sell, and use the same values in your form.

3. Add an automatic confirmation

1. Templates → From gallery → Auto-reply: thanks for your message → Use template.
2. On its Parameters tab set default values for company_name (your company) and response_time (for example within one business day). Save.
3. Open the quote request template → Settings → Delivery and choose the new template as Auto-reply template. Save.

Now one submission sends two emails: the request to you and the confirmation to the customer. The auto-reply can only ever be triggered by your own form, so nobody can abuse it to email strangers.

4. Allow your website

In Security, add your domain under Allowed websites and Save. Then protect the form against bots: create a free Cloudflare Turnstile widget, paste its keys into Security → Bot protection and turn on the CAPTCHA for all templates.

5. Add the form

Use your public key and the template ID from the Snippets tab:

<form id="quote">
  <label>Name <input name="name" required /></label>
  <label>Email <input name="email" type="email" required /></label>
  <label>Company <input name="company" /></label>
  <label>What do you need?
    <select name="service" required>
      <option>Website</option>
      <option>E-shop</option>
      <option>Mobile app</option>
      <option>Consulting</option>
      <option>Other</option>
    </select>
  </label>
  <label>Budget
    <select name="budget">
      <option value="">Not sure yet</option>
      <option>Under $5k</option>
      <option>$5k–20k</option>
      <option>$20k–50k</option>
      <option>Over $50k</option>
    </select>
  </label>
  <label>Deadline <input name="deadline" type="date" /></label>
  <label>Project details <textarea name="details" required minlength="10"></textarea></label>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Request a quote</button>
  <p id="quote-status" role="status"></p>
</form>

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<script
  src="https://cdn.jsdelivr.net/npm/@frontmail/browser@0.1.0/dist/frontmail.umd.js"
  integrity="sha384-g2Rxznkz2yb/YYSdVTkXLxZFZ2Nh2+XdhPStxh0stydXFF3gYjDuyHimWIZLJDCc"
  crossorigin="anonymous"></script>
<script>
  frontmail.init({ publicKey: 'pk_…' });
  const form = document.getElementById('quote');
  const status = document.getElementById('quote-status');
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    status.textContent = 'Sending…';
    try {
      await frontmail.sendForm(null, 'tpl_…', form);
      status.textContent = 'Thanks! Check your inbox – we’ve sent you a confirmation.';
      form.reset();
    } catch (err) {
      status.textContent = 'Sorry, that didn’t work: ' + err.message;
    } finally {
      window.turnstile?.reset();
    }
  });
</script>

Empty optional fields (an unselected budget, no deadline) simply disappear from the email.

6. Test it

Send a test request with your own address in the Email field. You should receive the request and, a moment later, the confirmation. Both appear in History, each with its own timeline.

Every email uses one credit, so a request with an auto-reply costs two. If your credits run out in a busy season, requests wait in the hold queue and go out as soon as you top up – none is lost.

Next steps

• Save every customer to Contacts: the template already maps email, name and company; turn on contact collection in the template Settings.
• Want the request in the customer’s language? Add a language variant of the template and send the form with a hidden fm_locale field (for example de).