Es el punto clave de la conversión. El objetivo es que el visitante nos deje sus datos.
Revisa siempre que el formulario sea fácil de entender y presente las instrucciones de forma clara y concisa.
Insertar un formulario a tu landing
1. Arrastra el icono del elemento "Formulario" a tu área de trabajo.
2. Se abrirá una ventana con una barra superior con las distintas opciones de campos del Formulario, tales como: input, textarea, check, radiobuttons, select y elementos hidden.
A continuación te explicamos cómo usarlo y para qué sirve cada uno de estos elementos de formulario.
Todos los campos del formulario tienen los siguientes elementos:
- Id del elemento: es el identificador del elemento que sirve principalmente si vamos a aplicar alguna clase o estilo a este campo
- Etiqueta: es el nombre del campo
- Ocultar etiqueta: sirve para ocultar el nombre del campo
- Campo obligatorio: si se activa, el campo deberá rellenarse antes de enviar el formulario.
- Mensaje de error: advertencia que aparecerá en caso de que el campo sea obligatorio y no se haya rellenado.
- Nombre de la integración: es el nombre que aparecerá al realizar la integración con MDirector (ver más sobre integración de datos: https://mdtr.io/1mV9a)
- Variable: este campo permite personalizar tu landing page utilizando parámetros en la URL. Esto significa que, cuando un contacto accede a la página desde un enlace específico, el campo estará prerellenado automáticamente con la información correspondiente.
Añadir campos de texto en el formulario (input)
Los campos de texto o input es un elemento interactivo donde los usuarios pueden ingresar información. Se utilizan principalmente para que los usuarios escriban su nombre, apellido, etc.
Para añadirlo a tu formulario, haz clic en el icono campo de texto ("Input")
Aparecerán las opciones del elemento campo de texto o input.
A la izquierda verás la ventana de 'Configuración', que son los elementos que podrás personalizar según tus preferencias.
- En el apartado "Etiqueta" podrás añadir el nombre que quieras darle al campo de tu formulario, por ejemplo "Nombre".
Si quieres que el campo sea obligatorio, activa el check de "Campo obligatorio". Verás que automáticamente aparece un asterisco al lado de la etiqueta.
Con los selectores de las flechas podrás mover arriba y abajo el campo y situarlo en el orden que quieras en tu formulario.
Si necesitas borrar el campo, haz clic en el icono "Borrar" .
Si quieres que una/s palabra/s aparezca/n dentro de un campo input añade el texto que quieres dentro de la opción "Texto por defecto". Se puede utilizar como los labels, pero dentro del propio recuadro de texto.
Si en el query-string de la landing deseas indicar un parámetro con un valor que deba tomar un campo input, indica el nombre de ese parámetro en "Variable". Por ejemplo, http://genlandings-backend.mdirector.com/54ae123456789?v1=source-google
Añadir campos de área de texto en el formulario ( textarea )
Un "textarea" es una caja de texto para que los usuarios puedan escribir texto más extenso o detallado que el que permite un campo de texto estándar (input). Es ideal para recopilar información como comentarios, descripciones, mensajes o cualquier dato que requiera varias líneas de texto.
Puedes editar el alto de la caja de texto desde el campo 'Tamaño':
Las listas de opciones (check y radio)
Son una herramienta útil en los formularios cuando queremos ofrecer al usuario la posibilidad de elegir entre varias alternativas disponibles.
Existen dos tipos:
Checkbox
Los checkbox o casillas de verificación permiten seleccionar una o varias opciones de una lista. Cada casilla actúa de forma independiente, lo que significa que el usuario puede marcar tantas como desee. Es ideal para recopilar preferencias múltiples o datos que no sean excluyentes.
Para añadir las opciones que desees, escribe el nombre en la opción Elemento del grupo.
En cada elemento de grupo tienes 3 opciones:
- Editar valor '</>': que sirve para las integraciones con listas de MDirector (ver más sobre integración de datos: https://mdtr.io/1mV9a)
- Icono '+': que sirve para añadir más opciones
- Icono papelera: que sirve para eliminar el elemento
Radio
Los botones de opción o radiobutton están diseñados para seleccionar solo una opción dentro de un grupo. Cuando se selecciona una opción, las demás se desmarcan automáticamente. Es útil para preguntas donde solo una respuesta es válida.
Para añadir las opciones que desees escribe el nombre en Elementos del grupo.
Añadir campos de selección (Select)
Los campos de selección permiten al usuario seleccionar una opción de una lista predefinida. Al hacer clic en el campo, se despliega un menú con todas las opciones disponibles, pero inicialmente ocupa poco espacio, lo que lo hace ideal para formularios compactos.
Desde Elementos del grupo podrás añadir las opciones que formaran parte de la lista.
La opción "Primer valor no válido" significa que este valor es solo informativo para el usuario. En este caso queremos mostrar un texto aclaratorio del tipo "Selecciona una opción" el cual indica que el elemento aparecerá seleccionado.
En cada elemento de grupo tienes 3 opciones:
- Editar valor '</>': es el dato que pasará a la base de datos o listado donde se sincroniza (ver más sobre integración de datos: https://mdtr.io/1mV9a)
- Icono '+': que sirve para añadir más opciones
- Icono papelera: que sirve para eliminar el elemento
En caso de que se trate de una lista muy larga, también tienes la posibilidad de cargar una lista desde Excel a modo de desplegable (por ejemplo en el caso de una lista Provincias).
Si necesitas cargar valores de forma dinámica consulta la guía en el siguiente enlace: https://mdtr.io/FtV5c
Añadir campos ocultos (hidden/oculto)
Los campos ocultos o hidden se emplean para añadir información oculta en el formulario. Este tipo de control no visualiza nada dentro del formulario, el usuario no lo verá, pero nos llega este dato.
Su utilidad se presenta cuando desde el servidor se genera una página dinámica por ejemplo mediante PHP y se almacena en un campo oculto un valor que se rescatará al subir el formulario al servidor.
Este campo tiene las propiedades:
- Valor: que será el valor por defecto.
- Variable: este campo permite personalizar tu landing page utilizando parámetros en la URL. Esto significa que, cuando un contacto accede a la página desde un enlace específico, el campo estará prerellenado automáticamente con la información correspondiente.
Añadir campo para aceptación de condiciones (privacidad)
El campo privacidad se utiliza para cumplir con la ley GDPR (Mayo 2018) de manera que un contacto al suscribirse acepte términos y condiciones, privacidad, e indique cuáles de las comunicaciones desea recibir.
La etiqueta indica el título de este elemento y la información es el texto explicativo de la empresa.
Utilizando el botón "Cargar fichero HTML" se puede subir un archivo con las condiciones y/o política de privacidad.
Al hacer clic, podrás seleccionar el archivo en formato HTML que contiene tus políticas de privacidad. Una vez seleccionado, el archivo se subirá a nuestro sistema y se mostrará una ventana con un enlace generado automáticamente.
Deberás copiar ese enlace y pegarlo en donde quieras que estén las políticas de privacidad. Por ejemplo, si quieres que esté en el texto 'Términos y condiciones' del formulario debe tener la siguiente estructura:
[términos y condiciones](/resources/42956/terms_96813_PruebaPlticasdeprivacidad.html)
Otra opción es incluir la URL con los términos y condiciones en uno de los elementos tipo checkbox. Para ello, escribe el texto que servirá como enlace a las políticas de privacidad entre corchetes (este será el texto visible) y coloca la URL correspondiente entre paréntesis. A continuación, se muestra un ejemplo de cómo estructurarlo:
[Política de privacidad](https://www.mdirector.com/politica-de-privacidad/)
Añadir campos predefinidos
Los campos predefinidos sirven para definir de ante mano valores por defecto. Pueden ser campos ya rellenados como por ejemplo los "Términos y condiciones" o bien campos en los que ofreces una serie de variables ya predefinidas como los días, meses y años, lo cual evita que se cometan errores de formato.
Para redirigir a la página de "Términos y condiciones" del servicio prestado, simplemente tendrás que escribir el texto que deseas mostrar, con el texto a enlazar entre corchetes y la URL con la que se enlaza entre paréntesis. Por ejemplo:
Acepto los [términos y condiciones](http://www.mdirector.com/terminos-y-condiciones/)
También tienes la posibilidad de subir tus "Términos y Condiciones" en un documento HTML. Si sustituyes el fichero HTML por uno nuevo, tras haber guardado los cambios, no olvides actualizar la página para refrescar la caché y poder visualizar el nuevo fichero subido.
Además, podrás añadir con datos pre-rellenados un teléfono, un e-mail, así como una fecha. Mediante la opción "Facebook Login", se dará opción al usuario a registrarse con sus datos de Facebook.
Añadir Google reCaptcha
reCAPTCHA es un servicio gratuito diseñado para proteger su sitio web del spam y los registros fraudulentos. Utiliza un avanzado motor de análisis de riesgos y CAPTCHA adaptativos para impedir que el software automatizado realice acciones en su sitio, mientras asegura que los usuarios legítimos puedan interactuar sin dificultades.
Para añadirlo, debes editar el formulario de tu landing y desde la opción campos predefinidos, que puedes localizar en los tres puntos del menú del editor del formulario , añadir este servicio a tu landing.
Botón de envío de formulario
Los formularios de landings requieren de un botón para enviar al servidor los datos introducidos por el usuario. Siempre que añadas un formulario se añade un botón, que podrás editar para darle el estilo que quieras.
Editar botón
Accede a la configuración del formulario
En la pestaña "Botón" puedes editar tanto la fuente como el tamaño del botón. En el apartado "Fuente", tienes la opción de configurar la tipografía, el texto del botón, el tamaño de la fuente y su grosor.
Desde el apartado "Geometría", puedes ajustar el tamaño del botón y su alineación (izquierda, derecha o centrado). Si seleccionas la opción "Libre", el botón puede posicionarse en cualquier lugar de la landing page.
Propiedades del formulario
Para editar las propiedades del formulario debes seleccionar el formulario e ir al ícono de 'Configuración' . Desde ahí podrás editar el tamaño, la posición, la separación del formulario con respecto a otros elementos, la clase, el fondo, el borde. También, podrás personalizar el texto, el color, la posición de las etiquetas, inputs y radios.
Para acceder a contenido audiovisual sobre Landing Optimizer, haz clic en el link: https://mdtr.io/9o4n8
Comentarios