How to Add and Set Up the Color Picker Widget on Your Form

Jotform’s Color Picker widget makes it super easy to let users choose their favorite color right from your form. With a simple click, users can select any shade they like—perfect for customizing orders, picking design preferences, or just adding a fun pop of color to your form. It’s quick to set up, easy to use, and a great way to make your forms more interactive and engaging.

Here are a few ways to use it:

• Let Users Select Product Colors — You can use the Color Picker widget to allow customers to choose their preferred product color, such as for custom apparel, merchandise, or printed materials. This makes the selection process more visual and accurate.
• Collect Branding Preferences — The widget is useful for design request forms where clients need to specify brand or theme colors. Instead of typing a color name, they can select the exact shade they want.
• Customize Event or Theme Settings — For event planning forms, users can choose theme colors for decorations, invitations, or digital assets. This helps organizers understand the client’s visual preferences clearly.
• Gather UI or Website Design Inputs — Web designers and developers can use the widget to let clients select preferred interface colors for buttons, backgrounds, or accents. This ensures precise communication of design expectations.

Adding and Setting Up the Color Picker Widget

Adding the Color Picker widget to your form makes it easy for users to select their favorite shades with just a click. Here’s the quick way to do it:

1. In Form Builder, click on Add Element on the left side of the page.

2. Now, in the Form Elements menu, under the Widgets tab, search for Color Picker and then click on it. Or, just drag and drop it to where you want it to be on your form.

3. Next, in the Widget Settings window that opens on the right side of the page, set up the Default Hex Color option to set the default shade that shows up in the picker when your form first loads.
4. Once you’re done, click on Update.

That’s it. You’ve successfully added and set up the Color Picker widget to your form. Now, you have a field in your form that makes it easy for users to pick colors from a palette or fine-tune their own with simple sliders—plus, it even remembers their choices if they come back later for a smooth, fun experience. Curious how it works on a live form? Check out this Demo Form.

To tweak how your Instagram field looks, just click the gear icon to open its settings and adjust it to your liking.