Skip to Content
HubSpot Sprocket Icon HubSpot Website Development

Overriding HubSpot's new forms styling from theme settings

Technical Difficulty: Advanced
Written by
First Published:
Last Updated:

HubSpot has recently added the ability to  override the default styling of their new forms using CSS variables. Below you'll learn how to:

  1. Create Theme Fields: Add those variables as fields to your theme's global settings
  2. Create HubL Variables: Use HubL to convert those theme field values into HubL variables containing CSS styling
  3. Create CSS: Use those HubL variables in your CSS to override the new form styling

In all of our examples below, the assumption is that you're starting with HubSpot's boilerplate as your base, so the file names and sections will match those. However, you can adapt the code to your own theme. 

 

1. Create Theme Fields

To create the global theme settings fields, add the following JSON to your boilerplate's fields.json file (you can use a JSON prettifier to fix the formatting):

{"label":"Forms","name":"forms","type":"group","children":[{"label":"Global Form Styes","name":"global","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.global_fonts.primary.font"}}},{"label":"Font Size","name":"font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.text.body_font.font.size","size_unit":"theme.text.body_font.font.size_unit"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.global_colors.black.color"}}},{"label":"Error Color","name":"error_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"default":{"color":"#F44336"}}]},{"label":"Row","name":"row","type":"group","children":[{"label":"Horizontal Spacing Between Rows","name":"horizontal_spacing","type":"number","display":"slider","max":160,"min":0,"suffix":"px","default":16},{"label":"Vertical Spacing Between Rows","name":"vertical_spacing","type":"number","display":"slider","max":160,"min":0,"suffix":"px","default":16},{"label":"Vertical Spacing Between Modules","name":"module_vertical_spacing","type":"number","display":"slider","max":160,"min":0,"suffix":"px","default":8}]},{"label":"Button","name":"button","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Font Size","name":"font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.forms.global.font_size.size","size_unit":"theme.forms.global.font_size.size_unit"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.global_colors.white.color"}}},{"label":"Background Color","name":"background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.primary.color"}}},{"label":"Drop Shadow","name":"box_shadow","sortable":false,"required":false,"locked":false,"type":"boolean","default":false},{"label":"Drop Shadow - X-Offset","name":"box_shadow_x_offset","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.button.box_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Y-Offset","name":"box_shadow_y_offset","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.button.box_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Blur","name":"box_shadow_blur","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.button.box_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Spread","name":"box_shadow_spread","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.button.box_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Color","name":"box_shadow_color","type":"color","visibility":{"controlling_field":null,"controlling_field_path":"forms.button.box_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"inherited_value":{"property_value_paths":{"color":"theme.global_colors.primary.color"}}},{"label":"Corner Radius","name":"corner_radius","type":"number","display":"text","max":100,"step":1,"suffix":"px","default":0},{"label":"Padding","name":"padding","type":"spacing","visibility":{"hidden_subfields":{"margin":true}},"default":{"padding":{"top":{"value":16,"units":"px"},"right":{"value":24,"units":"px"},"bottom":{"value":16,"units":"px"},"left":{"value":24,"units":"px"}}}}]},{"label":"Paragrah (Rich Text)","name":"rich_text","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Font Size","name":"font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.forms.global.font_size.size","size_unit":"theme.forms.global.font_size.size_unit"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}}]},{"label":"Heading","name":"heading","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"fallback":"theme.global_fonts.secondary.fallback","font":"theme.global_fonts.secondary.font","font_set":"theme.global_fonts.secondary.font_set"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Drop Shadow","name":"text_shadow","sortable":false,"required":false,"locked":false,"type":"boolean","default":false},{"label":"Drop Shadow - X-Offset","name":"text_shadow_x_offset","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.heading.text_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Y-Offset","name":"text_shadow_y_offset","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.heading.text_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Blur","name":"text_shadow_blur","required":false,"locked":false,"visibility":{"controlling_field":null,"controlling_field_path":"forms.heading.text_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"display":"text","display_width":"half_width","min":0,"max":100,"step":1,"type":"number","suffix":"px","default":null},{"label":"Drop Shadow - Color","name":"text_shadow_color","type":"color","visibility":{"controlling_field":null,"controlling_field_path":"forms.heading.text_shadow","controlling_value_regex":"true","property":null,"operator":"EQUAL","access":null},"inherited_value":{"property_value_paths":{"color":"theme.global_colors.primary.color"}}}]},{"label":"Background","name":"background","type":"group","children":[{"label":"Color","name":"color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.white.color"}}},{"label":"Border","name":"border","type":"border","allow_custom_border_sides":true,"default":{"top":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"right":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"bottom":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"left":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"}}},{"label":"Corner Radius","name":"corner_radius","type":"number","display":"text","max":100,"step":1,"suffix":"px","default":0},{"label":"Padding","name":"padding","type":"spacing","visibility":{"hidden_subfields":{"margin":true}},"default":{"padding":{"top":{"value":16,"units":"px"},"right":{"value":16,"units":"px"},"bottom":{"value":16,"units":"px"},"left":{"value":16,"units":"px"}}}}]},{"label":"Progress Bar","name":"progress_bar","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Font Size","name":"font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.forms.global.font_size.size","size_unit":"theme.forms.global.font_size.size_unit"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Progess Line - Background Color","name":"progress_line_background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.primary.color"}}},{"label":"Progress Line - Border","name":"progress_line_border","type":"border","allow_custom_border_sides":true,"default":{"top":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"right":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"bottom":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"left":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"}}},{"label":"Track Line - Background Color","name":"track_line_background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.neutral.color"}}}]},{"label":"Error Alert","name":"error_alert","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Font Size","name":"font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.forms.global.font_size.size","size_unit":"theme.forms.global.font_size.size_unit"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.error_color.color"}}}]},{"label":"Info Alert","name":"info_alert","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Font Size","name":"font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.forms.global.font_size.size","size_unit":"theme.forms.global.font_size.size_unit"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}}]},{"label":"Field Input","name":"field_input","type":"group","children":[{"label":"Label - Font Family","name":"label_font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Label - Font Size","name":"label_font_size","type":"font","visibility":{"hidden_subfields":{"color":true,"fallback":true,"font":true,"font_set":true,"styles":true,"variant":true}},"inherited_value":{"property_value_paths":{"size":"theme.forms.global.font_size.size","size_unit":"theme.forms.global.font_size.size_unit"}}},{"label":"Label - Color","name":"label_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Required Indicator - Color","name":"required_indicator_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.primary.color"}}},{"label":"Description - Font Family","name":"description_font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Description - Color","name":"description_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Footer - Font Family","name":"footer_font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Footer - Color","name":"footer_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Input - Font Family","name":"input_font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Input - Color","name":"input_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Input - Background Color","name":"input_background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.neutral.color"}}},{"label":"Input - Placeholder Color","name":"input_placeholder_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Input - Border","name":"input_border","type":"border","allow_custom_border_sides":true,"default":{"top":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"right":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"bottom":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"left":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"}}},{"label":"Input - Corner Radius","name":"input_corner_radius","type":"number","display":"text","max":100,"step":1,"suffix":"px","default":0},{"label":"Input - Padding","name":"input_padding","type":"spacing","visibility":{"hidden_subfields":{"margin":true}},"default":{"padding":{"top":{"value":16,"units":"px"},"right":{"value":24,"units":"px"},"bottom":{"value":16,"units":"px"},"left":{"value":24,"units":"px"}}}}]},{"label":"Field Textarea","name":"field_textarea","type":"group","children":[{"label":"Font Family","name":"font_family","type":"font","visibility":{"hidden_subfields":{"color":true,"size":true,"styles":true}},"inherited_value":{"property_value_paths":{"font":"theme.forms.global.font_family.font"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Background Color","name":"background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.neutral.color"}}},{"label":"Placeholder Color","name":"placeholder_color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Border","name":"border","type":"border","allow_custom_border_sides":true,"default":{"top":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"right":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"bottom":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"left":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"}}},{"label":"Corner Radius","name":"corner_radius","type":"number","display":"text","max":100,"step":1,"suffix":"px","default":0},{"label":"Padding","name":"padding","type":"spacing","visibility":{"hidden_subfields":{"margin":true}},"default":{"padding":{"top":{"value":16,"units":"px"},"right":{"value":16,"units":"px"},"bottom":{"value":16,"units":"px"},"left":{"value":16,"units":"px"}}}}]},{"label":"Field Checkbox","name":"field_checkbox","type":"group","children":[{"label":"Padding","name":"padding","type":"spacing","visibility":{"hidden_subfields":{"margin":true}},"default":{"padding":{"top":{"value":16,"units":"px"},"right":{"value":16,"units":"px"},"bottom":{"value":16,"units":"px"},"left":{"value":16,"units":"px"}}}},{"label":"Background Color","name":"background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.neutral.color"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Border","name":"border","type":"border","allow_custom_border_sides":true,"default":{"top":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"right":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"bottom":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"left":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"}}}]},{"label":"Field Radio","name":"field_radio","type":"group","children":[{"label":"Padding","name":"padding","type":"spacing","visibility":{"hidden_subfields":{"margin":true}},"default":{"padding":{"top":{"value":16,"units":"px"},"right":{"value":16,"units":"px"},"bottom":{"value":16,"units":"px"},"left":{"value":16,"units":"px"}}}},{"label":"Background Color","name":"background_color","type":"color","inherited_value":{"property_value_paths":{"color":"theme.global_colors.neutral.color"}}},{"label":"Color","name":"color","type":"color","visibility":{"hidden_subfields":{"opacity":true}},"inherited_value":{"property_value_paths":{"color":"theme.forms.global.color.color"}}},{"label":"Border","name":"border","type":"border","allow_custom_border_sides":true,"default":{"top":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"right":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"bottom":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"},"left":{"width":{"value":1,"units":"px"},"opacity":100,"style":"none","color":"#9099A1"}}}]}]}

The fields are grouped in the same way as HubSpot's documentation:

  • Global Form Styles
  • Row
  • Button
  • Paragraph (Rich Text)
  • Heading
  • Background
  • Progress Bar
  • Error Alert
  • Info Alert
  • Field Input
  • Field Textarea
  • Field Checkbox
  • Field Radio

And should look like this on the front end:

global-theme-settings-new-forms

 

Note that in several instanced I've used an "inherited_value" with values from my own theme. For example:

  • Under Forms > Global Form Styles > Font Family, it inherits the value of my theme's Global Fonts > Primary font field
  • Under Forms > Global Form Styles > Color, it inherits the value of my theme's Global Colours > Black colour field.

Some other inherited values pull from the "Global Form Styles" above.

You can adapt these to your own theme fields, or update them with default values. 

 

2. Create HubL Variables

Now that we have the fields, we can use HubL to pull their values and format them as CSS, storing them in HubL variables.

In the boilerplate, I've added the below to the css > theme-overrides.css file under the variables section "1e. Forms":

/* Forms - Global */

{% set form_global_font_family = theme.forms.global.font_family.font %}
{% set form_global_font_size = theme.forms.global.font_size.size ~ theme.forms.global.font_size.size_unit %}
{% set form_global_color = theme.forms.global.color.color %}
{% set form_global_error_color = theme.forms.global.error_color.color %}

/* Forms - Row */

{% set form_row_horizontal_spacing = theme.forms.row.horizontal_spacing ~ 'px' %}
{% set form_row_vertical_spacing = theme.forms.row.vertical_spacing ~ 'px' %}
{% set form_row_module_vertical_spacing = theme.forms.row.module_vertical_spacing ~ 'px' %}

/* Forms - Button */

{% set form_button_font_family = theme.forms.button.font_family.font %}
{% set form_button_font_size = theme.forms.button.font_size.size ~ theme.forms.button.font_size.size_unit %}
{% set form_button_color = theme.forms.button.color.color %}
{% set form_button_background_color = color(theme.forms.button.background_color) %}
{#{% set form_button_background_image = "" %}#} {# Optional: add a valid background-image CSS value #}
{% set form_button_corner_radius = theme.forms.button.corner_radius ~ 'px' %}
{% set form_button_padding = padding(theme.forms.button.padding) %}
{% if theme.forms.button.box_shadow %}
  {% set form_button_box_shadow =  
    (theme.forms.button.box_shadow_x_offset|default(0)) ~ "px " ~
    (theme.forms.button.box_shadow_y_offset|default(0)) ~ "px " ~
    (theme.forms.button.box_shadow_blur|default(0)) ~ "px " ~
    (theme.forms.button.box_shadow_spread|default(0)) ~ "px " ~
    color(theme.forms.button.box_shadow_color)
  %}
{% else %}
  {% set form_button_box_shadow = "" %}
{% endif %}

/* Forms - Rich Text */

{% set form_rich_text_font_family = theme.forms.rich_text.font_family.font %}
{% set form_rich_text_font_size = theme.forms.rich_text.font_size.size ~ theme.forms.rich_text.font_size.size_unit %}
{% set form_rich_text_color = theme.forms.rich_text.color.color %}

/* Forms - Heading */

{% set form_heading_font_family = theme.forms.heading.font_family.font %}
{% set form_heading_color = theme.forms.heading.color.color %}
{% if theme.forms.heading.text_shadow %}
  {% set form_heading_text_shadow =  
    (theme.forms.heading.text_shadow_x_offset|default(0)) ~ "px " ~
    (theme.forms.heading.text_shadow_y_offset|default(0)) ~ "px " ~
    (theme.forms.heading.text_shadow_blur|default(0)) ~ "px " ~
    color(theme.forms.heading.text_shadow_color)
  %}
{% else %}
  {% set form_heading_text_shadow = "" %}
{% endif %}

/* Forms - Background */

{% set form_background_color = color(theme.forms.background.color) %}
{#{% set form_background_image = "" %}#} {# Optional: add a valid background-image CSS value #}
{#{% set form_background_size = "" %}#} {# Optional: add a valid background-size CSS value #}
{#{% set form_background_position = "" %}#} {# Optional: add a valid background-position CSS value #}
{#{% set form_background_repeat = "" %}#} {# Optional: add a valid background-repeat CSS value #}
{% set form_background_border_style = border_style(theme.forms.background.border) %}
{% set form_background_border_color = border_color(theme.forms.background.border) %}
{% set form_background_corner_radius = theme.forms.background.corner_radius ~ 'px' %}
{% set form_background_border_width = border_width(theme.forms.background.border) %}
{% set form_background_padding = padding(theme.forms.background.padding) %}

/* Forms - Progress Bar */

{% set form_progressbar_font_family = theme.forms.progress_bar.font_family.font %}
{% set form_progressbar_font_size = theme.forms.progress_bar.font_size.size ~ theme.forms.progress_bar.font_size.size_unit %}
{% set form_progressbar_color = color(theme.forms.progress_bar.color) %}
{% set form_progressbar_progressline_background_color = color(theme.forms.progress_bar.progress_line_background_color) %}
{#{% set form_progressbar_progressline_background_image = "" %}#} {# Optional: add a valid background-image CSS value #}
{% set form_progressbar_progressline_border_color = border_color(theme.forms.progress_bar.progress_line_border) %}
{% set form_progressbar_progressline_border_style = border_style(theme.forms.progress_bar.progress_line_border) %}
{% set form_progressbar_progressline_border_width = border_width(theme.forms.progress_bar.progress_line_border) %}
{% set form_progressbar_trackline_background_color = color(theme.forms.progress_bar.track_line_background_color) %}

/* Forms - Error Alert */

{% set form_error_alert_font_family = theme.forms.error_alert.font_family.font %}
{% set form_error_alert_font_size = theme.forms.error_alert.font_size.size ~ theme.forms.error_alert.font_size.size_unit %}
{% set form_error_alert_color = theme.forms.error_alert.color.color %}

/* Forms - Info Alert */

{% set form_info_alert_font_family = theme.forms.info_alert.font_family.font %}
{% set form_info_alert_font_size = theme.forms.info_alert.font_size.size ~ theme.forms.info_alert.font_size.size_unit %}
{% set form_info_alert_color = theme.forms.info_alert.color.color %}

/* Forms - Field Input */

{% set form_field_label_font_family = theme.forms.field_input.label_font_family.font %}
{% set form_field_label_font_size = theme.forms.field_input.label_font_size.size ~ theme.forms.field_input.label_font_size.size_unit %}
{% set form_field_label_color = theme.forms.field_input.label_color.color %}
{% set form_field_label_required_indicator_color = color(theme.forms.field_input.required_indicator_color) %}
{% set form_field_label_description_font_family = theme.forms.field_input.description_font_family.font %}
{% set form_field_label_description_color = theme.forms.field_input.description_color.color %}
{% set form_field_label_footer_font_family = theme.forms.field_input.footer_font_family.font %}
{% set form_field_label_footer_color = theme.forms.field_input.footer_color.color %}
{% set form_field_label_input_font_family = theme.forms.field_input.input_font_family.font %}
{% set form_field_label_input_color = theme.forms.field_input.input_color.color %}
{% set form_field_label_input_background_color = color(theme.forms.field_input.input_background_color) %}
{% set form_field_label_input_placeholder_color = theme.forms.field_input.input_placeholder_color.color %}
{% set form_field_label_input_border_color = border_color(theme.forms.field_input.input_border) %}
{% set form_field_label_input_border_width = border_width(theme.forms.field_input.input_border) %}
{% set form_field_label_input_border_style = border_style(theme.forms.field_input.input_border) %}
{% set form_field_label_input_border_radius = theme.forms.field_input.input_corner_radius ~ 'px' %}
{% set form_field_label_input_padding = padding(theme.forms.field_input.input_padding) %}

/* Forms - Field Textarea */

{% set form_field_textarea_font_family = theme.forms.field_textarea.font_family.font %}
{% set form_field_textarea_color = theme.forms.field_textarea.color.color %}
{% set form_field_textarea_background_color = color(theme.forms.field_textarea.background_color) %}
{% set form_field_textarea_placeholder_color = theme.forms.field_textarea.placeholder_color.color %}
{% set form_field_textarea_border_color = border_color(theme.forms.field_textarea.border) %}
{% set form_field_textarea_border_width = border_width(theme.forms.field_textarea.border) %}
{% set form_field_textarea_border_style = border_style(theme.forms.field_textarea.border) %}
{% set form_field_label_input_border_radius = theme.forms.field_input.input_corner_radius ~ 'px' %}
{% set form_field_textarea_border_radius = theme.forms.field_textarea.corner_radius ~ 'px' %}
{% set form_field_textarea_padding = padding(theme.forms.field_textarea.padding) %}

/* Forms - Field Checkbox */

{% set form_field_checkbox_padding = padding(theme.forms.field_checkbox.padding) %}
{% set form_field_checkbox_background_color = color(theme.forms.field_checkbox.background_color) %}
{% set form_field_checkbox_color = theme.forms.field_checkbox.color.color %}
{% set form_field_checkbox_border_color = border_color(theme.forms.field_checkbox.border) %}
{% set form_field_checkbox_border_width = border_width(theme.forms.field_checkbox.border) %}
{% set form_field_checkbox_border_style = border_style(theme.forms.field_checkbox.border) %}
{% set form_field_label_input_border_radius = theme.forms.field_input.input_corner_radius ~ 'px' %}

/* Forms - Field Radio */

{% set form_field_radio_padding = padding(theme.forms.field_radio.padding) %}
{% set form_field_radio_background_color = color(theme.forms.field_radio.background_color) %}
{% set form_field_radio_color = theme.forms.field_radio.color.color %}
{% set form_field_radio_border_color = border_color(theme.forms.field_radio.border) %}
{% set form_field_radio_border_width = border_width(theme.forms.field_radio.border) %}
{% set form_field_radio_border_style = border_style(theme.forms.field_radio.border) %}

I've chosen not to add background image fields to theme theme's settings, and therefore they aren't being use above.

 

Macros

Note that I've used some macros in the code above, mainly to split the border field (into separate style, colour and width values) and padding field.

To use these macros, on the boilerplate, paste the following macros into the bottom of your css > tools > _macros.css file:

{###########################################################################}
{#########################   Split Border Fields   #########################}
{###########################################################################}

/* Get border colour from a border field */
{% macro border_color(border_field) %}
  {% set top_border_color = "rgba(" ~ border_field.top.color|convert_rgb ~ ", " ~ border_field.top.opacity / 100 ~ ")" %}
  {% set right_border_color = "rgba(" ~ border_field.right.color|convert_rgb ~ ", " ~ border_field.right.opacity / 100 ~ ")" %}
  {% set bottom_border_color = "rgba(" ~ border_field.bottom.color|convert_rgb ~ ", " ~ border_field.bottom.opacity / 100 ~ ")" %}
  {% set left_border_color = "rgba(" ~ border_field.left.color|convert_rgb ~ ", " ~ border_field.left.opacity / 100 ~ ")" %}
  {{ top_border_color }} {{ right_border_color }} {{ bottom_border_color }} {{ left_border_color }}
{% endmacro %}

/* Get border width from a border field */
{% macro border_width(border_field) %}
  {% set top_border_width = border_field.top.width.value ~ border_field.top.width.units %}
  {% set right_border_width = border_field.right.width.value ~ border_field.right.width.units %}
  {% set bottom_border_width = border_field.bottom.width.value ~ border_field.bottom.width.units %}
  {% set left_border_width = border_field.left.width.value ~ border_field.left.width.units %}
  {{ top_border_width }} {{ right_border_width }} {{ bottom_border_width }} {{ left_border_width}}
{% endmacro %}

/* Get border style from a border field */
{% macro border_style(border_field) %}
  {% set top_border_style = border_field.top.style %}
  {% set right_border_style = border_field.right.style %}
  {% set bottom_border_style = border_field.bottom.style %}
  {% set left_border_style = border_field.left.style %}
  {{ top_border_style }} {{ right_border_style }} {{ bottom_border_style }} {{ left_border_style }}
{% endmacro %}


{###########################################################################}
{####################   Get Padding from Spacing Field   ###################}
{###########################################################################}

/* Get padding top / right / bottom / left from spacing field */
{% macro padding(spacing_field) %}
  {% set top_padding = spacing_field.padding.top.value ~ spacing_field.padding.top.units %}
  {% set right_padding = spacing_field.padding.right.value ~ spacing_field.padding.right.units %}
  {% set bottom_padding = spacing_field.padding.bottom.value ~ spacing_field.padding.bottom.units %}
  {% set left_padding = spacing_field.padding.left.value ~ spacing_field.padding.left.units %}
  {{ top_padding }} {{ right_padding }} {{ bottom_padding }} {{ left_padding }}
{% endmacro %}

 

3. Create CSS

Finally, copy the following CSS root element using the HubL variables above further down in your css > theme-overrides.css file, I've chosen to do so under section "5. Forms":

/* Forms */

:root {
  /* Global */
  --hsf-global__font-family: {{ form_global_font_family }};
  --hsf-global__font-size: {{ form_global_font_size }};
  --hsf-global__color: {{ form_global_color }};
  --hsf-global-error__color: {{ form_global_error_color }};

  /* Row */
  --hsf-row__horizontal-spacing: {{ form_row_horizontal_spacing }};
  --hsf-row__vertical-spacing: {{ form_row_vertical_spacing }};
  --hsf-module__vertical-spacing: {{ form_row_module_vertical_spacing }};

  /* Button */
  --hsf-button__font-family: {{ form_button_font_family }};
  --hsf-button__font-size: {{ form_button_font_size }};
  --hsf-button__color: {{ form_button_color }};
  --hsf-button__background-color: {{ form_button_background_color }};
  /*--hsf-button__background-image: {{ form_button_background_image }};*/
  --hsf-button__border-radius: {{ form_button_corner_radius }};
  --hsf-button__padding: {{ form_button_padding }};
  --hsf-button__box-shadow: {{ form_button_box_shadow }};

  /* Rich Text */
  --hsf-richtext__font-family: {{ form_rich_text_font_family }};
  --hsf-richtext__font-size: {{ form_rich_text_font_size }};
  --hsf-richtext__color: {{ form_rich_text_color }};

  /* Heading */
  --hsf-heading__font-family: {{ form_heading_font_family }};
  --hsf-heading__color: {{ form_heading_color }};
  --hsf-heading__text-shadow: {{ form_heading_text_shadow }};

  /* Background */
  --hsf-background__background-color: {{ form_background_color }};
  /*--hsf-background__background-image: {{ form_background_image }};*/
  /*--hsf-background__background-size: {{ form_background_size }};*/
  /*--hsf-background__background-position: {{ form_background_position }};*/
  /*--hsf-background__background-repeat: {{ form_background_repeat }};*/
  --hsf-background__border-style: {{ form_background_border_style }};
  --hsf-background__border-color: {{- form_background_border_color -}};
  --hsf-background__border-radius: {{ form_background_corner_radius }};
  --hsf-background__border-width: {{ form_background_border_width }};
  --hsf-background__padding: {{ form_background_padding }};

  /* Progress Bar */
  --hsf-progressbar-text__font-family: {{ form_progressbar_font_family }};
  --hsf-progressbar-text__font-size: {{ form_progressbar_font_size }};
  --hsf-progressbar-text__color: {{ form_progressbar_color }};
  --hsf-progressbar-progressLine__background-color: {{ form_progressbar_progressline_background_color }};
  /*--hsf-progressbar-progressLine__background-image: {{ form_progressbar_progressline_background_image }};*/
  --hsf-progressbar-progressLine__border-color: {{ form_progressbar_progressline_border_color }};
  --hsf-progressbar-progressLine__border-style: {{ form_progressbar_progressline_border_style }};
  --hsf-progressbar-progressLine__border-width: {{ form_progressbar_progressline_border_width }};
  --hsf-progressbar-trackLine__background-color: {{ form_progressbar_trackline_background_color }};

  /* Error Alert */
  --hsf-erroralert__font-family: {{ form_error_alert_font_family }};
  --hsf-erroralert__font-size: {{ form_error_alert_font_size }};
  --hsf-erroralert__color: {{ form_error_alert_color }};

  /* Info Alert */
  --hsf-infoalert__font-family: {{ form_info_alert_font_family }};
  --hsf-infoalert__font-size: {{ form_info_alert_font_size }};
  --hsf-infoalert__color: {{ form_info_alert_color }};

  /* Field Input */
  --hsf-field-label__font-family: {{ form_field_label_font_family }};
  --hsf-field-label__font-size: {{ form_field_label_font_size }};
  --hsf-field-label__color: {{ form_field_label_color }};
  --hsf-field-label-requiredindicator__color: {{ form_field_label_required_indicator_color }};
  --hsf-field-description__font-family: {{ form_field_label_description_font_family }};
  --hsf-field-description__color: {{ form_field_label_description_color }};
  --hsf-field-footer__font-family: {{ form_field_label_footer_font_family }};
  --hsf-field-footer__color: {{ form_field_label_footer_color }};
  --hsf-field-input__font-family: {{ form_field_label_input_font_family }};
  --hsf-field-input__color: {{ form_field_label_input_color }};
  --hsf-field-input__background-color: {{ form_field_label_input_background_color }};
  --hsf-field-input__placeholder-color: {{ form_field_label_input_placeholder_color }};
  --hsf-field-input__border-color: {{ form_field_label_input_border_color }};
  --hsf-field-input__border-width: {{ form_field_label_input_border_width }};
  --hsf-field-input__border-style: {{ form_field_label_input_border_style }};
  --hsf-field-input__border-radius: {{ form_field_label_input_border_radius }};
  --hsf-field-input__padding: {{ form_field_label_input_padding }};

  /* Field Textarea */
  --hsf-field-textarea__font-family: {{ form_field_textarea_font_family }};
  --hsf-field-textarea__color: {{ form_field_textarea_color }};
  --hsf-field-textarea__background-color: {{ form_field_textarea_background_color }};
  --hsf-field-textarea__placeholder-color: {{ form_field_textarea_placeholder_color }};
  --hsf-field-textarea__border-color: {{ form_field_textarea_border_color }};
  --hsf-field-textarea__border-width: {{ form_field_textarea_border_width }};
  --hsf-field-textarea__border-style: {{ form_field_textarea_border_style }};
  --hsf-field-textarea__border-radius: {{ form_field_textarea_border_radius }};
  --hsf-field-textarea__padding: {{ form_field_textarea_padding }};

  /* Field Checkbox */
  --hsf-field-checkbox__padding: {{ form_field_checkbox_padding }};
  --hsf-field-checkbox__background-color: {{ form_field_checkbox_background_color }};
  --hsf-field-checkbox__color: {{ form_field_checkbox_color }};
  --hsf-field-checkbox__border-color: {{ form_field_checkbox_border_color }};
  --hsf-field-checkbox__border-width: {{ form_field_checkbox_border_width }};
  --hsf-field-checkbox__border-style: {{ form_field_checkbox_border_style }};

  /* Field Radio */
  --hsf-field-radio__padding: {{ form_field_radio_padding }};
  --hsf-field-radio__background-color: {{ form_field_radio_background_color }};
  --hsf-field-radio__color: {{ form_field_radio_color }};
  --hsf-field-radio__border-color: {{ form_field_radio_border_color }};
  --hsf-field-radio__border-width: {{ form_field_radio_border_width }};
  --hsf-field-radio__border-style: {{ form_field_radio_border_style }};
}

If you found this helpful, buy me a coffee! ❤️

←  Previous Article

Write a case-insensitive HubDB equals query for a text column

Contact

Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS