FormRill
  1. Docs
  2. Reference

formrill.js

An optional, dependency-free script that adds funnel analytics and address validation to any form posting to FormRill. Your form works without it.

Funnel analytics and the validation script are Pro features, free during the beta.

Install

Add one tag anywhere on the page, usually right before </body>:

<script src="https://api.formrill.com/js/formrill.js" defer></script>

It finds every form whose action is a FormRill form URL (ending in /YOUR_FORM_ID/submit) and sets each one up. Forms that post elsewhere are left alone. It sets no cookies and stores nothing in the browser.

Funnel analytics

The script reports two events per page load, keyed by a random ID that lives only as long as the page:

view
The form was on the page when it loaded.
start
The visitor focused any field in the form, counted once.

Submissions are counted on the server, so the third step needs no script. The form’s Analytics tab shows views, starts and submissions for the last 30 days, with the drop-off between each step. Events go out with navigator.sendBeacon, so they never delay the page or the submit.

Validation

Add data-validate to an input. The script checks the value as the visitor types and again on submit, and shows any error through the browser’s built-in validation UI. Empty fields are skipped; add required if the field must be filled.

data-validate values
AttributeAccepts
data-validate="pincode"A 6-digit Indian PIN code that doesn’t start with 0.
data-validate="zip"A US ZIP code: 12345 or 12345-6789.
data-validate="postal"A postal code for the chosen country. Exact patterns for IN, US, GB, CA, AU and DE; any other country accepts 3–10 letters, digits, spaces or hyphens.
data-validate="country"A country name in English or a two-letter code, such as Germany or DE.
data-validate="state"A US state (name or code like CA) or an Indian state or union territory. Other countries are not checked.

Where the country comes from

postal and state need a country. The script uses, in order:

  1. a data-country attribute on the input, such as data-country="GB";
  2. the value of a field named country in the same form.
<form method="POST" action="https://api.formrill.com/YOUR_FORM_ID/submit">
  <input type="checkbox" name="botcheck" hidden />
  <input name="name" required />
  <input type="email" name="email" required />

  <select name="country">
    <option>India</option>
    <option>United States</option>
  </select>
  <input name="state" data-validate="state" />
  <input name="postcode" data-validate="postal" />

  <button>Send</button>
</form>
<script src="https://api.formrill.com/js/formrill.js" defer></script>

For a single-country form, skip the select and pin it: <input name="pin" data-validate="postal" data-country="IN" />.

Validation is a convenience, not a security control. It runs in the visitor’s browser, so it stops typos, not determined bots. The honeypot and domain whitelist protect the endpoint itself; see the API reference.

Hosted pages

The hosted form page at https://api.formrill.com/f/YOUR_FORM_ID already includes the script, so its analytics work with no setup.

Get the form ID formrill.js needs

Free up to 500 submissions a month and unlimited forms. No server, no credit card.

Start free

Related

Last updated