Developer Hooks

Developer Hooks let you run your own JavaScript at two points in the form lifecycle after the form is rendered, and after a successful submission.

Available on Pro+ plans.

Where to configure hooks

In the form builder → Settings → Advanced → Custom JavaScript:

• After Form Load JS runs once, after the form is fully rendered on the page
• After Form Submit JS runs once, after a successful form submission

Each form has its own JS hooks, so different forms can run different code.

After Form Load

Runs after the form HTML is injected into the DOM and is visible on the page.

Available context:

• The full DOM you can query and modify form elements
• window and any scripts already loaded on the page

Use cases:

• Pre-populate fields dynamically from localStorage or URL parameters
• Attach custom event listeners to form inputs
• Modify field labels or placeholder text based on context
• Integrate with third-party chat or analytics libraries

Example pre-fill a field from a URL parameter:

const params = new URLSearchParams(window.location.search);
const ref = params.get('ref');
if (ref) {
  const refField = document.querySelector('[name="Referral_Code"]');
  if (refField) refField.value = ref;
}

Example log form load to a custom analytics system:

myAnalytics.track('form_viewed', {
  form: 'Contact Form',
  page: window.location.pathname
});

After Form Submit

Runs after the server has accepted the submission and returned a success response.

Available context:

• response the server response object containing the submission data
• The full DOM and page context

Use cases:

• Fire Google Analytics or Meta Pixel events
• Send data to a custom tracking endpoint
• Show additional UI after submission
• Redirect to a custom URL with submission data in the query string

Example fire a Google Analytics 4 event:

gtag('event', 'form_submit', {
  form_name: 'Contact Form',
  response_id: response.id
});

Example fire a Meta Pixel event:

fbq('track', 'Lead', {
  content_name: 'Contact Form'
});

Example send data to a custom endpoint:

fetch('https://your-app.com/webhook', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    response_id: response.id,
    submitted_at: response.submitted_at
  })
});

The response object

In the After Form Submit hook, response contains:

{
  "id": "r_abc123",
  "form_id": "form_token_here",
  "status": "approved",
  "submitted_at": "2026-06-15T10:30:00Z",
  "fields": {
    "First Name": "Jane",
    "Email": "jane@example.com"
  }
}

Debugging hooks

Use your browser's DevTools Console (F12 → Console) to see any errors from your hook code. Errors in hook code do not prevent the form from working the hook runs after the core form logic completes.