> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orbitforms.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom JavaScript

> Add custom tracking scripts, events, or any code to your forms

<Note>
  Custom JavaScript is available on all plans, including **Free**.
</Note>

## Start Here

### Overview

The Custom JavaScript feature allows you to add any JavaScript code to your forms. Use it for
custom analytics events, third-party integrations, A/B testing scripts, or any other functionality
that requires JavaScript.

### Why This Matters

Sometimes you need tracking or functionality that's specific to your stack. Custom JavaScript gives you
full control to add any code to your forms—fire custom conversion events, load third-party widgets, or
implement advanced tracking that built-in integrations don't cover.

## Use Cases

<CardGroup cols={2}>
  <Card title="Custom Events" icon="bullseye">
    Fire custom Meta Pixel, GA4, or other tracking events
  </Card>

  <Card title="Third-Party Scripts" icon="bolt">
    Add chat widgets, heatmaps, or A/B testing
  </Card>

  <Card title="Custom Logic" icon="gear">
    Run code when the form loads or on user actions
  </Card>

  <Card title="Advanced Tracking" icon="shield">
    Implement custom conversion tracking
  </Card>
</CardGroup>

## Setup Guide

<Steps>
  <Step title="Open your form settings">
    Go to your form in the dashboard and click on the "Integrate" tab.

    `Forms → Select form → Integrate tab`
  </Step>

  <Step title="Find Custom JavaScript">
    Scroll down to the Custom JavaScript section under Tracking & Analytics.

    `Scroll to "Custom JavaScript" section`
  </Step>

  <Step title="Enter your code">
    Paste your JavaScript code into the text area. The code will execute when the form loads.

    `Paste code into text area`
  </Step>

  <Step title="Save your changes">
    Click Save. Your custom JavaScript will now run on your form.

    `Click "Save" button`
  </Step>
</Steps>

## Code Examples

### Meta Pixel Custom Event

Fire a Lead event with custom parameters:

```javascript theme={null}
// Track a Lead event with value
if (typeof fbq !== 'undefined') {
  fbq('track', 'Lead', {
    content_name: 'Contact Form',
    value: 50.00,
    currency: 'USD'
  });
}
```

### Google Analytics Custom Event

Send a custom event to GA4:

```javascript theme={null}
// Track a custom event
if (typeof gtag !== 'undefined') {
  gtag('event', 'form_interaction', {
    form_name: 'Contact Form',
    form_location: 'homepage'
  });
}
```

### Debug Logging

Log when the form loads (for testing):

```javascript theme={null}
// Debug: Log form load
console.log('Orbit form loaded at:', new Date().toISOString());
console.log('Page URL:', window.location.href);
```

### Load Third-Party Script

Dynamically load an external script:

```javascript theme={null}
// Load a third-party script
(function() {
  var script = document.createElement('script');
  script.src = 'https://example.com/widget.js';
  script.async = true;
  document.head.appendChild(script);
})();
```

## Important Notes

<Warning>
  **Avoid duplicate tracking** — If you're adding Meta Pixel or GA4 via Custom JavaScript, don't also enable them in the
  built-in integration fields above. This will cause duplicate events.
</Warning>

<Info>
  **When code runs** — Custom JavaScript executes when the form page loads. If you need to run code on form submission,
  consider using webhooks or workflows instead.
</Info>

<Warning>
  **Security** — Only add JavaScript from sources you trust. Malicious code could affect your form's
  functionality or compromise user data.
</Warning>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Code not running?">
    Open browser developer tools (F12) and check the Console tab for errors. Syntax errors will
    prevent your code from executing.
  </Accordion>

  <Accordion title="Third-party function not defined?">
    If you're calling functions like `fbq` or `gtag`,
    make sure the corresponding integration (Meta Pixel, GA4) is also enabled, or load the script first.
  </Accordion>

  <Accordion title="Debugging tips">
    Use `console.log()` statements
    to verify your code is running and inspect variable values in the browser console.
  </Accordion>
</AccordionGroup>

## Best Practices

* Always test your code on a test form before applying to production
* Use try/catch blocks to prevent errors from breaking your form
* Check if third-party functions exist before calling them
* Keep your code minimal - complex scripts may slow down form loading
* Document your code with comments for future reference

***

## Ready to Add Custom Tracking?

Add custom JavaScript to your forms and unlock unlimited tracking possibilities.

[Get Started →](https://orbitforms.ai/signin)