JotForm User Guide / Advanced Features /

How to Inject CSS Codes to Widgets

How to Inject CSS Codes to Widgets

You know how to inject custom CSS codes to your form but did you know that Widgets have their own respective location for CSS code injection?

You may be wondering - "Why not just consolidate all of them in the CSS tab of the FORM DESIGNER?" And you're right, that would've have been way better. But, the reason is leaning more towards security concerns. Since widgets reside in their own respective iFrames, they are also 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. It is a critical security mechanism for isolating potentially malicious documents.

That's the reason why Widgets need to have their own option for CSS injection, and that's our topic for this guide. We can't cover all the widgets but the general idea should be the same for the rest.

Checklist Widget

Take Photo Widget

Image Slider Widget

Now, with just those 3 example widgets above, I bet you already got a hang of it. That's right - For any widget that you add, all you have to do is:

1. Open the Widget Wizard by clicking the WAND icon.

2. Go to the CUSTOM CSS tab and inject your codes.

3. Then hit the UPDATE WIDGET button to save your changes.

And that's about it!

Learned something from this guide? Let us know below. If you have a question, post them on our Support Forum so we can help.

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:
Contact JotForm Support:

Send Comment


  • easymovegta

    Hi I need help with changing SMS Confirmation Widget. I need it not to get cut off when viewed on a mobile phone.

    Here is a link to my site where it is displayed

    I also would like all of the boxes to be the same size. If you notice my E-mail Validator Widget will put the button below the box when on the iphone.

    I don't know any CSS coding so I am lost on how to make these changes. If you can also direct to place that can teach me how to make these changes that would be much appreciated.

  • bbcle

    I do not have a tab for CSS options on the Configurable List Widget

  • Katie Classon

    Hi I was wondering where I find all the ‘widget’ css codes? I want to centre my text in a spreadsheet and change the colour if possible?

  • Dannoriffo

    I do not see any Custom CSS fields in any widgets ?

    Please update this tutorial and explain how this is now done ?

    Thanks !

  • arizonacoalition

    How can I change the color of the "plus sign" to WHITE on the Field Multiplier Widget? I would also like to add a sub-label to this widget. Thank you!

  • kamuzu101

    Can you help me to configure CSS code for Take Photo Widget?
    I need to change the color to Green and the word Take Photo to Snap-in

  • AZDBAdesze

    Is there a way to customize the iframe embed widget to look & feel the way I want by adding CSS code? Need help!!!

  • laniraflar

    Can you help with configurable list widget css
    How can I control the fields width and margins, it seems that from the demo all the css commands are not effecting.

  • akkdio

    can you show how the code is entered? your css windows are blank. Is it just raw css like

    or are their special characters?

  • usman1205

    how can i add custom css form fields in infinite list widget?

  • floorcosts

    Is there a list with the names of the css fields that we can edit to change the look and feel of each element?