Module and theme fields

Last updated:

Add fields to modules and themes to allow content creators to control various aspects of a page within the page editor. Below, learn about all of the fields available for modules and themes, along with their available properties.

For more information about implementing module and theme fields, including field groups and repeating fields, view the module and theme fields overview.

Properties used by all fields

All fields share a set of common properties. These are general fields, such as the field's name or the help text that displays for content creators using the field in the module or theme. 

// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Properties used by all fields
ParameterTypeDescription Default
name
String

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.

 richtext_field, date_field, etc.
label
String

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

 Rich text field, Date field, etc.
required
Boolean

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

 false
locked
Boolean

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

 false
type
String

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

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.
help_text
String

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.
id
String

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

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.
display_width
String

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.

Alignment

Enables content creators to position an element within a container. To enable text alignment, use the text alignment field instead. 

Alignment fields are supported in modules and can only be used as style fields.

Alignment field
// alignment field { "name": "img_position", "label": "Position Image", "help_text":"Position the image within it's container.", "required": false, "type": "alignment", "default": { "horizontal_align": "CENTER", "vertical_align": "TOP", } }
Blog field
ParameterTypeDescription Default
default
Object

Object containing horizontal_align and vertical_align.
alignment_direction
String

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

  • HORIZONTAL
  • VERTICAL
  • BOTH
 BOTH

Background image

This field provides a background image field which has subfields for background position and background size. Background image fields have a .css property that returns CSS based on the field's value. Learn more about the generated CSS property.

Background Image fields are supported in modules and can only be used as style fields.

Background image field
// background image field { "name": "bg_image", "label": "Background image", "required": false, "type": "backgroundimage", "default": { "src": "https://example.com/img.png", "background_position": "MIDDLE_CENTER", "background_size": "cover" } }
Blog field
ParameterTypeDescription Default
default
Object

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

 null

Blog

This field provides a way for content editors to select a blog, providing you, the developer the blog's id. This is useful for situations like pulling teaser information for featured blogs in modules. You can use the blog id in blog-related HubL functions to get information like blog authors, recent blog posts, recent blog posts with a specific tag, and more.

Blog fields are supported in modules.

Screenshot of Blog field
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
Blog field
ParameterTypeDescription Default
default
"default" / blog id

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).

 null

Boolean

This field provides a way for content editors to enable/disable functionality. Booleans can only be true or false. Often it makes sense to make groups or fields conditional based on boolean fields. If you think you might need to provide more than two states down the road, a Choice field may be a better option as you can grow into that with less effort should needs change later.

Boolean fields are supported in both themes and modules.
Boolean fields can be used as style fields.

Screenshot of Boolean field
// Boolean field { "name" : "is_teaser_img", "label" : "Enable Teaser Image", "required" : false, "locked" : false, "type" : "boolean", "display":"checkbox", "inline_help_text" : "Shows Teaser image when toggled on", "help_text" : "Teaser images are used to help provide visual context to the post.", "default" : false }
Blog field
ParameterTypeDescription Default
default
Boolean

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

 false
display
String

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

 checkbox

A toggle switch can make sense when the value of the field enables/disables other fields conditionally being shown. Another time a toggle may be useful is when the field represents a major design change for the module.

Checkboxes make sense for smaller changes that may not have as drastic of an effect on the module's display, such as hiding or showing individual small elements.

Border

This field provides content creators a user interface for creating a border around an element. Border fields have a .css property that returns CSS based on the field's value. Learn more about the generated CSS property.

Border fields are supported in modules.
Border fields can only be used as style fields.

Screenshot of border module field in page editor
// Border field { "id" : "styles.border", "name" : "border", "label" : "border", "required" : false, "locked" : false, "allow_custom_border_sides" : false, "type" : "border", "default" : { "top": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "bottom": { "width": { "value": 1, "units": "px" }, "opacity": 100, "style": "solid", "color": "#ffffff" }, "left": null, "right": null } }
Blog field
ParameterTypeDescription Default
default
Boolean

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

 {}

Choice

Choice fields allow a content creator to select one or more items from a list of options, either within a dropdown menu, radio select, or checkboxes.

The options for a choice field can have separate labels for their values. After a module's been used in a page, the option labels can be modified without impacting sites, since the value is still the same. Changing the value, however, and any modules that previously had that value will become disassociated.

Choice fields are supported in both themes and modules. Choice fields can be used as style fields.

choice-field-dropdown
// Choice field { "name" : "img_position", "label" : "Image Position", "required" : false, "locked" : false, "multiple":"true", "display" : "select", "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ], "type" : "choice", "default" : "img--left" }
Boolean field
ParameterTypeDescription Default
choices
Array

Array of value and label pairs. Values listed first.

 [ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]
default
Value

Sets the default selected value from the choice array.
multiple
String

Optional. To allow multiple options to be selected, set the value to true. 

 False
display
String

Set the field's appearance.

When not including multiple, you can set this as either "radio" or "select".

When multiple is set to true, you can set this as either "checkbox" or "select".

 "select"

Color

Color fields provide a color picker interface for content creators. They support solid colors as well as transparency. They are a perfect choice for when you want to give content creators full control over colors within a module.

By default, the opacity input of a color field is hidden for email modules, as some email clients don't respect opacity rules. You can reveal the opacity field for email modules by setting show_opacity to true.

Color fields are supported in both themes and modules.Color fields can be used as style fields

Color field
// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
Color field
ParameterTypeDescription Default
default
Object

Sets the default selected color and opacity.

 { "color" : "#ffffff", "opacity" : 100 }
show_opacity
Boolean

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.
 undefined

CTA

Call-To-Action (CTA) fields provide a way for users to pick a CTA to display. CTA's are essentially trackable buttons or links. Content creators create CTAs that can be used throughout a site. 

CTA fields are supported in modules.
CTA fields are available in CMS Hub Professional and Enterprise.

Call To Action Field
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
CTA field
ParameterTypeDescription Default
default
String

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

 null

CRM object

CRM object fields provide a way for users to pick an individual instance of a CRM object to display. 

module.fieldname.properties returns the properties fetched from this object instance. This makes it so you don't need to use the crm_object() function to get the data for the selected object instance.

module.fieldname.id returns the object instance id.

CRM object fields are supported in modules.
CRM object fields are available in CMS Hub Professional and Enterprise.

CRM Object Field
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
CRM object field
ParameterTypeDescription Default
object_type
Required
String

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

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.
default
Object

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

 null

CRM object property

Use the CRM object property field to access property metadata, such as the label and property name, from a specified object type. This enables content creators to select from object properties when needing to display property details on a page.

For example, you could add this field to a custom table module to populate table headings based on the selected properties.

CRM object fields are supported in modules. 

crm-object-property-dropdown-menu0
// fields.json { "name" : "crmobjectproperty_field", "label" : "CRM object property", "required" : true, "locked" : false, "object_type" : "contact", "type" : "crmobjectproperty", "default" : { "property" : "field_of_study" } }
CRM object field
ParameterTypeDescription Default
object_type
Required
String

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

Contains the default property to display.
In addition, you can use the following snippets to return other property details:
  • {{ module.fieldname.property }}: returns the property's internal name.
  • {{ module.fieldname.property_definition.label }}: returns the property's label.
  • {{ module.fieldname.property_definition.type }}: returns the property type (e.g., string).

Date

Date fields provide a date picker interface to make it easy for content creators to select a date. Returns a timestamp you can use in your code.

Date fields are supported in modules.

Date field with calendar picker open
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
Date field
ParameterTypeDescription Default
default
Timestamp

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.

 null

Date and time

Date and time fields provide a date picker interface just like the date field, as well as a time picker to make it easy for content creators to select a date and time of day. Returns a timestamp you can use in your code.

Date and time fields are supported in modules.

Event Start
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
Date and time field
ParameterTypeDescription Default
default
Timestamp

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.

 null

Email Address

Email address fields allow a user to select multiple email addresses. This could be used for displaying contact information. The email field returns an array of selected email addresses you can loop through.

Email fields are supported in modules.

email-field
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Email address field
ParameterTypeDescription Default
default
Array

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

 null

Embed

Embed fields allow the user to add a URL from an oEmbed-enabled site or paste in an embed code from another site. To learn more about oEmbed usage on HubSpot, and see use cases, visit our oEmbed document.

Embed field
// embed field { "name" : "embed_field", "label" : "Embed", "required" : false, "locked" : false, "supported_source_types" : [ "oembed", "html" ], "supported_oembed_types" : [ "photo", "video", "link", "rich" ], "type" : "embed", "default" : { "source_type" : "oembed" } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
supported_source_types
Array

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

 ["oembed", "html"]
supported_oembed_types
Array

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

 [ "photo", "video", "link", "rich" ]
supported_media_bridge_providers
Array

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. 
type
String

This parameter is always set to "embed"

 "embed"
default
Dict

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

 oembed

File

File fields allow the user to upload a file to the file manager, or document manager, and make it easy to attach items that are in those locations. This can be useful for linking out to PDF files or files of other formats. For displaying images on a page you should use the image field.

File fields are supported in modules.

File field
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
File field
ParameterTypeDescription Default
default
String

File URL.

 null
picker
String

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

 file

Followup email

Followup email fields allow a content creator to designate an email that will be sent in response to a form submission. This works in tandem with the HubL form tag, through the simple_email_campaign_id parameter.

Followup email fields are supported in modules.

followup email field
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Email address field
ParameterTypeDescription Default
default
String

Email id

 null

Font

Font fields provide content creators basic font styling controls. Content creators can choose the size, color, font family, and the format (bold, italic, and underlined). The listed fonts are all standard web-safe fonts. These fonts are sourced from Google Fonts but served by HubSpot directly on the  domain that the page loads on.

Font fields are supported in both themes and modules. Font fields can be used as style fields.

Font field

Please note:

  • Font family is determined by the combination of the font and font_set properties. You must include both to load the font. When inheriting fields, this means you need to inherit both values.
  • Hiding CSS-related sub fields with visibility will not prevent that CSS from being output in the styling returned in the field object. You'll still need to manually include the CSS in the styles object.
// Font field { "name" : "font", "label" : "Font", "required" : false, "locked" : false, "load_external_fonts" : true, "type" : "font", "default" : { "size" : 12, "font":"Merriweather", "font_set":"GOOGLE", "size_unit" : "px", "color" : "#000", "styles" : { } }, "visibility" : { "hidden_subfields" : { "font": true, "size": true } } }
Font field
ParameterTypeDescription Default
default
Object

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

 { "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }
load_external_fonts
Boolean

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.

 true
visibility
Object

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.
variant
String

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".

Form

Form fields allow a content creator to designate a form in their account. You can then use this to render a form to a page using the HubL form tag. 

Form fields are supported in modules.

form field-Aug-21-2020-08-09-55-35-PM
// Form field { "name" : "form", "label" : "Form", "required" : false, "locked" : false, "type" : "form", "default" : { "form_id" : "f7110408-1935-4ed3-8a8e-293bb1c9d1ec", "response_type" : "inline", "message" : "Thanks for submitting the form.", "gotowebinar_webinar_key" : null, "form_type" : "HUBSPOT" } }
Email address field
ParameterTypeDescription Default
default
Object

Object for forms containing the selected form id, response type and message.

 { "response_type" : "inline", "message" : "Thanks for submitting the form." }

Gradient

This field provides a way for content creators to create and configure gradients. At this time linear gradients support up to 5 color stops. Gradient fields have a .css property that returns CSS based on the field's value. Learn more about the generated CSS property.

Gradient fields are supported in modules. Gradient fields can only be used as style fields.

Gradient Field
// Gradient field { "name": "bg_gradient", "label": "Background gradient", "help_text": "Sets a gradient behind the content", "required": false, "type": "gradient", "default": { "colors": [{ "color": { "r": 0, "g": 0, "b": 0, "a": 1 } }, { "color": { "r": 255, "g": 255, "b": 255, "a": 1 } }], "side_or_corner": { "verticalSide": "BOTTOM", "horizontalSide": null } } }
Email address field
ParameterTypeDescription Default
default
Object

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

HubDB Row

HubDB Row fields allow a content creator to select an individual row (or rows if using repeater fields) from a defined table. You can then use this field to create user-defined lists, tables, resources, and more.

HubDB Row fields are supported in modules.
HubDB Row fields are available in CMS Hub Professional and Enterprise.

hubdb-row-field
// HubDB Row field { "name" : "hubdbrow_field", "label" : "HubDB row", "required" : false, "locked" : false, "table_name_or_id" : "3096859", "columns_to_fetch" : [ "name", "price", "desc" ], "display_columns" : [ "name", "price", "desc" ], "display_format" : "%0 - %1 :::: %2", "type" : "hubdbrow", "default" : { "id" : 4450468943 } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
table_name_or_id
String

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

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

 []
display_columns
Array

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

[]
display_format
String

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)

 ""
default
Object

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

 { “id” : null }

HubDB Table

HubDB Table fields allow a content creator to designate a HubDB  in their account. You can then use this to render a form to a page using the HubL form tag. Returns the table id, which you can use with the HubDB HubL functions.

HubDB Table fields are supported in modules. HubDB Table fields are available in CMS HubProfessional and Enterprise.

HubDB field
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Email address field
ParameterTypeDescription Default
default
String

HubDB table id

 null

Icon

Icon fields provide an icon picker UI to make it easier for content creators to add icons to your modules. The Icon field is preloaded with FontAwesome Icons.

Icon fields are supported in modules. Icon fields can be used as style fields.

icon field
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-5.14.0", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Icon field
ParameterTypeDescription Default
default
Object

Icon object
icon_set
String

The FontAwesome icon set to use. Possible values are:
fontawesome-5.14.0
fontawesome-5.0.10

 fontawesome-5.0.10

Image

Image fields provide an easy interface for content creators to add images to a module or theme. Image fields provide a file picker interface that lists images from the File Manager. Since images can be used and displayed in different ways, developers can limit the sizing options available to the content creator in the UI as well as allow for lazy-loading of images.

Image Field

Image fields are supported in modules.
Images can be used as style fields. 
You should only use Image fields as style fields, if the image will be purely presentational, not convey meaning and not a background image. This is to follow best practices for accessibility.

// Image field { "name" : "image_field", "label" : "Image", "required" : false, "locked" : false, "responsive" : true, "resizable" : true, "show_loading" : false, "type" : "image", "default" : { "size_type" : "exact", "src" : "", "alt" : "image-alt-text", "loading" : "lazy", "width" : 128, "height" : 128, "max_width" : 128, "max_height" : 128 } }
Link field
ParameterTypeDescription Default
default
Object

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".
 { "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Boolean

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

 true
show_loading
Boolean

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

 false

Link

Link fields provide an easy interface for content creators to provide links to URLs and email addresses. For external links, content creators choose "external". For email links "email address". Finally for content hosted on the HubSpot CMS they can use "content" which shows a list of all pages and blog posts in the account, file showing file assets, and blog, showing all of the blog listings in the account. Link fields are very similar to URL fields except for the key difference that they provide a UI for "open in new window" and "tell search engines not to follow". If you do not want content creators to have that control use the URL field.

Link fields are supported in modules.

link field
// Link field { "name" : "link", "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "link", "show_advanced_rel_options" : false, "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false } }
Link field
ParameterTypeDescription Default
default
Object

URL object

 { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

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.

 [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]
show_advanced_rel_options
Boolean

Whether content creators can see advanced rel options. 

 false

Logo fields provide a way for content creators to specify logo images to use in a page, defaulting to the domain's logo. This is useful for site headers and footers that may contain the company logo. Logo fields also allow for lazy loading.

Logo fields are supported in modules.

logo field
// Logo field { "name" : "logo", "label" : "Logo", "required" : false, "locked" : false, "type" : "logo", "show_loading": true, "default" : { "override_inherited_src" : false, "src" : null, "alt" : null, "loading": "lazy" } }
Link field
ParameterTypeDescription Default
show_loading
String

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

 false
default
Object

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"
 { override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }

Menu

Menu fields provide an easy interface for content creators to create, edit and select a navigation menu that is re-usable on other pages. This field is great for use in menus that are used across multiple pages like main navigation and footer navigation and other global content.  Use this field in tandem with the menu tag or menu() function, to render a menu inside of your module.

For menus that don't make sense to re-use on other pages, like a table of contents menu, use the simple menu field.

Menu fields are supported in modules.

menu field
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
Link field
ParameterTypeDescription Default
default
Integer

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

 null

Number

Number fields provide an easy interface for content creators to enter in or adjust numerical values and options. This can be used for creating percentage based items or anything where numbers are needed for input.

Number fields are supported in modules. Number fields can be used as style fields.

Number field
// Number field { "name" : "number_field", "label" : "Number", "required" : false, "locked" : false, "display" : "slider", "min" : 1, "max" : 10, "step" : 1, "type" : "number", "prefix": "", "suffix" : "", "default" : null, "placeholder": "50" }
Link field
ParameterTypeDescription Default
default
Number

A default number to be used.

 null
prefix
String

Added as a prefix to the number field.
suffix
String

Added as a suffix to the number field.
placeholder
String

Adds a placeholder value to the field.

Suffix and prefix parameters are for display purposes in the content editor and have no effect on the numerical value of the field. 

Page

Page fields provide an interface for content creators to select site pages and landing pages.

The value returned by a page field is the page id of the selected page. When used in tandem with the content_by_id or content_by_ids functions, you can use data from the selected pages in the current page.

Page fields are supported in modules.

Page field
// Page field { "name" : "page_field", "label" : "Page", "help_text" : "Pulls data from the selected page.", "required" : false, "locked" : false, "placeholder" : "Page to pull from", "type" : "page", "default" : null }
Link field
ParameterTypeDescription Default
default
Integer

A default page id to be selected.

 null

Rich text

Rich Text fields provide content creators with a WYSIWYG text editor experience. When a rich text field's value is printed it is printed as HTML. When you do not want content creators to have formatting capabilities use text fields.

Rich text fields are supported in modules.

Rich Text field
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
Link field
ParameterTypeDescription Default
default
String

string of content to be displayed supports HTML. 

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

 ""
enabled_features
Optional
Array

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

Simple menu

Simple menu fields provide an easy interface for content creators to create a navigation menu that is not re-usable on other pages. For menus that should be reusable, use the menu field. A time you may want this is for a table of contents menu that links to headings on very long pages, or a list of links to content that only makes sense to have on the current page.

Simple menu fields are supported in modules.

Simple menu field
// Simple menu field { "name" : "toc_menu", "label" : "Table of Contents", "required" : false, "locked" : false, "type" : "simplemenu", "default" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Why is product marketing important?", "linkUrl" : null, "linkParams" : null, "linkTarget" : null, "type" : "NO_LINK", "children" : [ { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "Product Marketing Responsibilities", "linkUrl" : "#product-marketing-responsibilities", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "1. Identify the buyer personas and target audience for your product.", "linkUrl" : "#step1", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "2. Successfully create, manage and carry out your product marketing strategy.", "linkUrl" : "#step2", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }, { "isPublished" : false, "pageLinkId" : null, "pageLinkName" : null, "isDeleted" : null, "categoryId" : null, "subCategory" : null, "contentType" : null, "state" : null, "linkLabel" : "How HubSpot can help", "linkUrl" : "https://hubspot.com", "linkParams" : null, "linkTarget" : null, "type" : "URL_LINK", "children" : [ ] } ] }
Link field
ParameterTypeDescription Default
default
Array of objects

JSON structure for menu and menu children.

 []

Spacing

This field provides a user interface (UI) for content creators to set padding and margin. Spacing fields have a .css property that returns CSS based on the field's value. Learn more about the generated CSS property.

Spacing fields are supported in modules.
Spacing fields can only be used as style fields.

screenshot of spacing style field expanded in page editor
// Spacing field { "name": "img_spacing", "label": "Spacing around image", "required": false, "type": "spacing", "limits": { "padding": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "left": { "max": 50, "units": ["px", "pt", "em"] }, "bottom": { "max": 50, "units": ["px", "pt", "em"] } }, "margin": { "top": { "max": 50, "min": 25, "units": ["px", "pt", "em"] }, "bottom": { "max": 25, "units": ["Q", "rem", "em"] } } }, "default": { "padding": { "top": { "value": 25, "units": ["px", "pt", "em"] }, "bottom": { "value": 25 "units": ["px", "pt", "em"] }, "left": { "value": 25, "units": ["px", "pt", "em"]}, "right": { "value": 25, "units": ["px", "pt", "em"] } }, "margin": { "top": { "value": 20, "units": ["px", "pt", "em"] }, "bottom": { "value": 20, "units": ["px", "pt", "em"] } } } }
Link field
ParameterTypeDescription Default
default
Object

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.

 {}
limits
Object

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.

When using the spacing field, please note the following:

  • You must include a units list when setting a min or max. 
  • The units property supports the following unit types: %, ch, em, ex, in, lh, pc, pt, px, Q, rem, vh, vmax, vmin, and vw.
  • When a content creator edits all padding together, HubSpot will use the highest min value and the lowest max value. In addition, only the units shared by all sides will be available to the content creator.

Tag

Tag fields provide  a blog tag picker for content creators. This tag picker returns a blog tag id which can then be used in blog tag related functions such as Blog Tag URL and Blog Recent Tag Posts.

Tag fields are supported in modules.

tag field
// Tag field { "id" : "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9", "name" : "blog_tag", "label" : "Blog Tag", "required" : false, "locked" : false, "tag_value" : "SLUG", "type" : "tag", "default" : null }
Tag field
ParameterTypeDescription Default
default
String

Blog tag id

 null

Text

Text fields provide content creators a simple text editing experience with no rich text functionality. Text fields initially show as a single line, but can actually expand to be textareas, supporting multiple lines. Use these when you do not want content creators to have control over formatting. If you do want to provide formatting controls use rich text fields.

Text fields are supported in modules.

text field
// Text field { "name" : "product_name", "label" : "Product Name", "required" : false, "locked" : false, "validation_regex" : "", "allow_new_line" : false, "show_emoji_picker" : false, "type" : "text", "default" : "" }
Link field
ParameterTypeDescription Default
default
String

Text string.

 ""

Text Alignment

This field provides content creators a way to align text content within a container. This should not be used for aligning other assets as there is a field type specifically for that.

Text alignment fields are supported in modules. Text alignment fields can only be used as style fields.

Text Alignment field
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
Blog field
ParameterTypeDescription Default
default
Object

Object containing horizontal_align and vertical_align.
alignment_direction
String

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

  • HORIZONTAL
  • VERTICAL
  • BOTH
 BOTH

URL

URL fields provide a similar experience to link fields. Providing a UI for content creators to add links. URL fields, however, do not show a UI for open in a new window, nor tell search engines not to follow. Use this field when you as a developer want to dictate the values for that. If you want the user to have control, use link fields instead.

URL fields are supported in modules.

URL field
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Link field
ParameterTypeDescription Default
default
Object

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

 { "content_id" : null, "href" : "", "type" : "EXTERNAL" }
supported_types
Array

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.

 [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

Video

Video fields provide content editors with a place to add HubSpot Video to their module content without the need of using rich text fields.

Video Field
//Video field { "id" : "ca4a319e-5b58-422e-47ac-49ce1b51b507", "name" : "videoplayer_field", "label" : "Video", "required" : false, "locked" : false, "type" : "videoplayer", "show_advanced_options" : false, "default" : { "player_id" : 32173842991, "height" : 1224, "width" : 1872, "conversion_asset" : { "type" : "CTA", "id" : "c3e4fa03-2c69-461d-b9af-22b2fde86bc7", "position" : "POST" }, "loop_video" : false, "mute_by_default" : false, "autoplay" : false, "hide_control" : false } }
Use this table to describe parameters / fields
ParameterTypeDescription Default
default
Object

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

 []
show_advanced_options
Boolean

Whether content creators can see advanced default options.

 false

conversion_asset object parameters

Use this table to describe parameters / fields
ParameterTypeDescription Default
type
String

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

 ""
id
String

The id of the Form or CTA type

 ""
position
String

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

 ""
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.