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

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

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


See also


Updated on: 07/10/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!