User Guide

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: https://form.jotform.com/60811081318953 

Questions? Please let us by commenting below!

20 Comments...

  • goodforaudio

    How do I remove a widget once it is added?

     
  • facilityops

    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.

     
  • akt1

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

     
  • yuniorsan75

    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

     
  • Gugu

    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

     
  • execspeak

    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?

     
  • chuckali

    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

     
  • bkeogh

    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

     
  • artspaceparty

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

     
  • Shani99

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

     
  • lynn25med

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

     
  • CHEER

    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.

     
  • IDIUser

    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.

     
  • andolphoneto

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

    =if(e12

     
  • DePuyClinical

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

     
  • amutha

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

     
  • tammyhaire

    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.

     
  • f6oom

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

     
  • Bhoopsingh

    Please update Widgets

     

Send Comment