How to Inject Custom CSS Codes

June 3, 2025

Jotform’s Form Builder comes with a built-in designer that helps you style your form without writing a single line of code. But if you want to go beyond the default options—whether it’s adjusting spacing, changing fonts, or hiding certain elements—you can inject your own CSS to take full control over the look and feel of your form.

Note

This guide is for applying CSS to Classic Forms. Injecting custom CSS code isn’t supported on Card Forms. If you need to switch layouts, check out our guide on How to Change Your Form Layout to learn more.


You can inject custom CSS codes into your form in a few easy steps. Here’s how to do it:

  1. On your My Workspace page, click on Type at the top and in the Dropdown menu that opens, uncheck the boxes next to all the assets except Forms, so only they’ll be shown on the page.
Forms option checked in the Type dropdown menu on the Jotform My Workspace page
  1. Hover your mouse over the form you want to add custom CSS to, and then click on Edit Form on the right side of the page.
Edit Form button of a form on the Jotform My Workspace page
  1. In Form Builder, click on the Paint Roller icon on the top-right side to open Form Designer.
Paint Roller icon in the Jotform Form Builder
  1. Now, under the Styles tab, scroll down to the Inject Custom CSS section, then enter or paste your CSS code into the code editor box. You can check out our guide on Customizing Your Form Using CSS Codes to see custom CSS code examples.
  2. Then, click on anywhere outside the code editor box to save your changes.
Inject custom CSS codes section in the Styles tab of the Form Designer window in the Jotform Form Builder

That’s it. Now, you can toggle On the Preview Form switch in the top-right corner of the page to open a live preview so you can see exactly how the form looks to users.

Preview Form Page of the Jotform Form Builder

Note

Custom CSS codes added to the Styles tab in Form Designer won’t work on most Form Widgets because they’re shown inside iframes. Check out our guide on How to Inject CSS Codes Into Widgets if you want to style your form widgets with CSS.

Contact Support

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

Send Comment:

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

Comments:

  • Roberto Falfan - Profile picture
  • Wanna Marrry Me - Profile picture
  • e-CARD registration - Profile picture
  • Kattsafe US - Profile picture
  • CFSSMarketing - Profile picture
  • Carillon Prod - Profile picture
  • JOY ADAMS - Profile picture
  • MOHD SYAHRIMAN BIN ABU BAKAR JAB. PENDAFTAR - Profile picture
  • Sabrina Molina - Profile picture
  • Dominique Poe - Profile picture
  • Larry917 - Profile picture
  • Natalie Broomfield - Profile picture
  • Math Minds - Profile picture
  • Stefanie Hibbert - Profile picture
  • Danielle Schaafsma - Profile picture
  • Vscore Inc - Profile picture
  • Justin Prank - Profile picture
  • Molnár Vilmos - Profile picture
  • GCT Webforms Admin - Profile picture
  • WA Senathissa - Profile picture
  • Mario anchondo teran - Profile picture
  • Sakinah - Profile picture
  • Arizona Youth and Government - Profile picture
  • Plovdiv Chamber PCCI - Profile picture
  • Marcriza Dispo (Ms. MC) - Profile picture