Articles on: Working with OpnForm

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

Open your form. Click edit to open the Form editor.
Go to Settings → Custom Code.
Paste your HTML/JS (use full tags like <script>, <link>, <meta>) and Save.
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):

<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):

<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:

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