Seguir

Elementos. Formulario

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.

form.PNG

2. Se abre la ventana con las opciones del elemento "Formulario".

Aquí podrás añadir los campos del formulario en sus diversas formas: input, textarea, check, radiobuttons, select y elementos hidden. Si deseas primero editar los estilos, puedes cerrar esta ventana y editar los estilos mediante el botón "Editar".

A continuación te explicamos como y para que sirve cada uno de estos elementos de formulario.

form.PNG

Todos los campos del formulario tienen 3 parámetros:

- Ocultar etiqueta: no se mostrará la etiqueta del campo junto a él.

- 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.

Añadir campos de texto en el formulario (input)

1. Haz clic en el icono campo de texto ("Input")

Aparecen las opciones del elemento campo de texto o input.

input.PNG

A la izquierda verás una serie de opciones "Configuración".

Los campos de texto o input de un formulario tiene sus propias propiedades. 

  • Etiqueta (label): es el título o leyenda de cada uno de los campos.
  • Requerido u obligatorio: un usuario no podrá enviar el formulario si deja un campo obligatorio vacío.

- En el apartado "Etiqueta" podrás añadir el nombre que quieras darle al campo de tu formulario, por ejemplo "Nombre".

nombre.png

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.

campo.png

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.

defecto.png

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 texto en el formulario (textarea)

Un "textarea" es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.

textarea.PNG

Dale el alto a tu textarea insertando el valor que quieras:

Las listas de opciones (check y radio)

La listas de opciones son de gran ayuda para los formularios en los que queremos dar al usuario a elegir entre diferentes opciones.

Tenemos para esto los siguientes elementos:

  • Check
  • Radio

Los checkboxes permiten elegir una o más opciones dentro de una lista, mientras que los radio buttons permiten elegir una sola opción entre varias.

Check

Las listas de cajas tipo check permiten al usuario seleccionar una o varias opciones.

Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.

Para añadir las opciones que desees, escribe el nombre en la opción Elemento del grupo.

Radio

Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero sólo permiten elegir una opción entre las distintas opciones relacionadas que se le presentan.

Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.

Añadir campos de selección (Select)

Los campos de selección se utilizan para insertar menús y listas desplegables.

select.PNG

"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. Este atributo no toma valores.

 

Añade en los elementos del grupo cada una de las opciones que necesites.Se pueden añadir todos los que se quieran utilizando el botón

El valor de cada elemento se le asigna con el botón

El nombre del elemento es lo que aparece en la lista de selección, mientras que el valor es el dato que pasará a la base de datos o listado donde se sincroniza.

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 esta guía.

Añadir campos ocultos (hidden/oculto)

oculto.PNG

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: si en el query-string de la landing deseas indicar un parámetro con un valor que deba tomar un campo oculto, indica el nombre de ese parámetro en "Variable". 

Añadir campo  para aceptación de condiciones (privacidad)

El campo privacidad se utiliza para cumplir con la nueva ley GDPR (Mayo 2018) de manera que un contacto al suscribirse acepte términos y condiciones, privacidad, e indique cuales de las comunicaciones desea recibir.

privacidad.png

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 subirlo, MDirector muestra un mensaje con una ventana emergente donde se puede copiar y pegar todo el enlace:

terms_html2.png

Haciendo clic en esta ventana se copia el enlace de esta forma:

[terms.html](/resources/249/terms_50760_terms.html)

Donde el texto que aparece entre corchetes es el texto que se visualiza, y la url que aparece entre paréntesis es el enlace clicable. Con este formato puedes utilizarlo en cualquier parte del formulario para enlazar, por ejemplo dentro de la información o bien dentro de una de las opciones seleccionables. También se puede enlazar con un enlace externo, por ejemplo:

[Política de privacidad](https://www.mdirector.com/politica-de-privacidad/)

Posteriormente aparecen los elementos tipo checkbox que el contacto tendrá que aceptar en cada caso:

elemento-privacidad2.png

En cada elemento, el primer texto es el que se mostrará en el formulario y los 3 botones siguientes se utilizarán :

</> - Para añadir el valor que se guarda en base de datos. Por defecto el mismo que el texto que se muestra y para indicar si es una casilla que debe ser marcada obligatoriamente para completar el registro.

(+) - Para añadir otro valor más en el listado de opciones

Papelera - Para borrar dicho elemento del listado de opciones.

Añadir campos predefinidos

campos.PNG

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 por otro lado 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.

 

 

También 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 que protege su sitio web del spam y los registros fraudulentos. reCAPTCHA utiliza un avanzado motor de análisis de riesgos y CAPTCHA adaptables para evitar que el software automatizado realice acciones en su sitio. Todo ello al mismo tiempo que permite que los usuarios válidos pasen con facilidad.

Añadir este servicio a tu landing es un proceso rápido y sencillo. Bastará con tener un formulario de registro, acceder al panel de edición del mismo y seleccionar la opción “Google reCaptcha” que se encuentra en la pestaña de “Predefinidos”.

Botón de envío de formulario

La mayoría de formularios dispone 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 sección "Botón" se encuentran todas las características  susceptibles de personalizar. La "Alineación" indica en que posición del formulario debe colocarse el botón. Si se selecciona "Libre" el botón puede colocarse en cualquier lugar de la Landing page.

 

 

 

 

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 1 de 1
¿Tiene más preguntas? Enviar una solicitud

Comentarios

Tecnología de Zendesk