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>
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/
Updated on: 07/10/2025
Thank you!