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