# formclick.min.js

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

Source: https://docs.formclick.io/html-forms/formclick-js

`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.

_Animation: with formclick.min.js the form submits in the background, the button shows "Sending…", then an inline success message appears and the form resets._

## 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.

> **Warning:** 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](https://docs.formclick.io/html-forms/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` |

```js
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"`. |

> **Tip:** 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`. |