Browse Article by Topicswidgets adding widgets how to add widgets widget adding a widget to a form how do i add a widget how to use widgets using widgets jotform widge
- How to Add Custom Unique IDs to your Form Submissions?
- How to Add a Widget to your Form?
- How to Perform Form Calculation Using a Widget
- How to Set Up the Configurable List Widget
- How to Create File Upload Forms
Related Forum Questions
- Image Picker : Images shown in different order than the widget order
- Progress Bar Widget: Take a photo widget can't draw back after cleared.
- Could not access microphone: NotSupportedError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)
- Conditional Logic - Payment Types
- Preview Before Submit widget: Sub products with 0 quantity are not being hidden
- Where can I find a user guide to the dynamic dropdown widget.
- Youtube widget device app not supported
- How to capture referral URL for form embedded with iFrame?
- Shuffle widget: Fields are not shuffled if page break is added
- How to make the configurable list widget hold in two rows
How to Add a Widget to your Form?Last Update: March 22, 2016
There have always been forms, then there have always been ways make forms more advanced. The problem is that there was never really ever a way to mesh the two together very well to connect one to the other.
As a result, we've created JotForm Widgets as a way to help cut out the middle-man thus breaking down the previous walls that built unexpected limitations. The purpose of this now allows you to do things on your forms that you wouldn't think of as normally being possible. It shortcut's your work and makes things less complex.
Think of it as a way to expand your forms making them smarter and better than ever before!
So now the question is, " How Do I Add some Widget(s) to My Form? "
The very first step before you consider adding any widgets is to make sure that you have a ready-to-go form. If you are unsure then just Imagine what type of form you will be making then you will be ready to continue on...
If you expand Widgets on the left side panel of your form builder page, you will see that you can choose from the list of widgets that are highly used or that you have just used recently on your form(s). A search bar is also provided so it will also be easy to find a specific widget that you want to have on your form, you'll just have to type in a keyword.
Should that not be enough then you can alternatively look through our Widget Library of more than 370+ Widgets for your usage. This Library gives a much larger, visual, and detailed explanation of All of our Widgets which can be found.
To add the widgets to your form, you can click it from the list or once it appears on the list after utilizing "Search Widgets". Or, you can, also, drag and drop it to the area where fields are added.
Upon adding the widget to your form, the Widget wizard appears. In the General tab, this is where you can put in the information necessary for your widget to work appropriately. It can be anything from adding options, a URL, a script, a secret key, or anything else so it's important to enter the appropriate information based on the selected widget you have chosen.
Once you are done entering all the necessary information the widget is requesting from you, just click the Add Widget button and you're done! Now go ahead and Save the form to finalize it. You can then Preview the Form to see a live view for a more accurate look at the Widget you added.
For the Custom CSS tab of the Widget Wizard, you can inject custom CSS codes in the space provided for it to style your widgets. It is, most likely, the same as injecting CSS codes to your form, but since most of the widgets are added with the help of the iframe, using the instructions on this page may not work that is why a special CSS tab is created for widgets to style it with CSS codes.
If at any case you ever need to make any changes or updates to your widget, you can click the "wand icon" of the widget located at the top-right corner of the field. Then, make the necessary updates and click the Update Widget button.
Or, you can also use the widgets' toolbars.
Updates made on the widget may require you to save your form for changes to be applied, so please do not forget to save your form after.
Demo Form: https://form.jotform.com/60811081318953
Questions? Please let us by commenting below!