La Herramienta de Auditoría Insertable ha sido diseñada para ser simple y fácilmente editable. A propósito no comprimimos ni ofuscamos el código insertable como hacen otras herramientas de terceros que explícitamente te [impiden] personalizar el código.
En su lugar, exponemos todo el CSS en un bloque de código simple sobre el código de inserción HTML para que puedas dar estilo a los objetos del formulario siempre que tengas algunos conocimientos básicos de CSS.
Todo lo que se necesita es agregar algunas líneas de CSS en las secciones relevantes para personalizar completamente la apariencia y el estilo. Si tienes conocimientos intermedios de HTML, puedes modificar la estructura del formulario en sí.
También puedes añadir tus propias funciones de JavaScript (por ejemplo: [validación] extra del formulario) o puedes llamar a otras funciones / sistemas en [onSubmit] o [onClick] dentro del formulario.
La única recomendación de personalización que tenemos es no realizar ningún cambio en el bloque de código JavaScript, ya que eso puede causar errores. Relacionado con esto, te sugerimos que no muevas los elementos del formulario demasiado de su orden original, ya que algunas referencias de JavaScript dependen de la posición relativa de los objetos en el formulario.
Aparte de esto, le recomendamos encarecidamente y le animamos a personalizar el formulario para que coincida con la apariencia de su sitio web. Debería sentirse como una parte natural de la experiencia de su sitio y no como un "widget" añadido.
Como este formulario incrustado de Digital Butter:
Sugerimos esto porque vemos que las agencias logran niveles más altos de generación de "leads" cuando personalizan el formulario adecuadamente para que coincida con el estilo de su sitio web.
En esta guía, analizaremos las 3 personalizaciones avanzadas más comunes para el "Embed Form":
-
- "Validación [avanzada] de formularios"
- "Activar un evento de Google Analytics o Facebook durante el envío del formulario"
- "Personalizar los estilos del campo del formulario o del botón de envío"
Pero primero, echemos un vistazo a cómo está estructurado el código de inserción:
Explorando el Código de Inserción HTML Base
Para generar el código de inserción, ve a la pestaña Embedding Settings y haz clic en el botón "Guardar Configuración & Generar Código de Inserción". A continuación se muestra un ejemplo del código base.
Notarás que la primera sección es CSS, seguida de HTML y finalmente JavaScript. Deberías personalizar las dos primeras secciones y dejar el JavaScript tal como está. Como se sugiere en el comentario de la 2ª línea, puedes mover la sección CSS a tu archivo CSS para que todo esté gestionado en un solo lugar centralmente.
1. Validación Avanzada de Formularios
El "SEOptimer Embed Form" tiene una validación de formulario simple incorporada por defecto. Al [enviar], el JavaScript verifica todos los campos del formulario en busca de entrada válida y, en caso de que haya entrada no válida, activa un mensaje de alerta de JavaScript en el navegador como el siguiente:
Las dos alternativas más populares para agregar una validación robusta al Formulario Embed son la "validación de restricciones" y la "validación en tiempo real":
Validación de "constraint"
Consulta la guía de CSS-Tricks sobre "validación de restricciones" que utiliza mensajes contextuales en o alrededor del campo del formulario a medida que se enfoca. Este método anticipa al usuario y lo guía hacia "adherirse" al formato de entrada esperado o, en el ejemplo a continuación, al menos introducir algo en el campo:
.png)
Validación en "tiempo real"
CSS-Tricks también tiene una excelente guía sobre validación en tiempo real que proporciona validación en el campo al usuario mientras escribe. Esto puede ser tan simple como iconografía para indicar [entrada] correcta en el formulario:
2. "Disparar" un evento de Google Analytics o Facebook durante el envío del formulario
Disparar eventos de seguimiento como GA o Facebook para la "medición" de objetivos o retargeting es una excelente manera de aprovechar el tráfico utilizando tu Formulario [Incrustado]. La mejor manera de hacerlo es con una herramienta de "Gestión" de Etiquetas como la propia de Google Tag Manager (GTM).
De esa manera, puedes instalar GTM como un contenedor vacío en tu sitio web y luego gestionar todas las "etiquetas" y "píxeles" desde el propio GTM sin la necesidad de profundizar en el código cada vez.
Hay dos maneras en que GTM puede activar eventos en el envío de un formulario en tu sitio web:
- Usando el disparador de formulario incorporado cuando ocurre el evento submit del formulario
- Dependiendo de un Evento custom (línea de JavaScript) que necesita ser añadido a la capa de datos de GTM
Para la mayoría de los usuarios, la primera opción es la mejor ya que es más fácil de implementar y funciona bien. El formulario de inserción de SEOptimer utiliza una acción submit estándar de HTML cuando el usuario lo completa, por lo que mientras no cambies la forma en que el formulario envía datos, entonces el disparador incorporado de GTM es el camino a seguir.
Necesitarás crear un nuevo Disparador en GTM basado en "Envío de formulario":
.png)
También asegúrate de habilitar la variable incorporada "Form ID" de GTM. Esta variable identificará el ID del formulario [Embed] desde la etiqueta del formulario en el HTML.
Si terminas eliminando la acción de envío del "Formulario Integrado" y reemplazándola con JavaScript personalizado, esto hará que el disparador incorporado de GTM no funcione con el formulario.
Ahí es donde necesitarás agregar una llamada de JavaScript para notificar a la capa de datos de GTM que un evento ha tenido lugar. Este enfoque es "directo" de todos modos, ya que solo necesita hacerse una vez, por lo que cualquier evento futuro que quieras agregar se puede hacer fácilmente en GTM mismo. El JavaScript se verá algo así:
dataLayer.push({'event' : '"formularioEnviado"', 'formName' : ''WebsiteAudit''});
Para obtener instrucciones paso a paso sobre cómo implementar ambos métodos en GTM, consulte la guía de Click Insight.
3. Personalizar los estilos del campo de formulario o del botón de envío
Elementos de formulario "redondeados"
Este ejemplo de la agencia digital canadiense Reach First es un gran ejemplo de cómo unas pocas líneas de CSS pueden ser utilizadas para modificar la "Audit Tool" para que coincida con el aspecto y la sensación del sitio web. En este caso, utilizan redondeo en todos los demás campos de entrada y botones a lo largo del sitio:
Aquí podemos ver que se utiliza el atributo "border-radius: 50px;" para lograr el efecto de redondeo en el campo de entrada de texto de la [Herramienta] de Auditoría. Observe que el atributo de relleno del lado derecho está configurado a 160px para proporcionar un relleno suficiente entre el área de entrada y el botón "[Check]". Esto evita que el texto ingresado se superponga al botón.
Para el botón en sí, solo se han establecido los atributos "border-top-right-radius" y "border-bottom-right-radius" a 50px para lograr el efecto cohesivo entre el campo de entrada y el botón:
Dimensionamiento y Posicionamiento del Elemento de "Formulario"
La consultoría australiana de marketing digital, Stepps ha integrado muy bien la "Herramienta de Auditoría" en una página de destino separada "Website Analyser" utilizando anchuras variables en los 3 campos del formulario y moviendo el botón hacia abajo a su propia fila de ancho completo:
Los anchos de los elementos del formulario son relativos según el contenedor div en el que están contenidos. Para lograr esto, el ancho se establece como un porcentaje en el CSS. Para el campo "Introduce tu sitio web", podemos ver que este campo tiene un ancho del 25%:
Mientras que los campos de "Nombre" y "Email" son más pequeños con un ancho de 15% cada uno:
Finalmente, el botón "Generar mi informe" tiene un ancho 1px más ancho que la suma de los campos de entrada: 25 + 15 + 15 = 56%
Estos ejemplos muestran lo flexible y fácil que es actualizar el CSS de la "Audit Tool" para que coincida con la apariencia del sitio web de su agencia. Si encuentra algún problema al instalar la "Audit Tool", consulte también nuestra guía completa!
