Estiliza e inserta formularios de HubSpot en un sitio externo

Utiliza formularios de HubSpot en tu sitio web externo para captar leads y sincronizar automáticamente los datos de contacto con tu cuenta de HubSpot. Puedes dar estilo a tu formulario en HubSpot y utilizar el código de inserción del formulario para añadirlo a tu sitio. O utilice un enlace para compartir para enviar un formulario independiente a su público. 

Al insertar un formulario, los envíos se sincronizan directamente con tu cuenta de HubSpot, donde puedes gestionar los contactos, desencadenar automatizaciones y analizar el rendimiento. Por ejemplo, puedes añadir un formulario de HubSpot a una página de producto en el sitio web de tu empresa para capturar solicitudes de demostración y hacer un seguimiento con un correo electrónico automatizado. 

Si su formulario se creó en el editor de formularios heredados, aprenda a configurar y aplicar estilo a un formulario heredado en un sitio externo.

Antes de empezar

Antes de empezar a trabajar con esta función, revise los requisitos técnicos y las consideraciones para utilizar formularios en sitios externos.

Requisitos

• Al insertar un formulario de HubSpot en un sitio externo, tendrás que añadir el dominio del sitio a tu configuración de seguimiento. Los envíos de formularios desde dominios que no estén añadidos se marcarán como spam.
• Para realizar un seguimiento analítico de tu formulario insertado, debes instalar el código de seguimiento de HubSpot en tu página externa.
  

Limitaciones y consideraciones

• La configuración de tu formulario como formulario HTML sin formato no está disponible en el editor de formularios actualizado. Solo los formularios creados con el editor de formularios heredado pueden establecerse como HTML sin formato.
• Personalizar el código de insertar de un formulario requiere de la ayuda de un desarrollador que sepa cómo trabajar con JavaScript. Se puede realizar una personalización más avanzada con un formulario personalizado y la API de formularios de HubSpot .

Diseñar tu formulario 

Personalice el texto, los campos de entrada, los botones y el fondo del formulario y de los pasos del formulario. Las personalizaciones de estilo de formulario se aplican a todos los pasos del formulario. No se puede aplicar estilo a pasos individuales del formulario por separado. 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Cree un nuevo formulario o pase el ratón por encima de un formulario existente y haga clic en Editar.
3. En el menú de la barra lateral izquierda, haga clic en el icono styles Icono de estilo.
4. Desde el panel Estilos de formulario , puede personalizar los siguientes componentes:
   • Campos: personaliza el campo, incluidos el fondo y los bordes. También puedes 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: personaliza la altura del botón, el redondeo de las esquinas, el fondo, el gradiente y agrega una sombra paralela al botón. También puedes personalizar la fuente, el tamaño de la fuente y el color del texto del botón. 
   • Párrafo (texto enriquecido): personaliza la fuente, el tamaño y el color del cuerpo del texto. 
   • Encabezado: personaliza la fuente y el color del texto del encabezado. Puedes agregar una sombra paralela al texto del encabezado. 
   • Fondo: personaliza el fondo de tu formulario y de los pasos del formulario. Puedes elegir entre establecer un color de fondo o utilizar una imagen para el fondo. Puedes utilizar asistentes de IA para generar imágenes. También puedes establecer un borde para tu 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. 

Compartir una página de formulario independiente 

Utilice un enlace para compartir para mostrar su formulario en una página independiente. Cualquiera que tenga el enlace para compartir puede acceder al formulario. El enlace para compartir no puede ocultarse ni hacerse privado.

Para copiar el enlace para compartir:

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Pase el ratón por encima de un formulario y haga clic en Editar.
3. En la parte superior derecha, haz clic en Revisar y actualizar.
4. En el panel derecho, en la parte inferior, haga clic en Actualizar.
5. En el cuadro de diálogo, haga clic en Copiar un enlace compartido.
6. En la parte inferior, haz clic en Copiar. Esto copiará la dirección web de la página en tu portapapeles.
7. En su navegador, abra una nueva ventana o pestaña y pegue la URL de su página 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.

Copie el código de inserción del formulario

Inserte su formulario en su página externa copiando el código de inserción del formulario y pegándolo en su página externa. Para realizar un seguimiento de las analíticas de tu formulario incrustado, tu código de seguimiento de HubSpot debe estar instalado en la página externa donde insertas el formulario de HubSpot.

Para copiar el código de incrustación. 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Pase el ratón por encima de un formulario y haga clic en Editar. 
3. En la parte superior derecha, haz clic en Revisar y actualizar.
4. En el panel derecho, en la parte inferior, haga clic en Actualizar.
5. En el cuadro de diálogo, haga clic en Obtener código de inserción.
6. En la pestaña Insertar código , haga clic en Copiar.
7. Pega el código de incrustación en el módulo HTML en tu página externa.

Acceder al código de desarrollo del formulario

Inserta tu formulario y personaliza el estilo utilizando CSS en tu hoja de estilos externa. Con este método, puede anular los estilos predeterminados, aplicar un estilo granular a elementos específicos del formulario y establecer reglas globales para un estilo coherente en todos sus formularios insertados. Más información sobre cómo definir estilos personalizados para formularios insertados utilizando CSS. 

Para acceder al código de desarrollador: 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Pase el ratón por encima de un formulario y haga clic en Editar. 
3. En la parte superior derecha, haz clic en Revisar y actualizar.
4. En el panel derecho, en la parte inferior, haga clic en Actualizar.
5. En el cuadro de diálogo, haga clic en Obtener código de inserción.
6. Haga clic en la pestaña Código de desarrollador (Avanzado) .
7. Para aceptar el riesgo de que los cambios realizados externamente en CSS o JavaScript puedan hacer que su formulario se rompa, seleccione la casilla de verificación Entiendo los riesgos, muéstreme el código .
8. En la parte inferior, haz clic en Copiar.
9. Inserta el código del formulario en tu página externa. Después de insertar tu formulario, podrás darle estilo en tu hoja de estilos externa con CSS.
   • Las variables CSS que puedes anular se enumeran en este artículo.
   • Los estilos globales anularán el estilo de nivel superior en todos los formularios insertados. También puede dirigirse a elementos individuales de sus formularios, como una fila de elementos de formulario, botones de envío o encabezados de formulario.