Campos de módulo e tema

Last updated:

Adicione campos aos módulos e temas para permitir que os criadores de conteúdo controlem os diferentes aspectos de uma página dentro do editor de páginas. Saiba mais sobre todos os campos disponíveis para módulos e temas, além de suas propriedades disponíveis.

Para obter mais informações sobre a implementação de campos de tema e módulo, incluindo grupos de campos e campos de repetição, consulte a visão geral dos campos de tema e módulo.

Propriedades utilizadas por todos os campos

Todos os campos compartilham um conjunto de propriedades comuns. Estes são campos gerais, como o nome do campo ou o texto de ajuda exibido para os criadores de conteúdo usando o campo no módulo ou tema. 

// 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 }
Propriedades utilizadas por todos os campos
ParameterTypeDescription Default
name
String

O nome do campo, que você usará ao incorporar o campo e seus valores no módulo ou tema. Não pode conter espaços ou caracteres especiais.

richtext_field, date_field, etc.
label
String

O texto que o criador do conteúdo vê com a descrição do campo. Pode conter espaços.

Rich text field, Date field, etc.
required
Booleano

Determina se o campo pode ser deixado em branco no editor. Se true, o conteúdo não poderá ser publicado sem um valor no campo.

false
locked
Booleano

Determina se o campo pode ser editado no editor de conteúdo. Se true, o campo não aparecerá no editor de conteúdo.

false
type
String

O tipo de campo. Os tipos de campo são exclusivos por campo e podem ser encontrados na documentação de cada campo abaixo.

inline_help_text
String

O texto que exibe o rótulo do campo abaixo do campo (limite 400 caracteres). Melhor usado para informações necessárias para usar o campo.

Você pode incluir as seguintes tags de HTML (outras tags serão ignoradas na renderização):

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

help_text
String

O texto que é exibido no editor dentro de uma dica de ferramenta ao passar o cursor do mouse para ajudar o criador de conteúdo (limite de 300 caracteres). Melhor usado para informações complementares, mas não necessárias para usar o campo.

Você pode incluir as seguintes tags de HTML (outras tags serão ignoradas na renderização):

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

id
String

O ID exclusivo do campo, que é definido pelo HubSpot. Ao criar localmente, não é necessário especificar este ID.

visibility
Array

Define as condições de exibição do campo. Por exemplo, você pode definir um campo para exibir apenas quando outro campo de caixa de seleção tiver sido selecionado. Saiba mais sobre a visibilidade.

display_width
String

Por padrão, os campos são de largura completa no editor. Quando dois campos consecutivos no arquivo fields.json estiverem definidos como half_width, eles aparecerão um ao lado do outro no editor.

Alinhamento

Permite que os criadores de conteúdo posicionem um elemento dentro de um contêiner. Para ativar o alinhamento de texto, use o campo de alinhamento de texto

Os campos de alinhamento são compatíveis com os módulos e só podem ser usados como campos de estilo.

Campo de alinhamento
// 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", } }
Campo do blog
ParâmetroTipoDescription Default
default
Objeto

O objeto que contém horizontal_align e vertical_align.

alignment_direction
String

Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

Imagem de fundo

Este campo fornece um campo de imagem de fundo que tem subcampos para a posição e o tamanho do plano fundo. Os campos de imagem de fundo têm uma propriedade .css que retorna CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de imagem de fundo são compatíveis com os módulos e só podem ser usados como campos de estilo.

Campo de imagem de fundo
// 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" } }
Campo do blog
ParâmetroTipoDescription Default
default
Objeto

O objeto que contendo o src da imagem, a posição do plano de fundo e o tamanho do fundo.

null

Blog

Este campo permite que os editores de conteúdo selecionem um blog, fornecendo a você, o desenvolvedor, o ID do blog. Isso é útil em casos em que você precisa apresentar informações de teaser dos blogs em destaque nos módulos. Você pode usar o ID do blog em funções do HubL relacionadas a blog para obter informações como autores, posts recentes, posts recentes com uma tag específica e muito mais.

Os campos do blog são suportados nos módulos.

Captura de tela do campo do blog
// blog field { "name" : "blog", "label" : "Blog", "required" : false, "locked" : false, "type" : "blog", "default" : 1234567890 }
Campo do blog
ParâmetroTipoDescription Default
default
"default" / ID do blog

Especifica o blog que é selecionado por padrão. Este parâmetro aceita argumentos padrão ou um ID de blog (disponível na URL do painel do blog).

null

Booleano

Este campo permite que os editores de conteúdo ativem/desativem a funcionalidade. Booleanos somente podem ser true ou false. Muitas vezes faz sentido condicionar grupos ou campos com base em campos booleanos. Se você acha que pode precisar fornecer mais de dois estados no caminho, um campo de escolha pode ser uma opção melhor, pois você pode aumentar isso com menos esforço, caso precise alterar mais tarde.

Os campos booleanos são suportados tanto nos temas como nos módulos.
Os campos booleanos podem ser usados como campos de estilo.

Captura de tela do campo booleano
// 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 }
Campo do blog
ParâmetroTipoDescription Default
default
Booleano

Define se o estado padrão deste campo é true ou false.

false
display
String

Escolha o estilo de exibição visual para o campo. Pode aparecer como um toggle ou checkbox.

checkbox

Um botão pode fazer sentido quando o valor do campo ativa/desativa outros campos que são mostrados de forma condicional. Outra situação em que um botão pode ser útil é quando o campo representa uma grande mudança de design para o módulo.

As caixas de seleção fazem sentido para alterações menores que podem não ter um efeito tão significativo na exibição do módulo, como ocultar ou mostrar pequenos elementos individuais.

Borda

Este campo fornece aos criadores de conteúdo uma interface de usuário para a criação de uma borda em torno de um elemento. Os campos de borda têm uma propriedade .css que retorna o CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de borda são suportados nos módulos.
Os campos de borda só podem ser usados como campos de estilo.

Captura de tela do campo de borda do módulo no editor de páginas
// 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 } }
Campo do blog
ParâmetroTipoDescription Default
default
Booleano

objeto com chaves para o raio da borda, as partes superior e inferior e os lados direito e esquerdo.

{}

Escolha

Os campos de escolha permitem que um criador de conteúdo selecione um ou mais itens de uma lista de opções, dentro de um menu suspenso, botão de opção ou caixas de seleção.

As opções de um campo de escolha podem ter rótulos separados para seus valores. Após a utilização de um módulo em uma página, os rótulos de opção podem ser modificados sem afetar os sites, já que o valor continua o mesmo. No entanto, se você alterar o valor, todos os módulos que continham esse valor serão dissociados.

Os campos de escolha são suportados tanto nos temas quanto nos módulos. Os campos de escolha podem ser usados como campos de estilo.

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" }
Campo booleano
ParâmetroTipoDescription Default
choices
Array

Matriz de pares de valores e rótulos. Os valores são listados primeiro.

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

Define o valor padrão selecionado na matriz de opções.

multiple
String

Opcional. Para permitir que várias opções sejam selecionadas, defina o valor como true

False
display
String

Defina a aparência do campo.

Ao não incluir multiple, você pode definir a aparência como "radio" ou "select".

Quando multiple é definido como true, você pode definir a aparência como "checkbox" ou "select".

"select"

Cor

Os campos de cor fornecem uma interface de seleção de cores para os criadores de conteúdo. Eles oferecem suporte a cores sólidas, bem como a transparência. São perfeitos para quando você quer dar aos criadores de conteúdo controle total sobre as cores dentro de um módulo.

Por padrão, a entrada de opacidade de um campo de cor está oculta para módulos de e-mail, pois alguns clientes de e-mail não respeitam as regras de opacidade. Você pode revelar o campo de opacidade para módulos de e-mail definindo show_opacity como true.

Os campos de cores podem ser usados em temas e módulos como campos de estilo

Campo de cor
// color field { "name" : "bg_color", "label" : "Background color", "required" : false, "locked" : false, "type" : "color", "default" : { "color" : "#ff0000", "opacity" : 100 } }
Campo de cor
ParâmetroTipoDescription Default
default
Objeto

Define a cor e a opacidade padrão selecionadas.

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

Define se a entrada de opacidade é exibida.

  • true: a entrada de opacidade é exibida.
  • false: a entrada de opacidade é ocultada.
  • Se indefinido, a entrada de opacidade não será exibida nos módulos de e-mail, mas será exibida em outros tipos de módulo.
undefined

CTA

Os campos de call to action (CTA) permitem que os usuários escolham uma CTA para exibir. As CTAs são essencialmente botões ou links rastreáveis. Os criadores de conteúdo criam CTAs que podem ser usadas em todo o site. 

Os campos de CTA são suportados nos módulos.
Os campos de CTA estão disponíveis no CMS Hub Professional e Enterprise.

Campo de call to action
// CTA field { "name" : "cta", "label" : "CTA", "required" : false, "locked" : false, "type" : "cta", "default" : null }
Campo de CTA
ParâmetroTipoDescription Default
default
String

A CTA selecionada por padrão. Espera um ID de CTA que pode ser encontrado na URL ao editar uma CTA no gerenciador de CTA.

null

Objeto do CRM

Os campos de objeto do CRM permitem que os usuários escolham uma instância individual de um objeto do CRM para exibir. 

module.fieldname.properties retorna as propriedades obtidas desta instância de objeto. Isso faz com que você não precise usar a função crm_object() para obter os dados para a instância de objeto selecionada.

module.fieldname.id retorna o ID da instância do objeto.

Os campos de objeto do CRM são suportados nos módulos.
Os campos de objeto do CRM estão disponíveis no CMS Hub Professional e Enterprise.

Campo de objeto do CRM
// fields.json { "name" : "crmobject_field", "label" : "CRM object", "required" : false, "locked" : false, "object_type" : "CONTACT", "properties_to_fetch" : [ ], "type" : "crmobject", "default" : { "id" : 1 } }
Campo de objeto do CRM
ParâmetroTipoDescription Default
object_type
Obrigatório
String

Tipo de objecto do CRM que o usuário pode escolher. Tipos de objetos do CRM suportados

properties_to_fetch
Array

Matriz de nomes de propriedades associadas ao tipo de objeto em forma de string. Exemplo: "date_of_birth" é uma propriedade associada a um contato. Use isso para limitar as informações que são disponibilizadas na página apenas àquelas de que você precisa.

default
Objeto

Objeto com ID da instância do objeto selecionado por padrão. ID de contato, ID de empresa etc.

null

Propriedade do objeto do CRM

Use o campo de propriedade do objeto do CRM para acessar os metadados da propriedade, como o rótulo e o nome da propriedade, a partir de um tipo de objeto específico. Dessa forma, os criadores de conteúdo podem selecionar as propriedades de objeto quando precisam exibir os detalhes da propriedade em uma página.

Por exemplo, você pode adicionar esse campo a um módulo de tabela personalizado para preencher os cabeçalhos da tabela com base nas propriedades selecionadas.

Os campos de objeto do CRM são suportados nos módulos. 

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" } }
Campo de objeto do CRM
ParâmetroTipoDescription Default
object_type
Obrigatório
String

Tipo de objecto do CRM que o usuário pode escolher. Saiba mais sobre os tipos de objeto do CRM compatíveis.

default
Objeto

Contém a propriedade padrão para exibir.

Além disso, você pode usar os seguintes snippets para retornar outros detalhes da propriedade:
  • {{ module.fieldname.property }}: retorna o nome interno da propriedade.
  • {{ module.fieldname.property_definition.label }}: retorna o rótulo da propriedade.
  • {{ module.fieldname.property_definition.type }}: retorna o tipo de propriedade (por exemplo, string).

Data

Os campos de data fornecem uma interface de seleção para facilitar a seleção de datas pelos criadores de conteúdo. Retorna o carimbo de data/hora que você pode usar no seu código.

Os campos de data são suportados nos módulos.

Campo de data com o seletor de calendário aberto
// Date field { "name" : "event_start_date", "label" : "Event Date", "required" : false, "locked" : false, "type" : "date", "default" : 1577854800000 }
Campo de data
ParâmetroTipoDescription Default
default
Data/hora

O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.

null

Data e hora

Os campos de data e hora fornecem uma interface de data e hora, como o campo de data, bem como um seletor de hora para facilitar para os criadores de conteúdo selecionarem a data e a hora do dia. Retorna o carimbo de data/hora que você pode usar no seu código.

Os campos de data e hora são suportados nos módulos.

Início do evento
// Date and time field { "name" : "event_start", "label" : "Event Start", "required" : false, "locked" : false, "type" : "datetime", "default" : 1577854800000 }
Campo de data e hora
ParâmetroTipoDescription Default
default
Data/hora

O carimbo de data/hora Unix Epoch para a data e a hora que você quer usar por padrão. Deixe como nulo para permitir que o seletor de data e hora indique a data e a hora atuais para o criador do conteúdo.

null

Endereço de email

Os campos de endereço de e-mail permitem que um usuário selecione vários endereços de e-mail. Eles podem ser usados para exibir informações de contato. O campo de e-mail retorna uma matriz de endereços de e-mail selecionados pelos quais você pode navegar.

Os campos de e-mail são suportados nos módulos.

email-field
// Email address field { "name" : "emails", "label" : "Email address", "required" : false, "locked" : false, "type" : "email", "default" : null }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
Array

Matriz de strings de endereços de e-mail ["bob@example.com", "dennis@example.com"]

null

Incorporação

Os campos de incorporação permitem ao usuário adicionar uma URL de um site habilitado para oEmbed ou colar um código de incorporação de outro site. Para saber mais sobre o uso do oEmbed no HubSpot, e ver casos de uso, visite nosso documento sobre oEmbed.

Campo de incorporação
// 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

Tipos de fontes suportados para URLs do oEmbed(oembed), código de incorporação HTML(html) ou Media Bridge (media_bridge).

["oembed", "html"]
supported_oembed_types
Array

O tipo de oEmbed suportado, incluindo "photo", "video", "link" e "rich". Não se aplica a supported_source_types de html

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

Matriz de IDs de provedores que determina quais provedores Media Bridge estão disponíveis para selecionar conteúdo.

Observação: este parâmetro também será preenchido ao instalar um Aplicativo do provedor de media bridge

type
String

Este parâmetro está sempre definido como "embed"

"embed"
default
Dict

Uma matriz contendo o parâmetro "source_type ". Este parâmetro tem um valor baseado em string das opções fornecidas no parâmetro "supported_source_types".

oembed

Arquivo

Os campos de arquivo permitem que o usuário faça upload de um arquivo no gerenciador de arquivos, ou no gerenciador de documentos, e facilita a anexação de itens que estão nesses locais. Isso pode ser útil para enviar links de PDFs ou de arquivos de outros formatos. Para exibir imagens em uma página, você deve usar o campo de imagem.

Os campos de arquivo são suportados nos módulos.

Campo de arquivo
// Email address field { "name" : "file_field", "label" : "File", "required" : false, "locked" : false, "type" : "file", "picker" : "file", "default" : null }
Campo de arquivo
ParâmetroTipoDescription Default
default
String

A URL do arquivo.

null
picker
String

Valores aceitáveis: "file", "document", "image".
O seletor mostra os ativos que foram carregados no gerenciador de arquivos ou no gerenciador de documentos, dependendo deste parâmetro.

file

E-mail de acompanhamento

Os campos de e-mail de acompanhamento permitem que um criador de conteúdo designe um e-mail que será enviado em resposta a um envio de formulário. Isso funciona em conjunto com a tag de formulário do HubL, por meio do parâmetro simple_email_campaign_id.

Os campos de e-mail de acompanhamento são suportados nos módulos.

followup email field
// Followup email field { "name" : "followup_email", "label" : "Followup email", "required" : false, "locked" : false, "type" : "followupemail", "default" : null }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
String

ID de e-mail

null

Fonte

Os campos de fonte fornecem aos criadores de conteúdo controles básicos de estilo de fonte. Os criadores de conteúdo podem escolher o tamanho, a cor, a família de fonte e o formato (negrito, itálico e sublinhado). As fontes listadas são todas fontes padrão seguras para a Web. Essas fontes são originárias do Google Fonts, mas são disponibilizadas pela HubSpot diretamente no domínio em que a página é carregada.

Os campos de fonte são suportados tanto nos temas quanto nos módulos. Os campos de fonte podem ser usados como campos de estilo.

Campo de fonte

Observação:

  • A família de fontes é determinada pela combinação das propriedades font e font_set. Você deve incluir ambas para carregar a fonte. Ao herdar campos, você precisa herdar ambos os valores.
  • Ocultar subcampos relacionados ao CSS com visibility não impedirá que o CSS seja exibido no estilo retornado pelo objeto de campo. Você ainda precisará incluir manualmente o CSS no objeto styles.
// 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 } } }
Campo de fonte
ParâmetroTipoDescription Default
default
Objeto

Objeto de fonte com definições de tamanho, unidade de tamanho, cor e estilos para negrito, itálico e sublinhado.

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

O HubSpot carregará automaticamente a fonte web selecionada na página se ela estiver selecionada e referenciada pelo HubL em uma folha de estilo ou em um módulo. Defina como falso se você já estiver carregando a fonte na página, assim a fonte não será carregada duas vezes.

true
visibility
Objeto

Usando o objeto aninhado hidden_subfields, você pode definir um booleano para os controles do campo de fonte que devem ser ocultados. Os subcampos incluem: font, size, bold, italic, underline e color.

variant
String

Ao usar uma fonte da Web; a variante da fonte que você deseja usar. Por exemplo, para usar um peso de fonte de 700, defina como "700". Para usar itálico e um peso de fonte de 400, defina como "400i".

Formulário

Os campos de formulário permitem que o criador de conteúdo designe um formulário na conta. Você pode usar isso para renderizar um formulário em uma página usando a tag de formulário do HubL

Os campos de formulário são suportados nos módulos.

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" } }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
Objeto

Objeto para formulários que contêm o ID do formulário selecionado, o tipo de resposta e a mensagem.

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

Gradiente

Este campo permite que os criadores de conteúdo criem e configurem gradientes. No momento, os gradientes lineares suportam até cinco paradas de cor. Os campos de gradiente têm uma propriedade .css que retorna CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de gradiente são suportados nos módulos. Os campos de gradiente só podem ser usados como campos de estilo.

Campo de gradiente
// 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 } } }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
Objeto

O objeto que contêm a orientação de um gradiente ("side_or_corner") e paradas de cor para o gradiente como uma matriz de objetos.

Linha do HubDB

Os campos de linha do HubDB permitem que um criador de conteúdo selecione uma linha individual (ou linhas ao usar campos repetidores) em uma determinada tabela. Você pode utilizar este campo para criar listas definidas pelo usuário, tabelas, recursos e muito mais.

Os campos de linha do HubDB são suportados nos módulos.
Os campos de linha do HubDB estão disponíveis no CMS Hub Professional e 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

O nome ou o ID da tabela do HubDB. Este campo é obrigatório.

columns_to_fetch
Array

Uma matriz de nomes de colunas para buscar na tabela. Se for deixado em branco, retornará todas as colunas da tabela.

[]
display_columns
Array

Uma matriz de nomes de colunas para usar no rótulo de opção. Se for deixado em branco, retornará apenas a primeira coluna da tabela.

[]
display_format
String

O formato em que você deseja que os dados da coluna fossem exibidos no seletor de linha do HubDB usando o símbolo de porcentagem e o número para designar uma coluna.
Exemplo: %0 (%1) aparecerá como Column0Value (Column1Value)

""
default
Objeto

O objeto que contêm o "id" para definir a linha padrão do hubdb.

{ “id” : null }

Do Tabela HubDb

Os campos de tabela do HubDB permitem que um criador de conteúdo designe um HubDB na conta. Você pode usar isso para renderizar um formulário em uma página usando a tag de formulário do HubL. Retorna o ID da tabela, que você pode usar com as funções HubL do HubDB.

Os campos da tabela do HubDB são suportados nos módulos. Os campos de tabela do HubDB estão disponíveis no CMS HubProfessional e Enterprise.

Campo do HubDB
// HubDB Table field { "name" : "recipe_table", "label" : "Recipe Table", "required" : false, "locked" : false, "type" : "hubdbtable", "default" : 2010782 }
Campo de endereço de e-mail
ParâmetroTipoDescription Default
default
String

ID da tabela do HubDB

null

Ícone

Os campos de ícone fornecem uma interface de seleção para facilitar a adição de ícones aos módulos por parte dos criadores de conteúdo. O campo de ícone vem predefinido com ícones FontAwesome.

Os campos de ícone são suportados nos módulos. Os campos de ícone podem ser usados como campos de estilo.

icon field
// Icon field { "name" : "icon_field", "label" : "Icon", "required" : false, "locked" : false, "icon_set" : "fontawesome-6.4.2", "type" : "icon", "default" : { "name" : "accessible-icon", "unicode" : "f368", "type" : "REGULAR" } }
Campo de ícone
ParâmetroTipoDescription Default
default
Objeto

Objeto de ícone

icon_set
String

O ícone do FontAwesome que deve ser usado. Estes são os possíveis valores:

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

Imagem

Os campos de imagem fornecem uma interface fácil de usar para os criadores de conteúdo adicionarem imagens a um módulo ou tema. Os campos de imagem fornecem uma interface de seletor de arquivos que lista as imagens do Gerenciador de arquivos. Como as imagens podem ser usadas e exibidas de diferentes maneiras, os desenvolvedores podem limitar as opções de tamanho disponíveis para o criador do conteúdo na IU, bem como permitir o carregamento lento de imagens.

Campo de imagem

Os campos de imagem são suportados nos módulos.
As imagens podem ser usadas como campos de estilo 
Você somente deve usar campos de imagem como campos de estilo se a imagem for puramente representativa, ou seja, não transmita significado e não seja uma imagem de fundo. Isso serve para seguir as práticas recomendadas de acessibilidade.

// 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 } }
Campo de link
ParâmetroTipoDescription Default
default
Objeto

Define as propriedades para dimensionamento de imagens, texto alternativo e muito mais. Pode conter as seguintes propriedades: 

  • size_type: se a imagem é dimensionada automaticamente ou manualmente:
    • "auto": o HubSpot ajustará automaticamente o tamanho da imagem com base nas dimensões originais.
    • "auto_custom_max": o HubSpot ajustará automaticamente o tamanho da imagem de acordo com as dimensões máximas especificadas pelas propriedades "max_height " e "max_width".
    • "exact": o HubSpot dimensionará a imagem com base nas dimensões especificadas pelas propriedades "height" e "width".
  • src: a URL da imagem padrão. Deve ser um caminho absoluto para uma imagem.
  • alt: o texto alternativo padrão da imagem.
  • loading: as opções de carregamento lento da imagem. Pode ser definido como "disabled" (padrão), "eager" ou "lazy".
{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }
responsive
Booleano

determina se a imagem deve agir de forma responsível ou se deve ter altura e largura fixas.

true
show_loading
Booleano

Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.

false

Os campos de link fornecem uma interface fácil para os criadores de conteúdo fornecerem links para URLs e endereços de e-mail. Para links externos, os criadores de conteúdo escolhem "external". Para links de e-mail, "email address". Por fim, para conteúdo hospedado no HubSpot CMS, eles podem usar "content", que mostra uma lista de todas as páginas e posts de blog na conta, "file" mostrando os ativos de arquivo e "blog" mostrando todas as listagens de blogs na conta. Os campos de link são muito semelhantes aos campos de URL, exceto pelo fato de fornecerem uma IU para "abrir em uma nova janela" e "informar aos mecanismos de busca para não seguir". Se você não quer que os criadores de conteúdo tenham esse controle, use o campo de URL.

Os campos de link são suportados nos módulos.

link field
// Link field { "name" : "link_field", "display_width" : null, "label" : "Link", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ], "show_advanced_rel_options" : true, "type" : "link", "default" : { "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false } }
Campo de link
ParâmetroTipoDescription Default
default
Objeto

O URL padrão e o comportamento de abertura do link. Este objeto inclui:

  • Um objeto url que contém:
    • content_id: se estiver vinculado ao conteúdo do HubSpot, o ID desse conteúdo. Definido como null se estiver vinculado a conteúdo externo.
    • type: o tipo de URL. Saiba mais sobre os tipos compatíveis abaixo.
    • href: o URL do conteúdo. Ao vincular ao conteúdo do HubSpot, defina-o como null e use content_id.
{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }
supported_types
Array

Os tipos de links que os criadores de conteúdo podem selecionar. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir. Os tipos de valores incluem:

  • EXTERNAL
  • CONTENT
  • FILE
  • EMAIL_ADDRESS
  • BLOG
  • CALL_TO_ACTION
  • PHONE_NUMBER
  • WHATSAPP_NUMBER
  • PAYMENT
[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]
show_advanced_rel_options
Booleano

Por padrão, os criadores de conteúdo só poderão selecionar a opção no_follow.

Quando definido como true, os criadores de conteúdo também podem selecionar:

  • sponsored: um link patrocinado, como um link de anúncio pago. 
  • user_generated_content: conteúdo gerado pelos usuários, como fóruns.

Saiba mais sobre os atributos de link.

false

Logotipo

Os campos do logotipo permitem que os criadores de conteúdo especifiquem imagens a serem usadas em uma página, por padrão, para o logotipo do domínio. Isso é útil para cabeçalhos e rodapés de sites que contêm o logotipo da empresa. Os campos de logotipo também permitem o carregamento lento.

Os campos de logotipo são suportados nos módulos.

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" } }
Campo de link
ParâmetroTipoDescription Default
show_loading
String

Determina se os controles para escolher carregar a imagem de forma lenta são mostrados no editor de páginas.

false
default
Objeto

Objeto de logotipo. 

Se show_loading estiver definido como true, você poderá incluir uma propriedade loading para definir as opções de  carregamento lento da imagem. As opções incluem:

  • "disabled" (padrão)
  • "eager"
  • "lazy"
{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }

Os campos de menu fornecem uma interface fácil para os criadores de conteúdo criarem, editarem e selecionarem um menu de navegação que pode ser reutilizado em outras páginas. Este campo é ideal para menus que são usados em várias páginas, como a navegação principal e a navegação no rodapé e outros conteúdos globais.  Use esse campo em conjunto com a tag de menu ou a função menu(), para renderizar um menu dentro do seu módulo.

Para menus que não serão reutilizados em outras páginas, como um menu de índice, use o campo de menu simples.

Os campos de menu são suportados nos módulos.

menu field
// Menu field { "name" : "menu", "label" : "Menu", "required" : false, "locked" : false, "type" : "menu", "default" : 12345678911 }
Campo de link
ParâmetroTipoDescription Default
default
Inteiro

O ID do menu. Valor padrão é null; assume o menu padrão na navegação.

null

Número

Os campos de numero fornecem uma interface fácil para que os criadores de conteúdo digitarem ou ajustarem valores e opções numéricos. Isso pode ser usado para criar itens baseados em porcentagem ou qualquer coisa que exija a entrada de números.

Os campos de número são suportados nos módulos. Os campos de número podem ser usados como campos de estilo.

Campo de número
// 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" }
Campo de link
ParâmetroTipoDescription Default
default
Número

O número padrão a ser usado.

null
prefix
String

Adicionado como um prefixo ao campo de número.

suffix
String

Adicionado como um sufixo ao campo de número.

placeholder
String

Adiciona um valor de espaço reservado ao campo.

Os parâmetros de sufixo e prefixo são para fins de exibição no editor de conteúdo e não afetam o valor numérico do campo. 

Página

Os campos de página fornecem uma interface para que os criadores de conteúdo selecionem páginas do site e landing pages.

O valor retornado por um campo de página é o ID da página selecionada. Quando usado em conjunto com as funções content_by_id ou content_by_ids, é possível usar os dados das páginas selecionadas na página atual.

Os campos de página são suportados nos módulos.

Título da página
// 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 }
Campo de link
ParâmetroTipoDescription Default
default
Inteiro

Um ID de página predefinido a ser selecionado.

null

Rich text

Os campos rich text fornecem aos criadores de conteúdo uma experiência de editor de texto WYSIWYG. Quando um campo de rich text é impresso, ele é impresso como HTML. Se você não quer que os criadores de conteúdo tenham capacidade de formatação, use campos de texto.

Os campos rich text são suportados nos módulos.

Campo de rich text
// Rich text field { "name" : "description", "label" : "Description", "required" : false, "locked" : false, "type" : "richtext", "default" : null }
Campo de link
ParâmetroTipoDescription Default
default
String

a string de conteúdo a ser exibida suporta HTML. 

Observação: você não pode usar a função get_asset_url dentro dessa propriedade padrão. 

""
enabled_features
Opcional
Array

Uma matriz de itens que permite configurar a barra de ferramentas do editor de rich text e determinar quais opções estão disponíveis para os editores de conteúdo. 

Os campos de menu simples fornecem uma interface fácil para os criadores de conteúdo criarem um menu de navegação que não será reutilizado em outras páginas. Para menus que precisam ser reutilizados, use o campo de menu. Você pode usar isso para criar um menu de índice com links para títulos em páginas muito longas, ou uma lista de links de conteúdo que só faz sentido ter na página atual.

Os campos de menu simples são suportados nos módulos.

Campo de menu simples
// 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" : [ ] } ] }
Campo de link
ParâmetroTipoDescription Default
default
Matriz de objetos

Estrutura JSON para menus e menus secundários.

[]

Espaçamento

Este campo fornece uma interface de usuário (IU) para que os criadores de conteúdo definam o deslocamento e a margem. Os campos de espaçamento têm uma propriedade .css que retorna o CSS com base no valor do campo. Saiba mais sobre a propriedade CSS gerada.

Os campos de espaçamento são suportados nos módulos.
Os campos de espaçamento só podem ser usados como campos de estilo.

captura de tela do campo de estilo de espaçamento expandido no editor de páginas
// 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"] } } } }
Campo de link
ParâmetroTipoDescription Default
default
Objeto

Define os valores de espaçamento padrão.

Contém os objetos padding e margin:

  • padding: pode conter os objetos top, right, bottom, left
  • margin: pode conter os objetos top e bottom

Use units para definir as unidades que um criador de conteúdo pode usar no HubSpot. Saiba mais sobre as unidades abaixo.

{}
limits
Objeto

Define as diretrizes para a quantidade de espaçamento min e max

Contém os objetos padding e margin:

  • padding: pode conter os objetos top, right, bottom, left
  • margin: pode conter os objetos top e bottom

Use units para definir as unidades que um criador de conteúdo pode usar no HubSpot. Saiba mais sobre as unidades abaixo.

Ao usar o campo de espaçamento, observe o seguinte:

  • Você deve incluir uma lista units ao definir min ou max
  • A propriedade units permite os seguintes tipos de unidades: %, ch, em, ex, in, lh, pc, pt, px, Q, rem, vh, vmax, vmin e vw.
  • Quando um criador de conteúdo edita todos os deslocamentos de uma vez, o HubSpot usa o maior valor min e o menor valor max. Além disso, somente as unidades compartilhadas por todos os lados estarão disponíveis para o criador do conteúdo.

Tag

Os campos de tag fornecem um seletor de tags de blog para os criadores de conteúdo. Esse seletor de tags retorna um ID de tag que pode ser usado em funções relacionadas a tags de blog, tais como URL da tag do blog e posts recentes de tags de blog.

Os campos de tags são suportados nos módulos.

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 }
Campo de tag
ParâmetroTipoDescription Default
default
String

ID da tag do blog

null

Texto

Os campos de texto fornecem aos criadores de conteúdo uma experiência simples de edição de texto, sem funcionalidades rich text. Os campos de texto aparecem inicialmente como uma única linha, mas podem se expandir para serem áreas de texto, permitindo várias linhas. Use-os quando não quiser que os criadores de conteúdo tenham controle sobre a formatação. Se você quiser fornecer controles de formatação, use campos rich text.

Os campos de texto são suportados nos módulos.

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" : "" }
Campo de link
ParâmetroTipoDescription Default
default
String

String de texto.

""

Alinhamento de texto

Este campo permite que os criadores de conteúdo alinhem o conteúdo do texto dentro de um container. Isso não deve ser usado para alinhar outros ativos, pois há um tipo de campo específico para isso.

Os campos de alinhamento de texto são suportados nos módulos. Os campos de alinhamento de texto só podem ser usados como campos de estilo.

Campo de alinhamento de texto
// text alignment field { "name": "heading_align", "label": "Heading alignment", "required": false, "type": "textalignment", "default": { "text_align": "LEFT" } }
Campo do blog
ParâmetroTipoDescription Default
default
Objeto

O objeto que contém horizontal_align e vertical_align.

alignment_direction
String

Determina se apenas os controles de alinhamento horizontal ou vertical, ou ambos, devem ser mostrados. Pode ser:

  • HORIZONTAL
  • VERTICAL
  • BOTH
BOTH

URL

Os campos de URL fornecem uma experiência semelhante para vincular campos. Fornecendo uma interface para os criadores de conteúdo adicionarem links. No entanto, os campos de URL não exibem uma IU para abrir em uma nova janela, nem informam aos mecanismos de busca para não seguir. Use este campo quando você, o desenvolvedor, quiser determinar os valores disso. Se você quiser que o usuário tenha controle, use campos de link.

Os campos de URL são suportados nos módulos.

Campo de URL
// URL field { "name" : "url", "label" : "URL", "required" : false, "locked" : false, "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER" ], "type" : "url", "default" : { "content_id" : null, "href" : "http://example.com", "type" : "EXTERNAL" } }
Campo de link
ParâmetroTipoDescription Default
default
Objeto

Objeto de URL, com tipo, href e id do conteúdo (se o conteúdo for uma página ou post no HubSpot)

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

lista dos tipos de links que podem ser selecionados pelos criadores de conteúdo. Remova os tipos da lista que você não quer que os criadores de conteúdo tenham acesso para definir. Impostos incluídos

  • EXTERNAL: renderiza um campo de entrada de texto para uma URL externa.
  • CONTENT: renderiza um menu suspenso contendo o site e as páginas de destino da conta.
  • FILE: renderiza um seletor de arquivos.
  • EMAIL_ADDRESS: renderiza um campo de entrada de texto para um endereço de e-mail.
  • BLOG: renderiza um menu suspenso contendo as páginas de listagem de blog da conta.
  • PHONE_NUMBER: processa um campo de entrada de texto para um número de telefone. O número precisa começar com + e conter 7-15 dígitos (excluindo o código do país).
  • WHATSAPP_NUMBER: renderiza um menu suspenso contendo os números do WhatsApp conectados à conta.
[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]

Vídeo

Os campos de vídeo fornecem aos editores de conteúdo um lugar para adicionar HubSpot Video ao conteúdo do módulo sem a necessidade de usar campos rich text.

Campo de vídeo
//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
Objeto

Objeto de vídeo com configurações para player_id, height, width, size_type, conversion_asset, loop_video, mute_by_default, autoplay e hide_control.

[]
show_advanced_options
Booleano

Se os criadores de conteúdo podem ver as opções padrão avançadas.

false

Parâmetros do objeto conversion_asset

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

Aceita "FORM", "CTA" ou ""

""
id
String

O ID do formulário ou tipo de CTA

""
position
String

Se o ativo de conversão deve ser mostrado antes do início do vídeo ou depois de este terminar. Aceita "PRE" ou "POST".

""

Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..