Última actualización: junio 28, 2023
Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:
Todos los productos y planes
|
Puedes diseñar tu formulario de HubSpot incrustado en tus páginas externas en dos maneras:
- Estilo de tu formulario incrustado en el editor de formularios
- Estilo de tu formulario incrustado con CSS en tu hoja de estilo externa
Estilo de tu formulario incrustado 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, dirígete a Marketing > 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 comprobación Mantener tema anterior eliminará el antiguo estilo de HubSpot aplicado a este formulario. Cualquier CSS personalizada o JavaScript que hayas agregado al formulario ya no funcionará.
- Seleccionar uno de los cuatro temas.
Estilo (Marketing Hub Starter, Básico (versión anterior), Pro y Enterprise únicamente)
Además de temas, puedes diseñar formularios incrustados en un nivel más detallado.
- En tu cuenta de HubSpot, dirígete a Marketing > 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 en un formulario individual y anularán la configuración de estilo de formulario global.
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 incrustado con CSS en tu hoja de estilo externa (Marketing Hub Básico (versión anterior), Pro y Enterprise únicamente)
- En tu cuenta de HubSpot, dirígete a Marketing > Formularios.
- Haz clic en el nombre del formulario.
- En el editor de formularios, haz clic en la pestaña Opciones.
- Haz clic para activar el interruptor Formulario sin estilo. 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 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 sitio externo. 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. Más información sobre el estilo de formularios de HubSpot con selectores estándar de atributos en la documentación de diseñadores de HubSpot.
- 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 requiere de la ayuda de un desarrollador que sepa cómo trabajar con JavaScript.
