Custom Code in Reform
Reform gives you the power to extend and fine-tune your forms using custom code. Whether you're looking to add event handlers, inject custom styles, or create unique experiences, this page serves as your starting point. Below, you'll find links to all relevant documentation on using code in Reform.
Note: Custom code features are only available on the Pro plan
Code Customization Options
1. Form Event Handlers
Add custom JavaScript in the form builder to handle user actions like input, page changes, or submissions. Learn more from the guide below
Available events include: onFormLoaded , onInput , onPageSubmitted , onValidationFailed , onPageChanged , onFormCompleted
2. Parent Page Events
Want to listen for form events on the page that embeds your form? This guide explains how to use Reform’s event system to connect with your site.
Ideal for tracking events from embedded forms using postMessage. Supported events include: onFormLoaded , onInputChanged , onPageSubmitted , onPageChanged , onFormCompleted , and onPageResized .
3. Custom CSS
Style your form exactly how you want using custom CSS code. Full control over fonts, colors, spacing, layout, and interactivity. This allows you to override default styles and create a consistent look with your brand.
Custom CSS Includes setup instructions and CSS targeting tips.
There are two levels of CSS:
- Brand CSS (set at the team level) applies to all forms by default.
- Form CSS (set per form) lets you override or supplement brand styles. Form CSS takes precedence over Brand CSS.
Accessing Custom Code
To unlock the ability to add JavaScript and custom CSS, please make sure your workspace is on the Pro plan. You can upgrade your plan at any time.
If you're experiencing issues or have questions, please contact us at [email protected]. We're here to assist you!