Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Forms

Comparte un formulario de HubSpot en un sitio externo

Última actualización: septiembre 15, 2022

Requisitos

Todos los productos y planes

 Después de crear un formulario en HubSpot, puedes agregarlo a páginas de HubSpot o páginas que hayas creado fuera de HubSpot. Los formularios se pueden compartir en tu sitio web externo, no alojado en HubSpot, ya sea:

  • Incrustar el código de formulario en una página existente
  • Crear una página de formulario independiente a la que puedas 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 escribir tu formulario de HubSpot incrustado en tus páginas externas en el editor de formularios o con CSS en tu hoja de estilo externa.

Si estás trabajando con WordPress, descubre cómo insertar un formulario en tu publicación o página de WordPress.

Agregar el código de incrustación del formulario

Para acceder al código de incrustación del formulario: 
  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > 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 con tu formulario, el código de incrustación del formulario cambiará. 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 compartido no se puede ocultar ni hacer privado. Cualquiera con el enlace de compartir podrá acceder al formulario.   

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > 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 el portapapeles. 
  • En tu navegador, abre una nueva ventana o pestaña y pega la URL de la página del formulario en la barra de direcciones para cargarla. También puedes compartir la URL de la página del formulario directamente con otros para darles acceso al formulario.

Estilo de tu formulario incrustado en el editor de formularios

Al diseñar tu formulario incrustado con el editor de formularios de HubSpot, puedes usar un tema o aplicar tu propio estilo personalizado. 

Nota: temas y estilos establecidos en el editor de formularios solo se aplicarán a formularios incrustados o páginas de formulario independientes. Formularios de estilo en tus páginas de HubSpot con las opciones de estilo del módulo de formulario en el editor de contenido.

Estilo de tu formulario con un tema

Si quieres diseñar tus formularios sin escribir ningún código personalizado, puedes aplicar temas preestablecidos a tu formulario incrustado o página de formulario independiente. Estos temas agregan más opciones de personalización a tus formularios, además de cualquier configuración de estilo de formulario global.

Para darle estilo a tu formulario con un tema: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > 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 preliminar.
  • Si estás editando un formulario heredado, en el panel izquierdo, borra la casilla de comprobación Mantener el tema anterior. 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 de comprobación no se aplica a ningún formulario nuevo creado en tu cuenta. 
  • Selecciona un tema.
  • En la esquina superior derecha, haz clic en Publicar o Actualizar.

 

Usa un estilo personalizado

Si tienes una suscripción de Marketing Hub Starter, Pro Enterprise con tu cuenta de HubSpot, también puedes diseñar formularios incrustados en un nivel más detallado.

Para aplicar un estilo personalizado: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > 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 preliminar.
  • 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 fuente y botón de formulario. Estos estilos se establecen para cada formulario individualmente y anularán la configuración de estilo de formulario global.
  • Después de personalizar tu formulario, e n la parte superior derecha, haz clic en Publicar o en Actualizar.



Estilo de tu formulario incrustado con CSS en tu hoja de estilo externa 

Si tienes una suscripción a Marketing Hub o CMS Hub Pro o Enterprise con tu cuenta de HubSpot, puedes incrustar tu formulario como un formulario HTML sin procesar y luego diseñar este formulario incrustado con CSS en tu hoja de estilo externa. 

Para diseñar tu formulario incrustado con CSS: 

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > 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 preliminar.
  • Haz clic para activar el interruptor Establecer como formulario HTML sin procesar. 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 esquina superior derecha, haz clic en Publicar o Actualizar.
  • Agrega el código de incrustación del formulario a tu página externa. Si ya has incrustado tu formulario, debes reemplazar el código de incrustación existente con esta nueva versión sin estilo. Después de incrustar tu formulario:
    • Podrás diseñar el formulario en tu hoja de estilo externa con CSS.
    • También puedes modificar el código de incrustación del formulario para hacer personalizaciones adicionales. Debido a que los formularios de HubSpot se crearon con JavaScript, no con HTML, personalizar el código de incrustación del formulario requiere de la ayuda de un desarrollador que sepa cómo trabajar con JavaScript

 

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