Quote request form

Give this to your agent

Add a quote request form to my services page with formto: name, email, an optional phone number, the service they want (mowing, hedge trimming, leaf cleanup or something else), their address and details. Generate the HTML with formto, then restyle it to match the site.

Or paste the HTML

Replace YOUR_FORM_ID with your form’s public id (from npx -y https://formto.io/dl/cli-latest.tgz init or the dashboard), then restyle it. Keep the field names and the hidden _gotcha field.

<form id="formto-form" action="https://api.formto.io/f/YOUR_FORM_ID" method="post" enctype="application/x-www-form-urlencoded">
  <h2>Quote request</h2>
  <p>
    <label for="formto-name">Your name</label>
    <input type="text" id="formto-name" name="name" required>
  </p>
  <p>
    <label for="formto-email">Email</label>
    <input type="email" id="formto-email" name="email" autocomplete="email" required>
  </p>
  <p>
    <label for="formto-phone">Phone</label>
    <input type="tel" id="formto-phone" name="phone" autocomplete="tel">
  </p>
  <fieldset>
    <legend>Service</legend>
      <label><input type="radio" name="service" value="mowing" required> Mowing</label>
      <label><input type="radio" name="service" value="hedges" required> Hedge trimming</label>
      <label><input type="radio" name="service" value="leaves" required> Leaf cleanup</label>
      <label><input type="radio" name="service" value="other" required> Something else</label>
  </fieldset>
  <p>
    <label for="formto-address">Address</label>
    <input type="text" id="formto-address" name="address">
  </p>
  <p>
    <label for="formto-details">What do you need?</label>
    <textarea id="formto-details" name="details" maxlength="5000" rows="5"></textarea>
  </p>
  <!-- Spam trap: people never see or fill this field. -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-10000px">
  <button type="submit">Send</button>
  <p data-formto-status role="status" aria-live="polite"></p>
</form>
<script>
  // Progressive enhancement: without JavaScript the form above posts natively.
  ;(function () {
    var form = document.getElementById('formto-form')
    if (!form || !window.fetch || !window.FormData) return
    form.addEventListener('submit', function (event) {
      event.preventDefault()
      var status = form.querySelector('[data-formto-status]')
      var button = form.querySelector('button[type=submit]')
      button.disabled = true
      fetch(form.action, { method: 'POST', body: new FormData(form), headers: { Accept: 'application/json' } })
        .then(function (res) {
          return res.json().then(function (body) {
            if (!res.ok || !body.success) throw new Error(body.error || 'Something went wrong. Please try again.')
            form.reset()
            status.textContent = 'Thanks, we got it.'
          })
        })
        .catch(function (err) {
          status.textContent = err.message || 'Could not send. Please try again.'
        })
        .finally(function () {
          button.disabled = false
        })
    })
  })()
</script>

The field definition

{
  "version": 2,
  "title": "Quote request",
  "fields": {
    "name": {
      "type": "string",
      "label": "Your name",
      "required": true
    },
    "email": {
      "type": "email",
      "label": "Email",
      "required": true
    },
    "phone": {
      "type": "phone",
      "label": "Phone"
    },
    "service": {
      "type": "select",
      "label": "Service",
      "required": true,
      "options": [
        {
          "value": "mowing",
          "label": "Mowing"
        },
        {
          "value": "hedges",
          "label": "Hedge trimming"
        },
        {
          "value": "leaves",
          "label": "Leaf cleanup"
        },
        {
          "value": "other",
          "label": "Something else"
        }
      ]
    },
    "address": {
      "type": "string",
      "label": "Address"
    },
    "details": {
      "type": "text",
      "label": "What do you need?",
      "maxLength": 5000
    }
  },
  "fieldOrder": [
    "name",
    "email",
    "phone",
    "service",
    "address",
    "details"
  ],
  "submitter": {
    "emailField": "email",
    "nameField": "name"
  }
}