User Guide

 

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.

Send Comment

2 Comments...

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