User Guide

 

How to Add a Widget to Your Form

How to Add a Widget to Your Form

There have always been forms, then there have always been ways to make forms more advanced. The problem is that there was never really a way to mesh the two together very well.

As a result, we've created the JotForm Widgets platform as a way to help lessen the workload of creating interactive and dynamic forms. This now allows you to do things on your forms that you wouldn't think of as normally being possible. It cuts down your work and makes things a lot easier.

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.

So now the question is, "How do I add Widget to my form?"

STEP 1: Navigate to BUILD and click the ADD FORM ELEMENT button.

STEP 2: Go to the WIDGETS tab, then search for a specific widget.

STEP 3: To add a widget, either click it or drag and drop it to your form. As soon as the widget is placed on your form, you'll see the widget wizard on the right.

STEP 4: The widget settings vary depending on the widget itself. Here you can set up the options and features the widget offers. Once you're finished, click the green UPDATE WIDGET button.

And that's it! The widget is now displayed on my form. You can see there are three icons if you select the widget:

WAND icon - This will open the widget wizard.

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 would look like if you click the GEAR icon. It is more related to the field's position and other styles.

Feel free to add more and maximize their special features and full potential. Want to customize the look and feel of a widget? Add your own custom CSS to it!

Related guide: How to Inject CSS Codes to Widgets

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.

Send Comment

19 Comments...

  • Bhoopsingh

    Please update Widgets

  • f6oom

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

  • 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.

  • amutha

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

  • DePuyClinical

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

  • andolphoneto

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

    =if(e12

  • 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.

  • 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.

  • lynn25med

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

  • Shani99

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

  • artspaceparty

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

  • 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

  • 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

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

  • 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

  • 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

  • akt1

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

  • 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.

  • goodforaudio

    How do I remove a widget once it is added?