How to Inject Custom CSS Codes

February 6, 2023

Form Builder has a built-in form designer that you can use to make your form look exactly how you want it to without coding. Custom CSS codes are also supported if you’re looking for more customization options.

Note

This guide is for applying CSS to Classic forms. Custom CSS is not supported on Card forms. To learn more, see Changing Form Layout.

Here’s how to add custom CSS to your Classic form:

  1. In Form Builder, click on the paint roller icon in the upper-right corner to open Form Designer.
A screenshot of Form Builder with an arrow pointing to the paint roller icon -- to open Form Designer.
  1. In Form Designer, choose Styles at the top.
A screenshot of Form Builder with an arrow pointing to the Styles tab in the Form Designer pane.
  1. Scroll down to Inject Custom CSS and enter your CSS code in the textarea.
  2. Once you’re done, click on Save at the bottom.
A screenshot of the Form Designer pane in Form Builder highlighting the Inject Custom CSS textarea and Save button.

Remember to view your form in Preview or Live mode to check how your form fillers see your form.

You can find custom CSS code examples in this guide. For applying CSS codes to widgets, see How to Inject CSS Codes Into Widgets.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: