HubSpot: Cómo usar formulario HubSpot en Ion

Si deseas utilizar formularios de HubSpot en tus publicaciones de Ion, consulta esta publicación y aprende cómo hacerlo reutilizando fácilmente un código de inserción.

Los siguientes pasos te permitirán redirigir un visitante a una página de Ion después de haber respondido un formulario creado en Hubspot. Además, también aprenderás a agregar lógica y reglas de Ion a tus formularios externos de HubSpot.

¡Antes de comenzar!

Antes de configurar un widget de formulario de HubSpot en Ion, debes saber dónde encontrar el ID del portal de HubSpot y el ID del formulario que deseas agregar a tus páginas.

Tu ID de portal de HubSpot es un valor numérico que siempre estará presente en la URL de cada página de tu cuenta de HubSpot. Por ejemplo, al revisar contactos en tu cuenta de HubSpot, tu URL se verá así:

  • https://app.hubspot.com/contacts/  123456  / contactos

En este ejemplo, podemos ver el ID del portal en negrito. 

El ID del formulario es una cadena alfanumérica más larga que verás en la URL cuando edites tus formularios en HubSpot.

A continuación, se muestran algunos ejemplos de URLs:

Editar formulario:

  • https://app.hubspot.com/forms/123456/editor/  a1bbbcd2-345b-1234-1234-1a23b456c789  / edit / form

Página de Rendimiento de un formulario:

  • https://app.hubspot.com/forms/355484/  a1bbbcd2-345b-1234-1234-1a23b456c789  / performance

La parte en negrito es tu ID de formulario.

Primeros pasos

Ahora que sabes dónde encontrar el ID del portal de HubSpot y los valores de ID de formulario, guarda estos datos para usarlos más adelante.

El siguiente paso será realizar la configuración en el widget de formulario de Ion.

Agrega el código del widget a tu biblioteca 

El primer paso en Ion es agregar el siguiente código a tu biblioteca de widgets:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: '##portalId',
formId: '##formId',
  onFormSubmitted: function($form) {
top.location.href = '##OnSubmittedUrl'
},
});
</script>

 

Para hacer esto, copia el código anterior y ve a Bibliotecas> Widgets.

Haz clic en el botón verde "New widget".

Recomendamos nombrar este nuevo widget como Embed Form y almacenarlo en una categoría llamada HubSpot. 

Ahora simplemente tienes que pegar el código del widget en el editor.

ATENCIÓN: Este código incluye variables que debes completar con el ID de tu portal y el ID del formulario. 

También es necesario cambiar la variable que te permitirá especificar a qué página el visitante será redirigido después de que se envíe el formulario.

Realiza estos cambios antes de guardar, como en el siguiente ejemplo:

Cómo agregar el widget de formulario a tu publicación

Navega a la página donde deseas insertar este formulario de HubSpot.

Arrastra el ícono de Widget desde el menú "Basics" a la ubicación de tu página deseada y luego selecciona tu nuevo Widget en la categoría de HubSpot> Embed Form (el nombre de la categoría y el Widget puede variar,  eso depende de la manera como lo guardaste en el paso anterior).

Luego, en ¨Variables¨, ingresa el ID del portal y el ID del formulario de tu cuenta de HubSpot y selecciona la página de Ion a la que deseas redirigir a ese visitante después de que realice la conversión.

¡Listo! 

¡Tu formulario de HubSpot ahora está integrado (Embed) en tu publicación de Ion!

¡Con eso, incluso puedes agregar reglas a tu formulario como lo haría con cualquier otro elemento de la plataforma!