formclick.min.js

A tiny drop-in script that adds AJAX submits, loading states, inline messages and file uploads to your forms.

formclick.min.js upgrades every form whose action points at Formclick. Your HTML stays the same and still works if JavaScript is off.

HTML

<!-- Handles submit, file upload, loading state and success/error messages. -->
<script src="https://cdn.formclick.io/formclick.min.js"></script>

What it does

Submits in the background, so visitors stay on your page.
Disables the submit button while sending and adds the fc-btn-loading class.
Shows success and error messages inside the form, then resets it.
Follows redirects set with the redirect field or in the dashboard.
Turns file inputs into upload zones with drag and drop and progress bars.
Checks your access key and shows a clear configuration message if it is missing or malformed.
Watches the page for forms added later (modals, SPA routes) and enhances them automatically.
Works with captchas: checks that a reCAPTCHA or Turnstile widget is completed before sending, fetches reCAPTCHA v3 tokens, and resets the widget after each attempt.

yourwebsite.com/contact

Name

Jane Smith

you@example.com

Message

Write your message…

Send message

Thanks! Your message has been sent.

No page reload

Which forms are enhanced

Any <form> whose action starts with https://api.formclick.io/submit. Other forms on the page are left alone. Each form is enhanced once, even if the script is included twice.

The script reads the key from the hidden access_key field, so keep that field in the form even if you also put the key in the URL.

Form attributes

Attribute	Description
`data-success-msg`	Message shown after a successful submit. Overrides the default message.
`data-recaptcha-v3`	Your reCAPTCHA v3 site key. The script gets a fresh token right before each submit. See reCAPTCHA.

Events

Both events bubble, so you can listen on the form or on document.

Event	When	`event.detail`
`fc:success`	The submission was saved.	The JSON response, e.g. `{ success, message }`
`fc:error`	Validation, upload or network failure.	An `Error` with a readable `message`

JavaScript

document.addEventListener('fc:success', (e) => {
  // e.target is the form that was submitted
  gtag('event', 'generate_lead', { form: e.target.id });
});

JavaScript API

Method	Description
`Formclick.enhance(form)`	Enhance one form element right away.
`Formclick.reinit()`	Scan the page again for Formclick forms.
`Formclick.version`	The loaded version, e.g. `"2.1.0"`.

You rarely need these: new forms are picked up automatically. They help when you build a form in memory before attaching it to the page.

CSS classes

Class	Element
`.fc-form-msg`	The message box added to the form.
`.fc-msg-success` / `.fc-msg-error`	Success or error variant of the message.
`.fc-btn-loading`	Submit button while the form is sending.
`.fc-upload-zone`	File drop zone. Gets `.fc-drag-over`, `.fc-has-files` and `.fc-error-zone`.

Still need help? Contact support or email support@formclick.io.