How to use color picker selected colors in your form or theme styling

November 18, 2019 by JetSloth

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 form, and apply it to many styling options instantly on your website.

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.

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.

Logo update demo

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:

<h2 class=”gfcp_color_112_2″>Select a color to update this text</h2>

Text color update demo

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.

<div class=”gfcp_bg_111_2″>Somthing inside this</div>

 

Background color update

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.

<div class=”gfcp_border_112_2″>Somthing inside this</div>

 

Border color update demo

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.

Mega demo