HTML and CSS form field

Use the HTML field to display testimonials, banners or any static HTML and CSS. Customize your form's design beyond standard themes with custom code.

Looking to customize your form’s theme with CSS? Use Custom CSS instead:
Custom CSS
Custom CSS

How to use the HTML field

The HTML field lets you add a custom HTML block to any part of your form, including custom CSS and custom Javascript code.
πŸ“
Note: This feature is available on the Business and Enterprise plans. Learn more about our pricing plans and advanced features here.
Scroll down on the left-hand panel of your form and click or drag and drop the HTML field. Then, click the settings icon to make the HTML editor appear on the right-hand panel.
notion image
Β 
Write your HTML and CSS code on the right-hand side. The HTML will render within the field of your form. You can reposition it within your form just like any other field. Note that CSS will only be applied to the field itself.
notion image
Β 
You can also use logic to make HTML and CSS blocks appear only when relevant to a respondent's choice.
Β 

Custom scripts and iframes

The HTML block also supports scripts and iFrames. To support these, enable the Allow scripts and iFrames toggle.
Β 
Important: Scripts only run your published form, not in preview mode or in the editor. Go to the live mode of your form to test it out.
Β 
Furthermore, you will need to connect a custom domain for the scripts to run.
notion image
Β 
πŸ“
Note: Currently, the HTML block is not easily suitable for adding form inputs. For example, it can’t be used to create custom input fields.
Β 

HTML vs. CSS

HTML is the markup language used to structure content on the web. By writing HTML code for your form, you can control the layout of your form elements and add custom styles to make your form stand out.
Β 
On the other hand, CSS is the language used to style HTML content. By writing CSS code for your form, you can define the colors, fonts, and other visual properties of your form elements. This allows you to create a cohesive design that matches your brand identity, and makes your form look professional and polished.

Relevant articles:

πŸ™ˆ
Conditionally hide fields
Condition groups
Condition groups