# Handle form events
Makeform embed events let you track form readiness, submissions, and popup or slider opening and closing for free on every plan. Get your form embed from **Share** > **Embed Form**, then enable events in your website code.
Makeform is a free AI form builder: describe what you want to collect and it builds the form for you, with unlimited forms and submissions on the free plan.
:::callout{type="success"}
Embed events are available for **free** to all Makeform users.
:::
---
## Event layers
Makeform uses two event layers:
| Layer | Who uses it | How to listen |
| ------------------ | ----------------------------------- | ----------------------------------------------------- |
| SDK CustomEvents | Most website analytics and app code | `window.addEventListener('MakeForm:submit', handler)` |
| iframe postMessage | Advanced integrations and debugging | `window.addEventListener('message', handler)` |
For most websites, use SDK CustomEvents. The SDK validates the iframe source and converts Makeform iframe messages into simpler `MakeForm:*` events when you opt in.
---
## Enable events
### Standard embed
Add **data-makeform-events** to the iframe:
```html copy
```
Standard embeds dispatch `MakeForm:ready` and `MakeForm:submit`.
### Popup and slider
For data-attribute triggers, add **data-makeform-events** to the trigger:
```html copy
```
For the JavaScript API, set `dispatchEvents: true`:
```javascript copy
MakeForm.openPopup("YOUR_FORM_ID", {
dispatchEvents: true
});
```
Popup and slider embeds can dispatch `MakeForm:open`, `MakeForm:ready`, `MakeForm:submit`, and `MakeForm:close`.
### Full page embed
Full page embeds use `/f/{FORM_ID}`. To emit submission events, append `__mf_emitEvents=1`, use `data-makeform-src`, and add `data-makeform-events`:
```html copy
```
---
## SDK CustomEvents
### MakeForm\:ready
Fires when the form iframe reports that it has loaded.
```javascript copy
window.addEventListener("MakeForm:ready", (event) => {
console.log("Ready:", event.detail.formId);
});
```
### MakeForm\:submit
Fires when the form is successfully submitted.
```javascript copy
window.addEventListener("MakeForm:submit", (event) => {
console.log("Submitted form:", event.detail.formId);
console.log("Submission data:", event.detail.data);
});
```
### MakeForm\:open
Fires when a popup or slider opens.
```javascript copy
window.addEventListener("MakeForm:open", (event) => {
console.log("Opened:", event.detail.formId);
});
```
### MakeForm\:close
Fires when a popup or slider closes.
```javascript copy
window.addEventListener("MakeForm:close", (event) => {
console.log("Closed:", event.detail.formId);
});
```
---
## PostMessage events
The form iframe sends `postMessage` payloads to its parent window. These are useful if you are building a custom wrapper around the embed SDK.
### MakeForm.Loaded
```json
{
"type": "MakeForm.Loaded",
"payload": {}
}
```
### MakeForm.SubmitSuccess
```json
{
"type": "MakeForm.SubmitSuccess",
"payload": {
"Name": "Jane Doe",
"Email": "jane@example.com"
}
}
```
### Internal layout messages
The SDK also listens for these iframe messages:
| Event | Purpose |
| ----------------------------- | ---------------------------------------------------------------------------------- |
| `MakeForm.SetHeight` | Auto-resizes standard embeds and popup height. Payload shape: `{ "height": 640 }`. |
| `MakeForm.LayoutReady` | Reveals popups only after the first stable layout height is available. |
| `MakeForm.SetBackgroundColor` | Syncs modal background color with the form background. |
| `MakeForm.Submitted` | Payload-free submit signal used for safe auto-close on `/f` popup embeds. |
:::callout{type="info"}
Treat layout messages as SDK internals. For analytics and product logic, prefer `MakeForm:ready`, `MakeForm:submit`, `MakeForm:open`, and `MakeForm:close`.
:::
---
## Complete examples
:::code-tabs
```javascript filename="events.js" copy
window.addEventListener("MakeForm:ready", (event) => {
console.log("Form ready:", event.detail.formId);
});
window.addEventListener("MakeForm:submit", (event) => {
console.log("Submitted:", event.detail.formId, event.detail.data);
});
window.addEventListener("MakeForm:open", (event) => {
console.log("Modal opened:", event.detail.formId);
});
window.addEventListener("MakeForm:close", (event) => {
console.log("Modal closed:", event.detail.formId);
});
```
```typescript filename="events.ts" copy
type MakeFormEventDetail = {
formId: string;
data?: Record;
};
const onSubmit = (event: Event) => {
const detail = (event as CustomEvent).detail;
console.log("Submitted:", detail.formId, detail.data);
};
window.addEventListener("MakeForm:submit", onSubmit);
```
```tsx filename="EmbeddedForm.tsx" copy
'use client';
import Script from 'next/script';
import { useEffect } from 'react';
export function EmbeddedForm({ formId }: { formId: string }) {
useEffect(() => {
const handleSubmit = (event: Event) => {
const detail = (event as CustomEvent).detail;
console.log('Submitted:', detail.formId, detail.data);
};
window.addEventListener('MakeForm:submit', handleSubmit);
return () => window.removeEventListener('MakeForm:submit', handleSubmit);
}, []);
return (
<>