Module and Theme Fields

Last updated:

Modules and Themes have the concept of fields. Fields are form fields for customizing the module or theme. Fields can be used to control both style and function for modules and themes used on a site.

Flexibility versus a good editing experience

Developers create these fields to provide a UI that content creators use to customize modules and Themes. Because this is one of the main interfaces between what developers build and what content creators use - it is critical to make sure the user experience you deliver is good.

As developers, we are prone to want to make our work feature-rich but when it comes to user interfaces lots of features mean lots of controls the user has to manipulate, the more controls, the more daunting of an experience it is for the end-user.

HubSpot CMS provides the tools but it is the developers' responsibility to strike the right balance based on the experience they want for the content creator.

Some best practices:

  • Use conditional fields to hide and only show fields when they are actually used.
  • Instead of offering dozens of settings for small visual tweaks, consider using choice fields to give visual presets. This helps with consistency and avoids that experience you might get like at a restaurant with a massive menu. It's simply less stressful.
  • The organization of your fields matters too.
    • Logically put fields together with groups.
    • Place fields in the order of how the content is rendered. 
    • If you have a lot of settings and a repeater. Consider placing the repeater above the settings fields to prevent having to scroll a lot when managing items in that repeater.
  • If you're building fields for users of another language, use the translations functionality.
  • Sometimes it makes sense to make "super" modules that can do everything, and sometimes it makes sense to split that functionality into separate modules to provide an easier editing or development experience.
  • Use help text and field labels to make it clear what a field controls. Consider occasionally using emoji in labels in-addition to text to help convey an idea. See the screenshot for choice as an example.

How to create, edit, and manage fields

Developers can add fields to modules and themes using the local development tools through a fields.json file contained within the module or theme folder. Modules also support the editing of field's through the design manager module editor.  Developers have different workflows, some prefer to use the local development tools to manage fields, others prefer to create the fields in the module editor and fetch the module down.

Local development tools

When building locally module and theme fields can be edited through a fields.json file inside of the module or theme's folder. For modules, this file will automatically be created when using the hs create module command. All of the field options available in the module editor are available as properties you can add or edit in the fields.json file. This includes repeater fields, groups, and conditions. One of the benefits of editing locally is that it makes it easier to include your modules in version control systems like git.

Fields.json edited locally

Module editor

The Design Manager has a built-in module editor UI that enables you to create, group, and edit module fields. The module editor contains a module preview which enables you to see what the module looks like on its own, as well as test your fields. Since modules do not live in a vacuum you should always test them on a template you plan to use, to see what template level styles may affect it. Be aware if a module is contained in a locked folder it cannot be edited this way.

Themes do not have a field editor experience like this and must be edited using the local development tools. Fortunately, the JSON markup is the same for modules and themes.

Design Manager Module Editor

If you are working mostly locally but want to use the module editor to configure fields, make sure to fetch your changes. This is especially important for those using version control systems like git.

Properties used by all fields

Fields all have a few properties in common, these properties control the variable names you use to reference their values and their appearance for content creators.

JSON
// Boolean field
{
     "name" : "is_teaser_img",
     "label" : "Enable Teaser Image",
     "required" : false,
     "locked" : false,
     "type" : "boolean",
     "help_text" : "Shows Teaser image when toggled on",
     "default" : false
}
Properties used by all fields
Parameter Type Description Default
help_text
String

Text that will appear in the editor via tooltip to assist the content creator.

none
id
String

Unique id for a field. This is generated by HubSpot. When building locally you do not need to specify this id.

label
String

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

Rich text field, Date field, etc.
locked
Boolean

Determines if the field is editable in the content editor. If "true", the field will not appear in the content editor.

false
name
String

The variable name you will use to refer to this field's values, and is what the value of the field is stored against. Cannot contain spaces or special characters.

richtext_field, date_field, etc.
required
Boolean

Determines if the field can be left blank in the editor. If true, content will not be allowed to publish without filling out this field.

false
type
String

The type of field see field types below for documentation on all field types.

visibility
Array

Determines the display conditions for a field.

Field groups

When fields are related to each other often it makes sense for them to be displayed visually grouped. Modules and Themes support grouping multiple fields together. 

Field group without nested field groups

Field groups without nested field groups display simply with dividers above and below the group, and the group's label is displayed at the top of the group.

Nested field group

Field Groups can be nested. A field group that contains another field group will display as a button. Clicking the button to view the group will show the contents of that group.

Field groups in fields.json

Field group objects can be listed as children of other field groups, their structure is very similar to field's themselves with the only special parameter being the "children" parameter, which is an array of fields and groups they contain.

JSON
// Field group example
{
  "type": "group",
  "name": "typography",
  "label": "Typography",
  "children": [
    {
      "type": "font",
      "name": "h1_font",
      "label": "Heading 1",
      "load_external_fonts": true,
      "default": {
        "color": "#000",
        "font": "Merriweather",
        "font_set": "GOOGLE",
        "variant": "700",
        "size": "48"
      }
    }
 ]
}

// Field group inside of a field group
{
  "type": "group",
  "name": "header",
  "label": "Header",
  "children": [
    {
      "type": "font",
      "name": "h1_font",
      "label": "Heading 1",
      "load_external_fonts": true,
      "default": {
        "color": "#000",
        "font": "Merriweather",
        "font_set": "GOOGLE",
        "variant": "700",
        "size": "48"
      }
      {
        "type": "group",
        "name": "navigation",
        "label": "Navigation",
        "children": [
          {
            "name" : "bg_color",
            "label" : "Background color",
            "sortable" : false,
            "required" : false,
            "locked" : false,
            "type" : "color",
            "default" : {
               "color" : "#ff0000",
               "opacity" : 100
            }
          }
        ]
      }
    }
  ]
}

Outputting field values within Field Groups

Field groups create dicts that contain the field values you want to output. If you nest field groups the nested field group is a dict inside of the outside field group dict. To access that data you will traverse the tree from either the root theme or module variable depending on your context.

<div>
{# printing a value from a field group
`recipe_summary` is the field group, `title` is the text field.
#}

{{module.recipe_summary.title}}
</div>

Repeaters

When creating modules that format information, often there are types of information that repeat. A recipe module for example, might have a field for "Ingredient". Well, most recipes have more than 1 ingredient. You could give them a rich text field, but then you lose your ability to force consistent styling and add functionality around each ingredient. That's where repeaters come in, HubSpot has two forms of repeaters: Repeating fields, and Repeating groups.

Repeating fields

Repeating fields are normal fields but content creators can add, remove, and re-arrange instances of the field. Take our recipe module example from earlier, each ingredient could be a repeating text field. This makes it so the content creator can add as many ingredients as they wish. From the developer perspective, we get an array we can loop through to print out that list of ingredients, applying the formatting and functionality we want. 

repeater field

Repeating fields are best used for very simple situations. Often times repeating groups make more sense.

Repeating fields in fields.json

JSON
// Repeating field example
{
  "name" : "ingredient",
  "label" : "Ingredient",
  "required" : false,
  "locked" : false,
  "occurrence" : {
    "min" : 1,
    "max" : null,
    "sorting_label_field" : null,
    "default" : 1
  },
  "allow_new_line" : false,
  "show_emoji_picker" : true,
  "type" : "text",
  "default" : [ "1 cup water" ]
} ]

Loop through items in module HTML+HubL

HTML
<!--Looping through a repeating field-->
<ul>
{% for item in module.ingredient %}
	<li>{{ item }}</li>
{% endfor %}
</ul>

Repeating groups

Repeating groups are field groups with the repeating option enabled. Repeating groups allow content creators to add, remove, and re-arrange groups of fields. Again using the recipe module scenario, say you want to integrate your ingredients list with a shopping list functionality. The quantity of an ingredient would be critical. While someone could provide that in the text field, we would then need to parse the text field and hope we are successfully separating the quantity from the ingredient. This is where repeating groups come in handy. The output of these fields is an object that can be looped through.

Repeating group of fields

Repeating groups in fields.json

JSON
// Repeating field group example
{
  "id" : "ingredients",
  "name" : "ingredients",
  "label" : "Ingredients",
  "required" : false,
  "locked" : false,
  "occurrence" : {
    "min" : 1,
    "max" : null,
    "sorting_label_field" : "ingredients.ingredient",
    "default" : null
  },
  "children" : [ {
    "id" : "ingredients.ingredient",
    "name" : "ingredient",
    "label" : "Ingredient",
    "required" : false,
    "locked" : false,
    "validation_regex" : "",
    "allow_new_line" : false,
    "show_emoji_picker" : false,
    "type" : "text",
    "default" : "Water"
  }, {
    "id" : "ingredients.quantity",
    "name" : "quantity",
    "label" : "Quantity",
    "required" : false,
    "locked" : false,
    "display" : "text",
    "min" : 0,
    "step" : 1,
    "type" : "number",
    "default" : 1
  }, {
    "id" : "ingredients.measurement",
    "name" : "measurement",
    "label" : "Measurement",
    "help_text" : "Unit of measurement (cups, tbsp, etc.)",
    "required" : false,
    "locked" : false,
    "allow_new_line" : false,
    "show_emoji_picker" : false,
    "type" : "text",
    "default" : "cups"
  } ],
  "tab" : "CONTENT",
  "type" : "group",
  "default" : [ {
    "ingredient" : "Water",
    "quantity" : 1,
    "measurement" : "cups"
  } ]
}

Looping through repeating fields in modules

HTML
<h2>Ingredients</h2>
<ul>
	{% for ingredient in module.ingredients %}
		<li>
			<button 
			data-quantity="{{ ingredient.quantity }}" 
			data-unit="{{ ingredient.measurement }}" 
			data-ingredient="{{ ingredient.ingredient }}">
			Add to cart
			</button>
			{{ ingredient.quantity }} {{ ingredient.measurement }} {{ ingredient.ingredient }}
		</li>
	{% endfor %}
</ul>

Repeater options

To make the editing experience better and prevent content editors from providing values that you have not programmatically accommodated for, we allow you to set minimum and maximum values for how many items content creators can add to a repeating field or repeating group. 

For repeating groups you can also set which field acts as the label for that item when viewing the repeater.

Max number of occurences
JSON
"occurrence" : {
    "min" : 1,
    "max" : 4,
    "sorting_label_field" : "ingredients.ingredient",
}
Repeater Options
Parameter Type Description Default
max
Integer

Maximum number of occurrences of this group. Prevents the content creator from adding more than this number of items in the UI.

null
min
Integer

Minimum number of occurrences of this field group. Prevents users from having less than this number of items in the UI.

null
sorting_label_field
String

This is the field id, of the field to pull text from to show in the UI on the draggable cards. The default for this is the first field in the group.

Inherited fields

The inherited_value property can be configured to make a field inherit its default value from other fields. To set a field's entire default value from another field's value, set the default_value_path to the field name path of the target field. When default_value_path is set, it'll ignore any default set on the field.

To access other fields' values, paths must include module. at the beginning as if you were accessing the value in the module's HubL code.

JSON
// Inherited fields
{
	"name": "body_font",
	"type": "font",
	"default": {
		"font": "Helvetica",
		"color": "#C27BA0"
	}
}, {
	"name": "h1_font",
	"type": "font",
	"default": {},
	"inherited_value": {
		"default_value_path": "module.body_font"
	}
}

For complex fields (fields whose values are objects), users can have more granularity over which properties get inherited through property_value_path. Any paths referred in inherited_value can also include keys from a field's value for complex fields - for example, color fields have object values that contain the color itself as well as opacity. So to get a color's actual color value without the opacity, the path would end in .color. For example, a font field can inherit just its color from a separate color field:

JSON
// Inherited fields with objects
{
	"name": "secondary_color",
	"type": "color",
	"default": {
		"color": "#C27BA0",
		"opacity": 100
	}
}, {
	"name": "h1_font",
	"type": "font",
	"default": {
		"font": "Helvetica",
		"size": 12,
		"size_unit": "px"
	},
	"inherited_value": {
		"property_value_paths": {
			"color": "module.secondary_color.color"
		}
	}
}

You can also combine the effects of default_value_path and property_value_paths to inherit a default value from one field while inheriting a specific property value from a different field:

JSON
// combining the effects of default_value_path and property_value_paths
{
	"name": "body_font",
	"type": "font",
	"default": {
		"font": "Helvetica",
		"color": "#000000"
	}
}, {
	"name": "secondary_color",
	"type": "color",
	"default": {
		"color": "#C27BA0",
		"opacity": 100
	}
}, {
	"name": "h1_font",
	"type": "font",
	"default": {},
	"inherited_value": {
		"default_value_path": "module.body_font",
		"property_value_paths": {
			"color": "module.secondary_color.color"
		}
	}
}

If a field inherits from another field but then gets directly overridden at the page level or in theme settings, its connection to the controlling field gets severed. Any other fields attached via default_value_path or property_value_paths will no longer affect the value of the field.

Field Types

Themes and modules support a lot of different kinds of fields. The variety of fields enables the developer to provide the right editing experience for content creators. Since the UI is handled by HubSpot, all modules and themes have the same design for fields. These same field UI elements are used throughout the HubSpot app. This consistency makes it easier for content creators to familiarize themselves with the controls and get up and running.

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
JSON
// blog field
{
      "name" : "blog",
      "label" : "Blog",
      "sortable" : false,
      "required" : false,
      "locked" : false,
      "type" : "blog",
      "default" : 1234567890
}
Blog field
Parameter Type Description 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.

Screenshot of Boolean field
JSON
// Boolean field
{
     "name" : "is_teaser_img",
     "label" : "Enable Teaser Image",
     "sortable" : false,
     "required" : false,
     "locked" : false,
     "type" : "boolean",
     "default" : false
}
Blog field
Parameter Type Description Default
default
Boolean

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

false

Choice

Choice fields are kind of synonymous with <select> elements and radio buttons. They provide a way for a content creator to pick 1 item out of a list of options. They can take two forms visually in the page editor. You can set them to appear like a select field or radio buttons. 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 still be modified without negatively impacting sites since the value is still the same. Change the value however and any modules that previously had that value become disassociated.

Choice fields are supported in both themes and modules.

choice-field-dropdown
JSON
// Choice field
{
      "name" : "img_position",
      "label" : "Image Position",
      "sortable" : false,
      "required" : false,
      "locked" : false,
      "display" : "select",
      "choices" : [ [ "img--left", "Image Left - Text Right" ], [ "img--right", "Text Left - Image Right" ] ],
      "type" : "choice",
      "default" : "img--left"
}
Boolean field
Parameter Type Description 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.

display
String

Sets which way the field displays to users. The two options are "radio" and "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.

Color fields are supported in both themes and modules.

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

Sets the default selected color and opacity.

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

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.

Call To Action Field
JSON
// CTA field
{
  "name" : "cta",
  "label" : "CTA",
  "required" : false,
  "locked" : false,
  "type" : "cta",
  "default" : null
}
CTA field
Parameter Type Description 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

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
JSON
// Date field
{
  "name" : "event_start_date",
  "label" : "Event Date",
  "required" : false,
  "locked" : false,
  "type" : "date",
  "default" : 1577854800000
}
Date field
Parameter Type Description 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
JSON
// Date and time field
{
  "name" : "event_start",
  "label" : "Event Start",
  "required" : false,
  "locked" : false,
  "type" : "datetime",
  "default" : 1577854800000
}
Date and time field
Parameter Type Description 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
JSON
// Email address field
{
  "name" : "emails",
  "label" : "Email address",
  "required" : false,
  "locked" : false,
  "type" : "email",
  "default" : null
}
Email address field
Parameter Type Description Default
default
Array

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

null

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
JSON
// Email address field
{
  "name" : "file_field",
  "label" : "File",
  "required" : false,
  "locked" : false,
  "type" : "file",
  "picker" : "file",
  "default" : null
}
File field
Parameter Type Description Default
default
Array

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

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
JSON
// Followup email field
{
  "name" : "followup_email",
  "label" : "Followup email",
  "required" : false,
  "locked" : false,
  "type" : "followupemail",
  "default" : null
}
Email address field
Parameter Type Description 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  Google fonts and standard web-safe fonts. 

Font fields are supported in both themes and modules.

Font field
JSON
// 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" : { }
  }
}
Font field
Parameter Type Description 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 font to the page. Set this to false, if you are already loading the font to the page, that way the font won't load twice.

true
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

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
JSON
// 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
Parameter Type Description Default
default
Object

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

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

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 field
JSON
// HubDB Table field
{
  "name" : "recipe_table",
  "label" : "Recipe Table",
  "required" : false,
  "locked" : false,
  "type" : "hubdbtable",
  "default" : 2010782
}
Email address field
Parameter Type Description 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 field
JSON
// Icon field
{
  "name" : "icon_field",
  "label" : "Icon",
  "required" : false,
  "locked" : false,
  "type" : "icon",
  "default" : {
    "name" : "accessible-icon",
    "unicode" : "f368",
    "type" : "REGULAR"
  }
}
Icon field
Parameter Type Description Default
default
Object

Icon object

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.

Image fields are supported in modules.

Image Field
JSON
// Image field
{
  "name" : "bg_img",
  "label" : "Background Image",
  "required" : false,
  "locked" : false,
  "responsive" : true,
  "resizable" : true,
  "type" : "image",
  "default" : {
    "size_type" : "auto",
    "src" : "",
    "alt" : null
  }
}
Link field
Parameter Type Description Default
default
Object

Image object containing parameters for the sizing preference, src, and alt text.

{ "size_type" : "auto", "src" : "", "alt" : null }
responsive
Boolean

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

true

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
JSON
// Link field
{
  "name" : "link",
  "label" : "Link",
  "required" : false,
  "locked" : false,
  "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ],
  "type" : "link",
  "default" : {
    "url" : {
      "content_id" : null,
      "type" : "EXTERNAL",
      "href" : ""
    },
    "open_in_new_tab" : false,
    "no_follow" : false
  }
}
Link field
Parameter Type Description Default
default
Object

URL object

{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : 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" ]

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 are supported in modules.

logo field
JSON
// Logo field
{
  "name" : "logo",
  "label" : "Logo",
  "required" : false,
  "locked" : false,
  "type" : "logo",
  "default" : {
    "override_inherited_src" : false,
    "src" : null,
    "alt" : null
  }
}
Link field
Parameter Type Description Default
default
Object

Logo object

{ "override_inherited_src" : false, "src" : null, "alt" : 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 field
JSON
// Number field
{
  "name" : "number_field",
  "label" : "Number",
  "required" : false,
  "locked" : false,
  "display" : "slider",
  "min" : 1,
  "max" : 10,
  "step" : 1,
  "type" : "number",
  "default" : null
}
Link field
Parameter Type Description Default
default
Number

A default number to be used.

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
JSON
// Rich text field
{
  "name" : "description",
  "label" : "Description",
  "required" : false,
  "locked" : false,
  "type" : "richtext",
  "default" : null
}
Link field
Parameter Type Description Default
default
String

string of content to be displayed supports HTML

""

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
JSON
// 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
Parameter Type Description Default
default
Array of objects

JSON structure for menu and menu children.

[]

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
JSON
// 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
Parameter Type Description 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
JSON
// 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" : null
}
Link field
Parameter Type Description Default
default
String

Text string.

""

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
JSON
// 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
Parameter Type Description 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" ]