Color (Background/Border/Text)

Learn what color settings can be customized for different block field parts (background, borders, text).

There are different color features throughout the Styles settings that differ according to the field part they are meant for, such as Background, Text, or Button Color. However, they look the same and have the same settings.

Color Model Available

Currently, the following color models are available:

  • Hexadecimal – this is the format suitable for HTML. It codes the color in six alphanumeric symbols;
  • RGB – the color is set as a ratio between red, green, and blue colors;
  • HSL – the color is coded as a ratio between hue, saturation, and luminosity.

Default Colors

This feature offers a set of default colors. Those colors will depend on the website template you are using and can change if you install a new skin. Colors can be customized by moving to the WordPress Dashboard > Appearance > Customize path. 

Here, the list of available default colors will be presented in the Color Scheme tab. To change the needed color, the “Select Color” button near the corresponding color should be pressed.

setting the default colors

Also, the background color can be set in the WordPress Dashboard > Appearance> Customize > Colors tab.

setting the default background color

The needed color can be manually picked, or its code can be inserted via the bar. 

NOTE

Individual settings of form fields have a higher priority than more general ones. This means that if the settings chosen for the whole form differ from the ones set for a Text Field, the Text Field setting will be prioritized.

Text and Background Colors

The text and background colors can be set for blocks. The Style settings of the block can be reached by clicking on the “Block Style” button. It is available when clicking on the separate field while creating the form.

setting the text color

Button Colors

For the elements that can change color on hover, like the “Next Page” buttons, there can be additional tabs in this feature. For example, there can be a Hover tab that allows choosing how the color of the part will change when the user places the pointer over it.

setting the hover color

FAQ

Can I customize button colors?

Yes. Button elements can have their colors customized through the available style settings.

Will changing a default color affect existing fields?

It can affect elements that use the corresponding default color. However, a specific color configured directly for an individual field has higher priority than a general or default color.

How can I restore a field to the default color?

Remove or reset the individually configured color so that the field can inherit the applicable general or default color setting.

Can text and background colors be configured independently?

Yes. Text and background colors are separate settings, allowing you to create different combinations for the content and its background.

Can I customize both normal and hover colors for a button?

Yes, provided the button supports hover styling. You can configure the regular button color and use the Hover tab to specify a different color for the hover state.

That’s it. Now you know what color settings can be customized for different block field parts (background, borders, or text) using the JetFormBuilder plugin for WordPress.

Related Docs