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
- Configurable list widget: not being encrypted
- Limit selection of countries in Contry Picker widget
- tab widget?
- How to create a Sliders with Calculated result widget to show total cost of an order?
- Image radio buttons widget is not responsive on mobile devices
- Trouble declaring Google font in calendar widget CSS
- Calendar inside of Large Date Picker is not fully responsive
- Cool Caption widget: Remove image border (Mobile)
- Form Tabs Widget Not Working for Jotform 4.0 -- wizard missing
- Make adjustments to DateTime field.
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!