Module and theme fields

The field's name, which you'll reference when incorporating the field and its values in the module or theme. Cannot contain spaces or special characters.

The text the content creator sees describing the field. May contain spaces.

Sets whether the field can be left blank in the editor. If true, content cannot be published without a value in the field.

Sets whether the field is editable in the content editor. If true, the field will not appear in the content editor.

The type of field. Field types are unique per field and can be found within the documentation for each field below.

Text that displays inline below field's label (limit 400 characters). Best used for information required to use the field.

You can include the following HTML tags (other tags will be ignored on render):

a, b, br, em, i, p, small, strong, span.

Text that displays in the editor within a tooltip on hover to assist the content creator (limit 300 characters). Best used for information that is supplementary but not required to use the field.

You can include the following HTML tags (other tags will be ignored on render):

a, b, br, em, i, p, small, strong, span.

The field's unique ID, which is set by HubSpot. When building locally you do not need to specify this ID.

Sets the field's display conditions. For example, you can set a field to only display when another checkbox field has been selected. Learn more about visibility.

By default, fields are full-width in the editor. When two consecutive fields in the fields.json file are set to half_width, they will instead appear next to each other in the editor.

Object containing horizontal_align and vertical_align.

Determines if only horizontal, only vertical, or both alignment controls should be shown. Can be:

• HORIZONTAL
• VERTICAL
• BOTH

Object containing the image src, background position and background size.

Specifies which blog is selected by default. This parameter accepts arguments of either 'default' or a blog ID (available in the URL of the Blog dashboard).

Set's whether the default state of this field is true or false.

Choose the visual display style for the field. Can appear as either a toggle or a checkbox.

object with keys for border radius, top, bottom, left, and right sides.

Array containing the selectable options, formatted as unique internal value followed by label.

Sets the default selected value from the choice array.

Optional field that enables multiple options to be selected when set to true.

Set display to checkbox or select to configure whether the field displays as a list of checkboxes or a dropdown menu.

Set the field's appearance using one of the following values:

• select: renders a dropdown menu. Allows for selecting multiple options when multiple is set to true. 
• checkbox: renders a list of selectable checkboxes. Allows for selecting multiple options when multiple is set to true and reordering_enabled is set to false.
• radio: renders a list of radio button options. Does not allow for selecting multiple options.
• buttons: renders a set of buttons based on the specified preset. Does not allow for selecting multiple options.

Configures the button preset to use when display is set to buttons. For each preset, you'll need to configure the choices labels to match a specific set of values. Learn more about these preset options below.

Sets the default selected color and opacity.

Sets whether opacity input is shown.

• true: the opacity input is shown.
• false: the opacity input is hidden.
• If left undefined, opacity input will not display in email modules, but will display in other module types.

The default selected CTA. Expects a CTA id which can be found in the URL when editing a CTA in the CTA manager.

Type of CRM Object the user can pick from. Supported CRM Object Types

Array of property names associated with the object type in string form. Ex: "date_of_birth" is a property associated with a contact. Use this to limit the information available to the page to just what you need.

Object with id of default selected object instance. Contact ID, Company ID etc

Type of CRM Object the user can pick from. Learn more about supported CRM object types.

Contains the default property to display.

The Unix Epoch timestamp for the date and time you want to default to. Leave this null to allow the date and time picker to start the content creator at the current date and time in the picker.

The Unix Epoch timestamp for the date and time you want to default to. Leave this null to allow the date and time picker to start the content creator at the current date and time in the picker.

Array of email address strings ["bob@example.com", "dennis@example.com"]

Supported source types for either oEmbed URLs (oembed), HTML embed code (html), or Media Bridge (media_bridge).

Supported oEmbed type including "photo", "video", "link", and "rich". Does not apply to the supported_source_types of html

Array of provider IDs that determine which Media Bridge providers are available to select content from.

Note: This param will also be populated when installing a Media Bridge Provider Application. 

This parameter is always set to "embed"

An array containing the "source_type" parameter. This parameter has one string based value from the options provided in the "supported_source_types" parameter.

File URL.

Acceptable values: "file", "document", "image".
The picker shows assets uploaded to either the file manager, or the document manager depending on this parameter.

Email id

Font object with settings for size, sizing unit, color, and styles for bold, italic, and underline.

HubSpot automatically loads the selected web font to the page if the font is selected and referenced by HubL in a stylesheet or in a module. Set this to false, if you are already loading the font to the page, that way the font won't load twice.

Using the hidden_subfields nested object, you can set a boolean for which controls of the Font field to hide. Subfields include: font, size, bold, italic, underline, and color.

If using a web font, the variant of the font you want to use. For example, to use the 700-weight version of a font, set this to "700". To use the 400-weight italic version of a font, set this to "400i".

Object containing directional settings for a gradient ("side_or_corner") and color stops for the gradient as an array of objects.

The name or ID of the HubDB table. This field is required.

An array of column names to fetch from the table. If left blank, will return all columns in the table.

An array of column names to use in choice label. If left blank, will return only the first column in the table.

The format you would like the column data to display in the HubDB row selector using the percent symbol and number to designate a column.
Ex: %0 (%1) would appear as Column0Value (Column1Value)

Object containing “id” for setting the default hubdb row.

HubDB table id

Icon object

The FontAwesome icon set to use. Possible values are:

• fontawesome-6.4.2
• fontawesome-5.14.0
• fontawesome-5.0.10

Sets properties for image sizing, alt-text, and more. Can contain the following properties: 

• size_type: whether the image is automatically or manually sized:
  • "auto": HubSpot will automatically adjust the size of the image based on its original dimensions.
  • "auto_custom_max": HubSpot will automatically adjust the size of the image with maximum dimensions set using the "max_height" and "max_width" properties.
  • "exact": HubSpot will size the image based on the dimensions set using the "height" and "width" properties.
• src: the URL of the default image. Must be an absolute path to an image.
• alt: the image's default alt-text.
• loading: the image's lazy loading options. Can be set as "disabled" (default), "eager", or "lazy".

determines if the image is to act responsively or have a fixed height and width.

Determines if the controls for choosing to lazy load the image are shown in the page editor.

The default URL and link open behavior. This object includes:

• A url object which contains:
  • content_id: if linking to HubSpot content, the ID of that content. Set to null if linking to external content.
  • type: the type of URL. Learn more about supported types below.
  • href: the URL of the content. When linking to HubSpot content, set this to null and use content_id instead.

The types of links that content creators can select. Remove types from the list that you don't want content creators to have access to set. Valid types include:

By default, content creators will only be able to select the no_follow option.

When set to true, content creators can also select:

• sponsored: a sponsored link, such as a paid ad link. 
• user_generated_content: content generated by users, such as forums.

Learn more about link attributes.

Determines if the controls for choosing to lazy load the image are shown in the page editor.

Logo object. 

If show_loading is set to true, you can include a loading property to set the image's lazy loading options. Options include:

• "disabled" (default)
• "eager"
• "lazy"

The menu ID for the menu. The default value of null, defaults to the default menu under navigation.

A default number to be used.

Added as a prefix to the number field.

Added as a suffix to the number field.

Adds a placeholder value to the field.

A default page id to be selected.

string of content to be displayed supports HTML. 

Note: You cannot use the get_asset_url function within this default property. 

An array of items that allows you to configure the Rich Text Editor Toolbar and what options are available for content editors. 

JSON structure for menu and menu children.

Sets the default spacing values.

Contains padding and margin objects:

• padding: can contain top, right, bottom, left objects
• margin: can contain top and bottom objects

Use units to set the units that a content creator can use in HubSpot. Learn more about units below.

Sets the guidelines for min and max amount of spacing. 

Contains padding and margin objects:

• padding: can contain top, right, bottom, left objects
• margin: can contain top and bottom objects

Use units to set the units that a content creator can use in HubSpot. Learn more about units below.

Blog tag id

Text string.

Object containing horizontal_align and vertical_align.

Determines if only horizontal, only vertical, or both alignment controls should be shown. Can be:

• HORIZONTAL
• VERTICAL
• BOTH

URL object, with type, href and content id (if content is a page or post on HubSpot)

list of the types of links this field allows content creators to select. Remove types from the list that you don't want content creators to have access to set. Types include:

• EXTERNAL: renders a text input field for an external URL.
• CONTENT: renders a dropdown menu containing the account's website and landing pages.
• FILE: renders a file selector.
• EMAIL_ADDRESS: renders a text input field for an email address.
• BLOG: renders a dropdown menu containing the account's blog listing pages.
• PHONE_NUMBER: renders a text input field for a phone number. The number must start with + and contain 7-15 digits (excluding the country code).
• WHATSAPP_NUMBER: renders a dropdown menu containing the account's connected WhatsApp numbers.

Video object with settings for player_id, height, width, size_type, conversion_asset, loop_video, mute_by_default, autoplay, and hide_control.

Whether content creators can see advanced default options.

Accepts either "FORM", "CTA", or ""

The id of the Form or CTA type

Whether the conversion asset should be shown before the video starts or after it ends. Accepts either "PRE" or "POST".