How to use color picker in your forms and website theme

Did you know our Gravity Forms Color Picker plugin has some hidden tricks up its sleeves? Want to change the look of your website, text, graphics, or artwork demo? We’ve made it easy to use your users selected color from the Gravity Form, and apply it to many styling options instantly on your website.

Introducing JetSloth’s Gravity Forms Color Picker add-on — How to use color picker in your forms and website theme

Simple as adding class names

To display the chosen color form your color picker field in your theme or website, simply use our unique class names and form/field IDs to update your theme. Let’s take a look at how to do this and construct your unique class names. See more details and examples on using the Color Picker classes in our support documentation.

How to use color picker in your forms — Class Syntax

Let’s see some examples

Updating a simple SVG logo? Allow users to update simple artwork and let them preview their changes right within the form. Let’s see how we can update the JetSloth logo by allowing users to chose the logo color.

Updating color of SVGs

To update the colour of an SVG shape, use the gfcp_fill class along with your field ID. So the below uses gfcp_fill_110_2 to update the JetSloth logo from white to the selected color with our form and field IDs.

Updating text color

To update the colour of any text, using the available classes, just add class gfcp_color_fieldID_fieldID as per the above synatx examples. For example the H2 bellow is written in HTML like this.

Updating element background color

To update the background colour of element, using the available classes, just add class gfcp_bg_fieldID_fieldID as per the above synatx examples.

Updating element border color

To update the border colour of any element, using the available classes, just add class gfcp_border_fieldID_fieldID as per the above synatx examples.

Filling multiple SVG shapes in an image

Just as the first example, you can easily apply the gfcp_fill class to multiple SVG shapes in 1 SVG image. The below example changes multiple shapes when a color is selected by the user. We’ve also included background color options in this example using the gfcp_bg class.