Using selected colors in your theme
We’ve built Gravity Forms Color Picker to have some clever little gems inside of it. One is having the ability to change the look of your website with colors that your users select in a form or field. For example, you could change the background color of the main banner on your website. When you update the Color Picker color, the background banner changes to that color.
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.
Using CSS class names
You can easily change the color of elements of your website with the below CSS class names.
gfcp_bg– Changes the background color of the specific HTML elementgfcp_color– Changes the text color of the specific text element (H1-H6, li,a,ul, etc etc)gfcp_border– Changes the border color of a specific HTML elementgfcp_fill– Changes the color of an SVG element
All you need to do is add one of the top color classes to any element in your website and it will change colors when a user selects a color from a color picker field.
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.
Listen for any form field color change
If you only have 1 form on a page, with 1 color pick field, then all you need to do is add one of the three above classes. If, however, you have say 2 fields in 1 form on the page, but you want field to change the background color of one section, and the other color picker field to change the colour of another section, follow the below steps.
Add the class you want to control the color of, in this example, we’ll use the background color class gfcp_bglike below. Add that class to your background div element, as shown above. Now you can see a live example below, changing the color picker field will update the preview box below.
<div class="update-preview gfcp_bg">
<h2>My heaidng inside my banner</h2>
</div>Multiple color changes with multiple fields
To update unique HTML elements from specific color picker fields, just list the form and field IDs after the main class type, follow the format below:
gfcp_{selectorClass}_{form_id}_{field_id} or a live example of gfcp_bg_2_3
The above would update the background color, with the user-selected color of form ID = 2 and field ID =3. For example gfcp_bg_1_1 listens to the first form on the page with ID = 1 and the first field within that form, ID = 1.
Using Javascript listeners and events
If you’re a clever cat and have experience with JS or Jquery, you can use the blow jQuery event listeners to update your website or elements to do something special on the page.
jQuery('body').on('gf-color-picker:picked', function(e, hex, ref){
// do whatever you want here.
// hex will be... hex
// ref will be the formID_fieldID string
});