How to Inject CSS Codes to Widgets

September 19, 2021

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?

Note that this method applies to our Classic Form layout only.
The Card Form layout doesn’t have a Custom CSS tab for the widgets.
Related guide: Cards or Classic: Which One Should I Use?

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 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

Checklist Widget

The following custom CSS codes will change the color of the font and remove the border of the widget:

.checklist label {
color: #3522d8;
}
ul#checklist {
border: none;
}

Take Photo Widget

Take Photo Widget

The following custom CSS codes will change the background color of the buttons of the widget:

#takePhoto {
background-color: #295cc1;
}
#removebutton #retake_photo {
background-color: #295cc1;
}
#startbutton #take_photo {
background-color: #295cc1;
}

Image Slider Widget

Image Slider Widget

The following custom CSS codes will remove the eye icon for the active image and change the overlay color:

.j-slider-footer-item-overlay {
background-color: rgb(253 77 86 / 28%);
}
i.gg-eye-alt {
display: none;
}

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 Settings 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.
Checklist Widget

And that’s about it!

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: