How to Inject CSS Codes to Widgets

August 11, 2022

In Jotform Form Builder, you can inject custom CSS codes to customize your form. You can do the same to widgets.

Note

This feature is only available in the Classic Form layout. For more information, see: Cards or Classic: Which One Should I Use?

Here’s how:

  1. Click the wand icon to open the Widget Settings panel.
  2. Go to the Custom CSS tab.
  3. Enter your CSS code in the textarea.
  4. Click the Update Widget button to save the changes.
form-builder-configurable-list-css-min.png

The reason why widgets need to have their own option for CSS injection is that they reside in their own respective iframes and are restricted by the same-origin policy. The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin.

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:

  • Florida Gourd Society
  • Ezp
  • Virtual Studio
  • Gretchen k Nielsen
  • Andrew J Scott
  • jtr takhassusat
  • plinx100
  • easymovegta
  • bbcle
  • Katie Classon
  • Dannoriffo
  • arizonacoalition
  • kamuzu101
  • AZDBAdesze
  • laniraflar
  • akkdio
  • BMS_Admin
  • Stewardly
  • Jay Hobbs
  • usman1205
  • floorcosts