Cómo sustituir un formulario existente con un formulario de HubSpot en tu sitio web externo

Última actualización: December 29, 2016

HubSpot entiende que algunos de nuestros clientes poseen un sitio web que no está hospedado en HubSpot, pero que aun así desean poder captar información de prospectos y almacenarla en HubSpot. Al respecto, ofrecemos dos opciones: los Formularios API y el código de inserción del formulario. Utilizar el código de inserción te otorga acceso a todos los beneficios de los formularios de HubSpot, como lo son la integración de la base de datos de contactos, los campos inteligentes y la creación progresiva de perfiles (cuentas Professional y Enterprise)en tu sitio web externo con el código de seguimiento de HubSpot instalado. Con el fin de aprovechar todas las funciones que ofrecen los formularios de HubSpot, en cada página web en vivo que tienes debería estar el código de seguimiento antes de agregar el código de inserción del formulario.

Si necesitas funcionalidad adicional en tus formularios, pero también deseas enviar datos captados de los contactos a HubSpot, puedes codificar tu propio formulario y usar los API de formularios para transferir los datos a HubSpot a través de tu guión de acción de formularios del lado del servidor. Utilizar los APIs de formularios requiere un desarrollador del lado del servidor, pero algunos de los conceptos básicos se resumen aquí. Si deseas obtener más información sobre los APIs de formularios , por favor revisa nuestros documentos para desarrolladores.

Dado que el código de inserción contiene Javascript, primero tendrá que asegurarse de que su otro CMS o sistema permite el uso de Javascript en las áreas de contenido de sus páginas.

Si tu formulario de HubSpot está ubicado en el sitio web externo (con el código de seguimiento), funcionará de la misma forma en que lo haría en una página de HubSpot. Podrás ver la fuente de llegada de tus contactos, los datos que envían y en qué página, analizar la tasa de vistas a envíos para conocer el rendimiento de tus formularios, crear listas basadas en estos datos, ejecutar flujos de trabajo con base en envíos de formularios y más. Mientras que el uso de los formularios de HubSpot en las páginas de destino de HubSpot mantiene todo tu contenido en una sola ubicación, y hace que elaborar, compartir y analizar el rendimiento de cada página sea más sencillo, utilizar estos formularios externamente sigue siendo fácil.

Instrucciones

Sigue estas instrucciones para copiar el código de inserción de un formulario de HubSpot.

1. Abre el formulario

Desde Contactos > Formularios, abre un formulario existente o crea uno nuevo.

2. Selecciona Incrustar

Una vez que tu formulario esté listo y guardado, selecciona elbotónIncrustar.

3. Inserta un URL de redireccionamiento o un mensaje automático de agradecimiento

Escribe o pega tu URL de redireccionamiento en la primera línea.

Para utilizar un formulario de HubSpot externamente, el envío del formulario debe redirigir a tus prospectos a una página de agradecimiento o incluir un mensaje de agradecimiento. 

También puedes insertar tu propio mensaje automático de agradecimiento para que aparezca luego de que alguien haya llenado tu formulario.

Si estás integrado con Salesforce, puedes seleccionar una campaña activa de Salesforce para incluir contactos en dicha campaña luego del envío de formularios. Cuando tus contactos envíen el formulario y se sincronicen de nuevo con Salesforce, formarán parte de tu campaña seleccionada. Solo las campañas activas aparecerán en esta lista de selección.

Aunque la mayoría de los cambios en el formulario que está dentro de la aplicación de HubSpot se actualizarán de manera automática en tu formulario insertado, cambiar la campaña de Salesforce requerirá el reemplazo de tu código de inserción. Si decides cambiar la campaña luego de insertar el formulario:

  • Regresa al formulario
  • Selecciona una nueva campaña
  • Inserta el código nuevo de formulario en tu sitio web externo.

Los nuevos envíos estarán vinculados a la nueva campaña (con base en el ID del código de inserción). Los envíos anteriores tendrán que ser movidos a la nueva campaña de Salesforce.

4. Copia el código de inserción

En la ventana, copia el código de inserción que aparece. Todas las partes del código deben colocarse en orden para captar correctamente la información sobre el prospecto y regresarla a HubSpot.

Si agregas nuevas propiedades o editas las opciones de propiedades existentes en tu formulario, estas aparecerán en tu página externa con las nuevas opciones de los campos.

5. Guarda el formulario

Por último, guarda tu formulario, ya que existen nuevas opciones asociadas a este.

6. Inserta el formulario de HubSpot en tu página externa

En este paso, tomarás el código de inserción del formulario (copiado en el paso 4) y lo pegarás dentro de tu página externa. Esto requiere que accedas al código HTML de la página externa en cuestión. Normalmente, si no estás seguro de dónde colocar el código de inserción del formulario dentro del HTML de tu página externa, te recomendamos que consultes con el administrador de tu sitio web para asegurarte de que el formulario está insertado correctamente en el lugar deseado.

Cómo modificar tu código de inserción (avanzado)

Existen situaciones en las que quizá desees modificar tu código de inserción para continuar personalizando la presentación, así como otras opciones del formulario. Por ejemplo, los formularios insertados de HubSpot cargan de manera automática algunos diseños para contribuir a que el formulario luzca bien en cualquier página, independientemente del CSS de esa página. Sin embargo, algunos usuarios avanzados quizá deseen personalizar la apariencia de su formulario modificando el código de inserción. Aquí puedes encontrar una lista completa de opciones de personalización de inserción de formularios.

Artículo anterior:

Certificación Inbound Marketing

Artículo siguiente: