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. Si tu contenido está alojado fuera de HubSpot, puedes añadir formularios con los siguientes métodos:

• Inserte el formulario copiando el código de inserción y añadiéndolo a su página externa.
• Utilice el enlace para compartir formularios, que ofrece una página web independiente para su formulario a la que puede enlazar.

Con cualquiera de los dos métodos, los cambios realizados en el formulario se actualizarán automáticamente en el formulario activo de su sitio externo. Puedes dar estilo a tu formulario HubSpot Embed dentro del editor de formularios o con CSS en tu hoja de estilos externa.

Antes de empezar

• Si desea ajustar su formulario como un formulario HTML sin formato, esta opción no está disponible en el editor de formularios actualizado. Sólo los formularios creados con el editor de formularios heredado pueden ajustarse como HTML sin formato.
• Si estás insertando tu formulario de HubSpot en una página externa, debes instalar el código de seguimientode HubSpot para realizar un seguimiento analítico. Aprende a instalar el código de seguimiento de HubSpot.

Diseñar tu formulario 

Personaliza el texto, los campos de entrada, el botón y el fondo de tu formulario y de los pasos del formulario. Las opciones de estilo configuradas en la pestaña Estilo global se aplicarán 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. Puede personalizar el estilo de los siguientes componentes del formulario:
   • 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. 

Copie el código de inserción del formulario

Puedes insertar tu formulario de HubSpot en tu página externa copiando el código de inserción del formulario y pegándolo en tu 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 acceder al código de inserció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.

Utilice el enlace para compartir una página de formulario independiente 

Puedes compartir tu formulario con el enlace compartir, que mostrará el formulario en una página web independiente. Este enlace no puede ocultarse ni hacerse privado. Cualquiera que tenga el enlace para compartir podrá acceder al formulario. 

Para acceder al 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 del formulario en su portapapeles.
7. 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 otros para darles acceso al formulario.

Diseñar tu formulario incrustado con CSS en tu hoja de estilo externa 

Los usuarios de una cuenta Marketing Hub o Content Hub Pro o Enterprise pueden insertar formularios y darles estilo utilizando CSS en la hoja de estilo 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. Obtenga más información sobre cómo definir estilos personalizados para formularios insertados mediante 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.