Ajuste y estilo de un formulario heredado en un sitio externo

 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 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 agregar tu formulario, puedes 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. Si estás trabajando con WordPress, descubre cómo insertar un formulario en tu publicación o página de WordPress.

Se recomienda utilizar el editor de formularios actualizado para crear y gestionar formularios. Este artículo debe utilizarse como referencia únicamente para los formularios existentes creados con el editor anterior. Más información sobre la estilización de formularios en un sitio externo. 

Antes de empezar

Al insertar el código de inserción del formulario en una página externa, el dominio de la página debe añadirse como dominio del sitio para que sea tratado como un dominio de confianza. Si no, los envíos al formulario también se filtrarán a tu envíos de spam.

Acceder al código de inserción del formulario

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Coloca el cursor sobre un formulario y haz clic en Acciones > Compartir.
3. 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 asocia una campaña de Salesforce a su formulario, se modificará el código de inserción del formulario. En este caso, debes volver a agregar el código de incrustación a tu sitio externo.
4. Haz clic en Copiar.
5. 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 para compartir. En un enlace para 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. 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios. 
2. Pasa el cursor sobre un formulario y haz clic en Acciones > Compartir.
3. En el cuadro de diálogo, haz clic en la pestaña Compartir enlace. 
4. Haz clic en Copiar para copiar la URL de la página del formulario en el portapapeles. 
5. 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.
   
   

Diseñar tu formulario incrustado en el editor de formularios

A la hora de diseñar tu formulario incrustado con el editor de formularios de HubSpot, puedes utilizar un tema o aplicar tu propio estilo personalizado. 

Nota: los temas y estilos ajustados en el editor de formularios sólo se aplicarán a los formularios insertados o a las páginas de formularios independientes. Los formularios en tus páginas de HubSpot sólo pueden ser estilizados con las opciones de estilo del módulo de formularios en el editor de contenido.

Diseñar tu formulario con un tema 

Si desea dar estilo a su formulario heredado sin escribir 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 sus formularios, además de cualquier ajuste global de estilo de formulario.

Para diseñar tu formulario con un tema: 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Coloca el cursor sobre un formulario y haz clic en Editar.
3. En el editor de formularios, haz clic en la pestaña Estilo y vista preliminar.
4. Si estás editando un formulario preexistente, en el panel izquierdo, marca la casilla de verificación Mantener el tema anterior. Este 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 verificación no se aplica a los nuevos formularios creados en tu cuenta.  
5. Selecciona un tema.
6. En la esquina superior derecha, haz clic en Publicar o Actualizar.

Usar un estilo personalizado

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

Para aplicar un estilo personalizado: 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Coloca el cursor sobre un formulario y haz clic en Editar.
3. En el editor de formularios, haz clic en la pestaña Estilo y vista previa. 
   • 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 ajustan individualmente para cada formulario y anulan los ajustes de estilo globales.
   • Después de personalizar tu formulario, en la parte superior derecha, haz clic en Publicar o Actualizar.

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

Si estás utilizando un formulario anterior, puedes insertar tu formulario como un formulario HTML sin procesar. A continuación, puedes aplicar estilo a este formulario insertado con CSS en tu hoja de estilos externa. 

Nota: solo puedes ajustar los formularios anteriores como HTML sin formato. Más información sobre cómo dar estilo a tu formulario insertado con CSS en el editor de formularios actualizado. 

Para diseñar tu formulario incrustado con CSS: 

1. En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
2. Coloca el cursor sobre un formulario y haz clic en Editar.
3. En el editor de formularios, haz clic en la pestaña Estilo y vista previa.
4. Haz clic para activar el interruptor Establecer como formulario HTML sin procesar. El formulario se mostrará como un elemento HTML sin formato en la página externa en lugar de dentro de un iframe. Se eliminará cualquier estilo predeterminado de HubSpot aplicado al formulario.
5. En la esquina superior derecha, haz clic en Publicar o Actualizar.
6. Inserta el código del formulario en 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 dar estilo al formulario en tu hoja de estilos 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.