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.
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.
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.
Get a copy of Gravity Forms Color Picker
Gravity Forms Color Picker
Let users select from a pre-defined set of swatches you make available or even let your users select a custom hex value from the color picker.
