Comparte un formulario de HubSpot en un sitio externo

 Después de crear un formulario en HubSpot, puedes añadirlo a páginas de HubSpot o a páginas que hayas creado fuera de HubSpot. Los formularios pueden ser compartidos en tu sitio externo, no alojado en HubSpot al:

• Incrustar el código del formulario en una página existente.
• Crear una página de formulario independiente a la que se pueda enlazar.

Con cualquiera de los métodos, cualquier cambio hecho al formulario dentro de la herramienta de formularios de HubSpot, se reflejará automáticamente en el formulario en directo en tu sitio externo. Después de añadir tu formulario, puedes darle estilo a tu formulario HubSpot incrustado en tus páginas externas en el editor de formularios o con CSS en tu hoja de estilos externa.

Si trabajas con WordPress, aprende a insertar un formulario en tu entrada o página de WordPress.

Ten en cuenta: a partir del 16 de mayo de 2024, cuando añadas el código de incrustación de tu formulario en una página externa, el dominio de la página debe estar añadido como dominio del sitio para ser tratado como dominio de confianza. Si no, los envíos al formulario también se filtrarán a tu envíos de spam.

Agregar el código de incrustación del formulario

• En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
• Coloca el cursor sobre un formulario y haz clic en Acciones > Compartir.
• En el cuadro de diálogo, si quieres agregar contactos que envíen el formulario a una campaña de Salesforce, haz clic en el menú desplegable Agregar contactos a una campaña de Salesforce y selecciona una campaña. Si asocias una campaña de Salesforce a tu formulario, se modificará el código de incrustación del formulario. En este caso, debes volver a agregar el código de incrustación a tu sitio externo.
• Haz clic en Copiar.
• Pega el código de incrustación en el módulo HTML en tu página externa. Para hacer seguimiento a las analíticas de tu formulario, tu código de seguimiento de HubSpot debe estar instalado en la página externa donde colocas un formulario de HubSpot. 

Crear una página de formulario independiente 

También puedes compartir tu formulario a través del enlace Compartir. En un enlace Compartir, el formulario se mostrará en una página independiente en su propia URL. Este enlace para compartir no puede ocultarse ni hacerse privado. Cualquiera que tenga el enlace para compartir podrá acceder al formulario. 

• En tu cuenta de HubSpot, dirígete a Marketing > Formularios. 
• Coloca el cursor sobre un formulario y haz clic en Acciones > Compartir.
• En el cuadro de diálogo, haz clic en la pestaña Compartir enlace . 
• Haz clic en Copiar para copiar la URL de la página del formulario en tu portapapeles. 
• En tu navegador, abre una nueva ventana o pestaña y pega la URL de la página de tu formulario en la barra de direcciones para cargarla. También puedes compartir la URL de la página del formulario directamente con otras personas para darles acceso al formulario.
  
  

Diseñar tu formulario incrustado en el editor de formularios

Al dar estilo a tu formulario incrustado con el editor de formularios de HubSpot, puedes utilizar un tema o aplicar tu propio estilo personalizado. 

Ten en cuenta: los temas y estilos de establecidos en el editor de formularios sólo se aplicarán a los formularios incrustados de  o a las páginas de formularios independientes de . Los formularios de tus páginas de HubSpot sólo pueden tener el estilo  con las opciones de estilo del módulo de formularios en el editor de contenido.

Estiliza tu formulario con un tema (legado)

Si desea dar estilo a su formulario heredado sin escribir ningún código personalizado, puede aplicar temas preestablecidos a su formulario insertado o a su página de formulario independiente. Estos temas añaden más opciones de personalización a tus formularios, además de cualquier configuración global de estilo de formulario de .

Para dar estilo a tu formulario con un tema: 

• En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
• Coloca el cursor sobre un formulario y haz clic en Editar.
• En el editor de formularios, haz clic en la pestaña Estilo y vista previa .
• Si estás editando un formulario heredado, en el panel izquierdo, desactiva la casilla Mantener tema antiguo . Esto eliminará el antiguo estilo predeterminado de HubSpot aplicado a este formulario. Cualquier CSS personalizada o JavaScript que hayas agregado al formulario ya no funcionará. Esta casilla no se aplica a los nuevos formularios creados en tu cuenta. 
• Selecciona un tema.
• En la parte superior derecha, haz clic en Publicar o Actualizar.

Usar un estilo personalizado

También puede aplicar estilo a los formularios a un nivel más granular. 

Para aplicar un estilo personalizado: 

• En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
• Coloca el cursor sobre un formulario y haz clic en Editar.
• Si está editando un formulario heredado y tiene una suscripción a Marketing Hub Starter, Professional o Enterprise , haga clic en la pestaña Vista previa de Style & en el editor de formularios. 
  • En el panel izquierdo, haz clic en la sección Estilo.  Aquí, puedes configurar el ancho del campo del formulario, familia de fuentes, tamaños de fuente, colores de fuentes y botón de formulario. Estos estilos se establecen de forma individual para cada formulario y anulan los ajustes globales de estilo de formulario de .
  • Después de personalizar tu formulario, en la parte superior derecha, haz clic en Publicar o Actualizar.
    
    

• Si utiliza el editor de formularios actualizado, en la parte izquierda, haga clic en el icono Estilos.
  • Cuando personalice su Texto, Campos de entrada, o Botón, puede elegir entre los estilos existentes utilizando los Estilos de entrada de campo rápido. También puede personalizar manualmente el estilo de cada componente del formulario:
    • Campos: personalice el campo, incluidos el fondo y los bordes. También puede personalizar la fuente, el tamaño de fuente y los colores de las etiquetas, así como los colores del texto de ayuda, los marcadores de posición y el texto de error. 
    • Botones: personalice la altura del botón, el redondeo de las esquinas, el fondo, el degradado y añada una sombra paralela al botón. También puede personalizar la fuente, el tamaño de la fuente y el color del texto del botón. 
    • Párrafo (texto enriquecido): personalice la fuente, el tamaño y el color del cuerpo del texto. 
    • Encabezado: personalice la fuente y el color del texto de su encabezado. Puede añadir una sombra paralela al texto de la cabecera. 
    • Fondo: personaliza el fondo de tu formulario y de los pasos del formulario. Puede elegir entre establecer un color de fondo o utilizar una imagen para el fondo. Puede utilizar los asistentes AI para generar imágenes. También puede establecer un borde para su formulario.
    • Barra de progreso: personaliza la barra de progreso de tu formulario, incluyendo el color de la línea de progreso y la fuente de la barra de progreso. 

Estiliza tu formulario insertado con CSS en tu hoja de estilo externa (legacy)

Si tienes una suscripción a Marketing Hub o Content Hub Pro o Enterprise con tu cuenta de HubSpot, puedes insertar tu formulario heredado como un formulario HTML sin procesar y, a continuación, aplicar estilo a este formulario insertado con CSS en tu hoja de estilos externa. 

Nota: sólo puede ajustar los formularios heredados como HTML sin formato. 

Para dar estilo a tu formulario incrustado con CSS: 

• En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
• Coloca el cursor sobre un formulario y haz clic en Editar.
• En el editor de formularios, haz clic en la pestaña Estilo y vista previa .
• Haz clic para activar el interruptor Establecer como formulario HTML sin formato . El formulario se mostrará como un elemento HTML sin procesar en tu sitio web en lugar de dentro de un iFrame, y cualquier estilo de HubSpot predeterminado aplicado al formulario será eliminado.
• En la parte superior derecha, haz clic en Publicar o Actualizar.
• Añade el código de incrustación del formulario a tu página externa. Si ya has incrustado tu formulario, debes sustituir el código de incrustación existente por esta nueva versión sin estilo. Después de incrustar tu formulario:
  
  • Podrá dar estilo al formulario en su hoja de estilos externa con CSS.
  • También puede modificar el código de inserción del formulario para personalizarlo. Como los formularios de HubSpot se crean con JavaScript, no con HTML, personalizar el código de incrustación del formulario requiere la ayuda de un desarrollador que sepa trabajar con JavaScript