Survey form

Give this to your agent

Add a customer survey to my site with formto: their role (founder, developer, designer, marketer, agency or other), how often they use the product, which features they use, how likely they are to recommend it from 0 to 10, and comments. Generate the HTML with formto, then restyle it.

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>Survey</h2>
  <p>
    <label for="formto-role">Which best describes you?</label>
    <select id="formto-role" name="role" required>
      <option value="">Choose…</option>
      <option value="founder">Founder</option>
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="marketer">Marketer</option>
      <option value="agency">Agency</option>
      <option value="other">Other</option>
    </select>
  </p>
  <fieldset>
    <legend>How often do you use it?</legend>
      <label><input type="radio" name="frequency" value="daily"> Daily</label>
      <label><input type="radio" name="frequency" value="weekly"> Weekly</label>
      <label><input type="radio" name="frequency" value="monthly"> Monthly</label>
      <label><input type="radio" name="frequency" value="rarely"> Rarely</label>
  </fieldset>
  <fieldset>
    <legend>What do you use?</legend>
      <label><input type="checkbox" name="features" value="forms"> Forms</label>
      <label><input type="checkbox" name="features" value="email"> Email alerts</label>
      <label><input type="checkbox" name="features" value="webhooks"> Webhooks</label>
  </fieldset>
  <p>
    <label for="formto-recommend">How likely are you to recommend us?</label>
    <input type="number" id="formto-recommend" name="recommend" min="0" max="10" step="1" required>
  </p>
  <p>
    <label for="formto-comments">Anything else?</label>
    <textarea id="formto-comments" name="comments" 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": "Survey",
  "fields": {
    "role": {
      "type": "select",
      "label": "Which best describes you?",
      "required": true,
      "options": [
        {
          "value": "founder",
          "label": "Founder"
        },
        {
          "value": "developer",
          "label": "Developer"
        },
        {
          "value": "designer",
          "label": "Designer"
        },
        {
          "value": "marketer",
          "label": "Marketer"
        },
        {
          "value": "agency",
          "label": "Agency"
        },
        {
          "value": "other",
          "label": "Other"
        }
      ]
    },
    "frequency": {
      "type": "select",
      "label": "How often do you use it?",
      "options": [
        {
          "value": "daily",
          "label": "Daily"
        },
        {
          "value": "weekly",
          "label": "Weekly"
        },
        {
          "value": "monthly",
          "label": "Monthly"
        },
        {
          "value": "rarely",
          "label": "Rarely"
        }
      ]
    },
    "features": {
      "type": "multiselect",
      "label": "What do you use?",
      "options": [
        {
          "value": "forms",
          "label": "Forms"
        },
        {
          "value": "email",
          "label": "Email alerts"
        },
        {
          "value": "webhooks",
          "label": "Webhooks"
        }
      ]
    },
    "recommend": {
      "type": "scale",
      "label": "How likely are you to recommend us?",
      "required": true,
      "min": 0,
      "max": 10,
      "minLabel": "Not likely",
      "maxLabel": "Very likely"
    },
    "comments": {
      "type": "text",
      "label": "Anything else?",
      "maxLength": 5000
    }
  },
  "fieldOrder": [
    "role",
    "frequency",
    "features",
    "recommend",
    "comments"
  ]
}