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 Catch User's Browser Info
- 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
- How to Show or Hide Fields on Edit URL
- Calculate Values in the Input Table Through Condition
- How to Inject CSS Codes to Widgets
Related Forum Questions
- Issue With Forms Tab Widget
- How can I add a progress bar to my form?
- How to style the User contributed drop-down widget?
- Can inventory widget display warning when none is available?
- How to add a placeholder for a cell in the spreadsheet widget?
- Why is my form missing the appointment widget when published?
- Payment tool fields are not being displayed correctly.
- Which calculation method is more efficient, widget or conditional logic?
- Can I prepopulate a widget?
- Is it possible to add (user) text when completing the spreadsheet widget form?
How to Add a Widget to your Form?Last Update: March 3, 2017
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! You can check 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.
So now the question is, "How Do I Add some Widget(s) to My Form?"
In JotForm V4:
Navigate to "Build" and click the "Add Form Element" button.
Open the "Widgets" tab, here you can search for the specific widget.
To add a widget, simply drag and drop it in your form. You'll see at the right side that the widget setting will open up.
The widget settings vary depending on the widget itself. Here you can set up the widget. After you're finished, click the "Update Widget" button.
The widget is now displayed on my form, you can see there are three buttons if you select the widget on the form.
Wand icon - this will open the widget settings if you want to edit it.
Gear icon - this will open up the properties of that field.
Trash icon - this will delete the widget on your form.
This is how the properties window looks like if you click the gear icon, it is basically more related to the field's position and other styles.
You now have a widget in your form. Feel free to add more and maximize their special functions.
In JotForm V3:
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.
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.
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.
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.
Demo Form: https://form.jotform.com/60811081318953
Questions? Please let us by commenting below!