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: diciembre 3, 2020

Requisitos

Todos los productos y planes

Con la herramienta de formularios, puedes recopilar información de visitantes a tu sitio web, lo que te permite promocionar, vender y brindar servicios a esos visitantes mientras interactúan con tu empresa. Cuando creas 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 de dos maneras en tu sitio web externo, no de HubSpot: incrustando el código de formulario en una página existente o creando 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.

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

Nota: 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.

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > Formularios.
  •  Crea un nuevo formulario o coloca el cursor sobre unformulario existente, haz clic en el menú desplegableAccionesy selecciona Editar formulario.
  • Haz clic en la pestaña Opciones para elegir lo que sucederá después de que un visitante envía tu formulario. Puedes elegir redirigir a tus visitantes a una página de agradecimiento o mostrar un mensaje de agradecimiento en línea cuando un visitante envía tu formulario.
  • En el editor de formularios, en la parte superior derecha, haz clic en 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.
  • Haz clic en Copiar.
    forms-editor-share-form-copy-form-embed
  • En la parte superior derecha, haz clic en Publicar
  • 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. HubSpot recopila envíos de formularios sin el código de seguimiento de HubSpot instalado, pero no se registrarán analíticas. 

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

Crear una página de formulario independiente 

Puedes compartir tu formulario en una página de formulario, de manera que exista en su propia página, en su propia URL.  

  • En tu cuenta de HubSpot, dirígete a Marketing > Captación de oportunidades de venta > Formularios
  •  Crea un nuevo formulario o coloca el cursor sobre unformulario existente, haz clic en el menú desplegableAccionesy selecciona Editar formulario.
  • En la parte superior derecha, haz clic en 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. 

share-form-own-page

  • En la parte superior derecha, haz clic en Publicar.
  • 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.
Si estás incrustando un formulario en tu sitio de WordPress, es posible que debas aplicar declaraciones CSS adicionales dentro de tu hoja de estilo externa para que el formulario sea adaptable. 

Si observas que tu formulario no funciona en WordPress o el código de incrustación que se cambia cuando ves la página en directo, es posible que debas insertar el formulario usando un plugin para asegurarte de que el código de incrustación permanezca intacto. Si estás usando la versión más reciente de Guttenberg, que elimina JavaScript en línea, usa la opciónInline JS para plugin de Guttenberg para incrustar formularios y CTA en tu página.

Estilo a tu formulario incrustado en una página externa

Descubre cómo diseñar tu formulario de HubSpot incrustado en páginas externas en el editor de formularios o con CSS en tu hoja de estilo externa.

En el editor de formularios

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. Los temas agregan más opciones de personalización a tus formularios, además de cualquier configuración de estilo de formulario global.

  • En tu cuenta de HubSpot, navega a Marketing > Captura de leads > Formularios.
  • Haz clic en el nombre de un formulario.
  • En el editor de formularios, haz clic en la pestaña Estilo y vista preliminar.
  • En el panel izquierdo, la sección Tema, borra la casilla de comprobación Mantener tema anterior.

Nota: Borrar la casilla de verificación Mantener tema anterior 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 solo está disponible para formularios heredados y no estará disponible en ningún formulario nuevo creado en tu cuenta. 

  • Seleccionar uno de los cuatro temas.

 

Estilo (Marketing Hub Starter, Pro, Enterprise, o Legacy Marketing Hub Básico únicamente)

Además de temas, puedes diseñar formularios incrustados en un nivel más detallado.

  • En tu cuenta de HubSpot, navega a Marketing > Captura de leads > Formularios.
  • Haz clic en el nombre de un formulario.
  • 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 para ampliarlo. Aquí, puedes diseñar 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 para cada formulario individualmente y anularán la configuración de estilo de formulario global.

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

Estilo de tu formulario con CSS en tu hoja de estilo externa (Marketing Hub y CMS Hub Pro o Enterprise, o Legacy Marketing Hub Básico únicamente)

  • En tu cuenta de HubSpot, navega a Marketing > Captura de leads > Formularios.
  • Haz clic en el nombre del formulario.
  • 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.

options-unstyled-form

  • En la parte superior derecha, haz clic en Compartir.
  • En el cuadro de diálogo, haz clic en Copiar para copiar el código de incrustación del formulario.
  • 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, puedes diseñar el formulario en tu hoja de estilo externa con CSS. 
  • De manera alternativa, puedes modificar el código de incrustación del formulario para hacer las 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.