How to Add a Widget to your Form?

Last Update: May 7, 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?"

Step 1:

Navigate to "Build" and click the "Add Form Element" button.


Step 2:

Open the "Widgets" tab, here you can search for the specific widget. 


Step 3:

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. 


Step 4:

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. 


Step 4: 

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. 


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: 

Questions? Please let us by commenting below!


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)


I've added Data Grid to my form 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?


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

tammyhaire (December 20, 2016 at 01:12 PM)

I need to resend my form to multiple people. Each time the form goes out, the recipient can choose an item from "inventory". When I try to add new items to the inventory, they add in as already having been chosen. Help.

View Answer

f6oom (December 21, 2016 at 02:54 PM)

what about google maps
how i can add it in my form to get locations of responsers

View Answer

Bhoopsingh (June 06, 2017 at 01:44 PM)

Please update Widgets

View Answer

Send Comment