> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.opnform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How do I add custom code to my form?

### Add custom code to your form

Inject your own HTML/JavaScript into your form. Code is injected into the page’s head and runs on the public form page.

### Requirements
* Pro plan
* **Your form needs to be using a Custom domain**

### Where your code runs
* Code executes on the public form page only.
* It won’t run in the editor; open the public form URL to preview.

### Add Custom Code
1. Open your form. Click edit to open the Form editor.
2. Go to Settings → Custom Code.
3. Paste your HTML/JS (use full tags like `<script>`, `<link>`, `<meta>`) and Save.
4. Visit your public form page to see the changes.

### Notes
* Use `async`/`defer` on external `<script>` tags to avoid blocking render.
* Only add trusted scripts (analytics, chat, etc.).
* For styling, prefer Custom CSS instead of `<style>` tags here.

### Code blocks (in-form HTML/JS)
* You can also insert a Code block in your form content to render custom HTML/JS in the page body.
* On Cloud, Code blocks also require a custom domain and Pro.

### Examples

Load Google Analytics (GA4):
```html
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){ dataLayer.push(arguments) }
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>
```

Add a live chat widget (example pattern):
```html
<script>
  (function () {
    var s = document.createElement('script');
    s.src = 'https://example-chat.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>
```

Simple inline script:
```html
<script>
  document.addEventListener('DOMContentLoaded', () => {
    console.log('Form loaded');
  });
</script>
```

### See also
* Style your form with Custom CSS (Pro): https://help.opnform.com/en/article/can-i-style-my-form-with-some-custom-css-code-1v3dlr9/