Contact form

Give this to your agent

Add a contact form to my site with formto: name, email and message, all required. Generate the HTML with formto, put it on the contact page, then restyle it to match the site. Keep the field names and the hidden _gotcha field.

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>Contact</h2>
  <p>
    <label for="formto-name">Name</label>
    <input type="text" id="formto-name" name="name" maxlength="200" 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-message">Message</label>
    <textarea id="formto-message" name="message" maxlength="5000" rows="5" required></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": "Contact",
  "fields": {
    "name": {
      "type": "string",
      "label": "Name",
      "required": true,
      "maxLength": 200
    },
    "email": {
      "type": "email",
      "label": "Email",
      "required": true
    },
    "message": {
      "type": "text",
      "label": "Message",
      "required": true,
      "maxLength": 5000
    }
  },
  "fieldOrder": [
    "name",
    "email",
    "message"
  ],
  "submitter": {
    "emailField": "email",
    "nameField": "name"
  }
}