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

Step 1:
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...

Step 2:
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.

Step 3:
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.


Step 4:
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 appropriatelyIt 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!


16 Comments...


   
goodforaudio (December 27, 2013 at 05:13 PM)

How do I remove a widget once it is added?

View Answer


   
facilityops (January 14, 2014 at 12:49 AM)

How can I make the width of a widget auto-fit to the screen of the device that it's on?

Alternatively, what I'm trying to do is make the 'Button Radios' widget work with five options on a 300-400 width device.

View Answer


   
akt1 (January 25, 2014 at 04:03 PM)

How do I save a customized widget for use in another form

View Answer


   
yuniorsan75 (March 28, 2014 at 02:15 PM)

How Do i Put a widget I use a lot in the favority section on the left?
For example image slider and put esignature.

Thank You

View Answer


   
Gugu (April 03, 2014 at 08:34 AM)

Hi, intend to use address locator google maps widget, the widget displays longitude, latitude, country, province and address fields, my questiin is, how do retrive data from these fields in PHP im seeing placeholders instead of field names, hop you can help, thanks

View Answer


   
execspeak (June 13, 2014 at 12:44 PM)

I'm trying to add a polling image slider widget. Within each image, there should be a 4-5 multiple choice question.
How can this be accomplished?

View Answer


   
chuckali (September 28, 2014 at 06:56 PM)

Hi I am trying to add Mobile Responsive widget in my form, but when ever I add that widget my form fileds expands. It is effecting a html i guess

View Answer


   
bkeogh (July 14, 2015 at 07:00 PM)

Hi, I am using Visual Multi Select. How can I add a header so that I know what it relates to when I print out the form? (Like it does for other standard sections).

Then how do I add the responses to the auto email once the form has been filled out?

Finally, unfortunately it only prints the responses in one line, separated by a comma. Can the responses be listed on separate lines?

Thanks, Brendan

View Answer


   
artspaceparty (July 25, 2015 at 07:58 PM)

photos not showing on image slider - possible too lg? What size pix is recommended?

View Answer


   
Shani99 (August 10, 2015 at 04:46 PM)

How do I enforce the theme design onto a widget? I cannot change it's look and feel in the design tab.

View Answer


   
lynn25med (December 03, 2015 at 12:46 PM)

Is there a way to change the color of the animated header?

View Answer


   
CHEER (April 20, 2016 at 03:33 PM)

I want to have a pdf document available to download should someone need more detailed information or for those who need more guidance. Where do I put the pdf form so that it can be accessed. Does it go somewhere in JotForm, or does it need to be on a server somewhere with a URL access. Your guidance is appreciated.

View Answer


   
IDIUser (April 21, 2016 at 06:53 PM)

Hello,

I've added Data Grid to my form https://form.jotform.com/61117002052133 under Pay Codes, but I can't figure out how to use it. When I preview the form, it's just a blank yellow box.

The purpose of the widget is to have the user dynamically enter their text values so I can capture them on the backend in a spreadsheet or CSV for import into another app. Your spreadsheet widget wont work because it only accepts numbers. Please advise and thank you for your help.

View Answer


   
andolphoneto (June 22, 2016 at 05:14 PM)

this formula is not working, do you know how can i use this parameters?

=if(e12

View Answer


   
DePuyClinical (August 02, 2016 at 10:08 AM)

Do Widgets work once you save the template to use as a fillable PDF?

View Answer


   
amutha (August 18, 2016 at 06:17 AM)

i already added a widget.but now i couldnot use widget.if i add a widget,it doesnot appear or not working

View Answer


Send Comment