How do I add custom code to my form?

Custom code is only accessible to Pro subscribers.

One of customization feature is the injection of custom code within your forms.

There's no limit on what you can do with your own CSS and your own scripts.

You can add an analytics script or even a live chat on your form page.

To add custom code:

Log into OpnForm and enter your form's editor:



Scroll down on the left-side panel until you find the custom code section. Add your code in the box and save your changes.



Code changes and previews will only be shown on the public page of your form. Changes won't be shown when you are in editor mode.


Here's a first example you can use to center your logo on a form page:

<style>img.w-20.h-20.absolute.left-5.top-5 { left: 50% !important; transform: translateX(-50%); } </style>

Here’s another example to increase the size of the text input field.

<style> textarea{  height:120px; } </style>

Here’s another example to change the page background color:

<style>#app, nav.bg-white { background-color: blue !important; } </style>

Here's another more advanced code sample that can be used to customize the appearance of the form, by applying new CSS rules:

<style> body h1, body p, body input, body label { font-family: Lato, sans-serif !important; } label.font-bold { font-weight: 500! important; } .rounded-lg { border-radius: 4px !important; } .relative.mb-3 { margin-top: 30px; } .shadow-sm { box-shadow: none !important; } .border { border-color: #b8bdc9 !important; } </style>

Updated on: 30/05/2024