Aunque WordPress sigue siendo nuestra herramienta favorita para desarrollos web, en función de las necesidades específicas de cada proyecto y cliente, también optamos por otras tecnologías.
Últimamente, hemos trabajado en estrecha colaboración con equipos de marketing y diseño para integrar formularios de HubSpot en Webflow, mejorando así la funcionalidad y personalización de estos sitios.
En este artículo, vamos a detallar cómo integrar formularios de HubSpot en Webflow. Aunque existen distintas maneras de hacerlo, aquí nos centraremos en dos métodos principales.
Cómo crear un formulario nativo en Webflow e integrarlo con HubSpot
Para diseñar un formulario completamente personalizado, primero debemos crear uno utilizando los componentes disponibles en Webflow y luego integrarlo usando la aplicación de HubSpot para Webflow, que se encuentra en su Marketplace.
Una vez instalada y configurada la aplicación, deberás abrirla y seleccionar «Map Webflow form to HubSpot form». Luego, asigna el formulario de HubSpot que hemos diseñado en el layout de Webflow y empieza a mapear los campos uno a uno.
Este método ofrece un formulario de Webflow integrado perfectamente con HubSpot. Sin embargo, una limitación es que cualquier modificación, como añadir un campo nuevo, requiere la intervención de un diseñador o desarrollador familiarizado con Webflow, lo que podría reducir la eficiencia del equipo de marketing al depender de otros para hacer cambios.
Eliminar etiquetas HTML en Webflow en formularios de HubSpot
A veces, los formularios muestran código HTML de manera visible, lo cual puede confundir a los usuarios y reducir la tasa de conversión del formulario.
Con el siguiente código JavaScript, podemos eliminar las etiquetas HTML innecesarias en los formularios:
var checkboxLabels = document.querySelectorAll('.form');
checkboxLabels.forEach(function (label) {
if (label.innerHTML.includes('<p>') && label.innerHTML.includes('</p>')) {
label.innerHTML = label.innerHTML.replace(/<p>|</\/p>/g, '');
}
});Cómo incrustar formularios de HubSpot en Webflow
Esta técnica es ideal para que el equipo de marketing mantenga completa autonomía y flexibilidad.
Incorpora el formulario embebido de HubSpot en el diseño de Webflow copiando y pegando el código que HubSpot te proporciona en un componente HTML Embed de Webflow.
Añadir eventos en el formulario de HubSpot
Al añadir el formulario mediante código, podemos utilizar diferentes parámetros de configuración y eventos:
- onFormReady: se activa cuando el formulario está completamente cargado, permitiendo así la inserción de valores en campos específicos.
- onFormSubmit: se activa tras validar el formulario y antes de enviar los datos a HubSpot, ideal para integrar eventos con Google Tag Manager.
- onBeforeFormSubmit: se activa al pulsar el botón de envío, antes de que los datos se envíen a HubSpot, crucial si necesitas validar o modificar los datos previamente.
- onFormSubmitted: se activa tras el envío del formulario, esencial para realizar redirecciones o mostrar mensajes de agradecimiento.
Para más detalles, puedes visitar cómo personalizar el código para insertar del formulario.
Evento de HubSpot onformsubmitted
Se activa el evento onFormSubmitted, después de que un usuario haya enviado el formulario. En este punto, puedes configurar acciones como redirecciones a páginas específicas, mostrar mensajes de agradecimiento personalizados o incluso enviar notificaciones por correo electrónico.
Utilizar el evento onFormSubmitted de HubSpot te da la oportunidad de mejorar la experiencia del usuario al proporcionar retroalimentación inmediata después de que hayan completado el formulario. Esto puede ayudar a reforzar la confianza del usuario y aumentar la satisfacción con tu marca.
Personalizar las acciones que ocurren cuando se dispara onFormSubmitted te permite adaptar la interacción del usuario según tus objetivos específicos. Puedes aprovechar este evento para realizar seguimientos adicionales, como actualizaciones en tu base de datos o integraciones con otras plataformas.
Al sacar el máximo provecho de onFormSubmitted, puedes automatizar procesos posteriores al envío del formulario, lo que te permite optimizar tu flujo de trabajo y aumentar la eficiencia de tus operaciones de marketing. Esta funcionalidad avanzada puede marcar la diferencia en la conversión de leads y la retención de clientes.
Personalizar el formulario de HubSpot con css
Dependiendo del plan contratado en HubSpot, puedes escoger que el formulario, se inserte como HTML en línea en lugar de como un iFrame.
Este método permite al equipo de marketing personalizar completamente el formulario a través de HubSpot o al equipo de desarrollo, utilizando CSS y ampliar sus funcionalidades con JavaScript, dándoles la libertad de modificar el formulario directamente desde HubSpot.
Conclusión: Mejora tus integraciones de Marketing en HubSpot y Webflow
Hemos recorrido las estrategias clave para integrar formularios de HubSpot en Webflow, enfocándonos en mejorar la autonomía y eficiencia de los equipos de marketing B2B. La personalización y la correcta implementación de estos formularios pueden marcar una diferencia significativa en cómo interactúas con tus clientes y en la conversión general de tu sitio.
Mantener un flujo de trabajo ágil y efectivo es esencial en el dinámico mundo del marketing digital.
Si después de leer esta publicación sientes que podrías beneficiarte de soporte personalizado, o necesitas asistencia experta para optimizar tus herramientas, te invitamos a visitar nuestra página de servicios de desarrollo.
Estamos aquí para ayudarte a aprovechar al máximo tus recursos, y fortalecer tus estrategias de marketing.
