Feedback form

Give this to your agent

Add a short feedback form to my site with formto: a 1 to 5 rating (required), what worked, what to change and an optional email for a reply. 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>Feedback</h2>
  <fieldset>
    <legend>How was it?</legend>
      <label><input type="radio" name="rating" value="1" required> 1</label>
      <label><input type="radio" name="rating" value="2" required> 2</label>
      <label><input type="radio" name="rating" value="3" required> 3</label>
      <label><input type="radio" name="rating" value="4" required> 4</label>
      <label><input type="radio" name="rating" value="5" required> 5</label>
  </fieldset>
  <p>
    <label for="formto-liked">What worked well?</label>
    <textarea id="formto-liked" name="liked" maxlength="2000" rows="5"></textarea>
  </p>
  <p>
    <label for="formto-improve">What should we change?</label>
    <textarea id="formto-improve" name="improve" maxlength="2000" rows="5"></textarea>
  </p>
  <p>
    <label for="formto-email">Email (if you want a reply)</label>
    <input type="email" id="formto-email" name="email" autocomplete="email">
  </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": "Feedback",
  "fields": {
    "rating": {
      "type": "rating",
      "label": "How was it?",
      "required": true,
      "min": 1,
      "max": 5
    },
    "liked": {
      "type": "text",
      "label": "What worked well?",
      "maxLength": 2000
    },
    "improve": {
      "type": "text",
      "label": "What should we change?",
      "maxLength": 2000
    },
    "email": {
      "type": "email",
      "label": "Email (if you want a reply)"
    }
  },
  "fieldOrder": [
    "rating",
    "liked",
    "improve",
    "email"
  ],
  "submitter": {
    "emailField": "email"
  }
}