Cómo añadir y editar campos de formulario

Los formularios son un elemento fundamental para generar leads en cualquier landing. La forma en la que diseñes tus formularios tiene un enorme impacto en tu tasa de conversión y dicta la información que te llegará una vez que tus leads se conviertan.

Los formularios también tienen usos más avanzados como campos pre-rellenados, el seguimiento de códigos UTM y formularios de varios pasos.

Este artículo te explica cómo utilizarlos.

Solo se permite un formulario por landing page.

Este artículo te ayudará a:

  • Añadir y editar formularios básicos,
  • Pasar parámetros de URL a través de un formulario,
  • Configurar formularios pre-rellenados para el seguimiento UTM,
  • Configurar formularios de varios pasos.


Añadir y editar campos de formulario

  1. Haz doble clic en los campos de formulario para editar un formulario existente,

O

  1. Arrastra y suelta el Widget de formulario desde el Widget Panel (Panel de widgets) a tu izquierda para agregar un nuevo formulario.  
  2. Selecciona los campos que te interesen de los campos personalizados y predefinidos a la izquierda del Form Designer (Diseñador de formularios).
  3. Haz clic en los campos a editar:
    • Te aparecerán las opciones específicas de campo a la derecha del diseñador de formularios.
    • Mueve los campos hacia arriba y hacia abajo utilizando los botones direccionales debajo del campo en el Form Designer (Diseñador de formularios)
    • Elimina los campos que no necesites con el botón rojo debajo del campo en el Form Designer (Diseñador de formularios).
  4. Haz clic en Done (Hecho) cuando estés satisfecho con el formulario.

El nombre y el email se establecen como campos obligatorios y el campo de email comprobará automáticamente las direcciones de email para garantizar que el usuario introduzca una dirección real. Si agregas un campo de número de teléfono, puedes configurarlo para que se valide por regiones.

Nombres de campos personalizados

También existe la opción de introducir diferentes valores para 'Field Name and ID' (Nombre de campo e ID) y 'Form Label' (Etiqueta de formulario). Esto te resultará útil si vas a descargar un CSV de tus clientes potenciales y quieres que el nombre del valor sea más simple o más corto. Esto también permite que varios campos tengan la misma etiqueta, por eso puedes especificar caracteres en mayúsculas para sus etiquetas de campo de formulario.

De forma predeterminada, el campo Field Name and ID (Nombre de campo e ID) será el mismo que tu Field Label (Etiqueta de campo). Si deseas personalizarla, simplemente desactiva la opción Auto-generate from Field Label (Generar automáticamente desde etiqueta de campo) en la sección Name and ID (Nombre e ID).

También puedes agregar campos de texto nombrados por ti mismo, casillas de verificación, botones de opción, menús desplegables personalizados y pre-hechos, o campos ocultos. Esto te puede resultar útil con algunas de nuestras características avanzadas e integraciones.

Ten en cuenta que los campos ocultos sólo tendrán una opción de entrada para Name and ID (Nombre e ID), no para Field Label (Etiqueta de campo).

Cuando cambies entre campos, la opción Auto-generate from Field Label (Generar automáticamente desde etiqueta de campo) sólo se volverá a comprobar si el valor de Name and ID (Nombre e ID) coincide exactamente con la versión generada automáticamente de la etiqueta de campo.


Propiedades del formulario

Haz clic en los campos de formulario y verás las Form Properties (Propiedades del formulario) a la derecha, en el Page Builder.

Geometry (Geometría)

Ajusta manualmente el tamaño y la posición.

Form Confirmation (Confirmación del formulario)

Más información en la próxima sección.

Label Attributes (Atributos de la etiqueta)

Ajusta la alineación, tipo, color y tamaño de la fuente.

Field Attributes (Atributos de campo)

Ajusta la altura del campo, el espaciado entre campos, y el tamaño de la fuente interna. También puedes seleccionar el borde del campo, incluyendo el radio de la esquina, el fondo y los colores del texto, así como activar o desactivar una sombra interna.

Checkbox & Radio Button Attributes (Atributos del botón de selección y de la casilla de verificación)

Si has agregado checkboxes o radio buttons, puedes ajustar el tipo, el color y el tamaño de la fuente.


Cómo introducir un formulario en una Lightbox

Para añadir un formulario en tu lightbox:

  1. Si aún no lo has hecho, agrega un nuevo botón de lightbox arrastrando y soltando el widget desde el panel de la izquierda. 
  2. Haz clic en Lightbox en la esquina superior izquierda del Page Builder (Editor de páginas) y arrastra y suelta el botón Form (Formulario) del panel de la izquierda en el campo de contenido de la lightbox.

    Recuerda que sólo se permite un formulario por landing, por lo que si tu botón de formulario está en gris, tendrás que eliminar el formulario existente antes de agregar uno nuevo.

  3. Diseña tu formulario y haz clic en Done (Hecho) cuando hayas terminado.

    Ahora puedes modificar el formulario en tu lightbox de la misma forma que lo harías en cualquier otra página del Page Builder (Editor de páginas).

 


Pasar parámetros de URL a través de un formulario

Cuando se utiliza un formulario (en lugar de un botón), los parámetros de URL no se pueden pasar automáticamente a otra página (o la confirmación del formulario).

Los formularios de Unbounce transmiten los datos del formulario, pero no los parámetros de la URL. Para transmitir los parámetros de la URL entrantes, deberás configurar campos ocultos para recibir los parámetros entrantes:

  1. Agrega campo(s) oculto(s) a tu formulario haciendo doble clic en tu formulario existente y haciendo clic en el botón Hidden Field (Campo Oculto) a la izquierda del Form Designer (Diseñador de Formularios).
  2. Nombra los campos igual que los parámetros entrantes:
  3. Si envías tráfico a otra página (no a Form Configuration o Configuración del formulario), marca Append form data to URL (Agregar datos del formulario al URL) en el Properties Pane (Panel de Propiedades) de la derecha:

Todos los datos se transmiten al enviar el formulario, por lo que tus parámetros entrantes de URL se transmitirán también hacia el siguiente paso (da igual si se trata de un formulario de confirmación o de otra página).


Pre-rellenado de formularios con parámetros URL

Con Unbounce, puedes pre-rellenar fácilmente los campos de formulario con parámetros URL (también conocidos como parámetros de consulta).

¿Qué es un parámetro URL?

Entre otras cosas, un parámetro URL es una forma de pasar datos en un enlace a una página web. Puedes utilizar parámetros URL para rastrear elementos en programas como Google Analytics o, en este caso, para rellenar previamente tu formulario.

Un parámetro URL tiene dos partes. Un nombre de variable y un valor. En el ejemplo siguiente, "cupón" es el nombre de la variable y "50_2013" es el valor:

Http://unbouncepages.com/puravida?coupon=50_2013

Supongamos que quieres pre-rellenar el código de un cupón en tu formulario:

Utilizando el ejemplo anterior, lo único que tendrás que hacer es añadir un campo "cupón" a tu formulario y este se pre-rellenará automáticamente con el parámetro de consulta correspondiente. Fíjate en este ejemplo:

Esta herramienta se suele utilizar con UTM Tracking de Google ...

Google tiene una popular herramienta de creación de URLs diseñada para etiquetar tus enlaces con datos útiles (esto también ocurre automáticamente si tus cuentas de Google AdWords y Google Analytics están enlazadas). En estos casos, lo que sucede es que algunos parámetros se “pegan” al final de la URL de tu landing en Unbounce, apareciendo así:

Http://try.myproduct.com/landing-page?utm_source=google&utm_medium=ppc

Para capturar estos datos en tu formulario, no tienes más que crear un campo oculto para cada etiqueta y darles el mismo nombre que la etiqueta. Por ejemplo, para este caso, se crearían los siguientes campos ocultos:


Formularios de varios pasos

Unbounce te permite configurar formularios de pasos múltiples fácilmente.

Cómo configurarlos

  1. Vamos a crear una nueva página, a la que llamaremos Multi-step Form #1
  2. Agrega un formulario a la página que recoja información básica, en este caso vas a pedir Nombre y Email (First name/Email):
  3. Configura la confirmación como Go to another web page (Ir a otra página web) en el Properties Panel (Panel de propiedades) de la derecha.
  4. Añade el URL de la siguiente página que vas a construir. En este caso utiliza el URL ""http://promo.site.com/step2 ". 
  5. Marca Append form data to URL (Agregar datos del formulario al URL): 

  6. Publica la página.
  7. Ahora crea la segunda página. Es probable que te quieras duplicar esta página para que tu diseño sea el mismo. La llamaremos Multi-step Form #2, y nos aseguraremos de:
  8. Darle el URL que usamos en el paso #3 (en este caso: http://promo.site.com/step2).
  9. Editar el formulario en la segunda página de manera que puedas solicitar cualquier otra información que necesites:
  10. Agregar campos ocultos para la información que solicitaste en el primer formulario, haciendo coincidir los nombres de los campos. En este caso, "Nombre" y "Email". Deja en blanco los valores predeterminados.
  11. Publica tu página.

Ahora, cuando el usuario rellene el primer formulario, será redirigido al segundo formulario y, al rellenarlo, tendrás los datos de ambos formularios en la información principal. Si quieres tener más de dos pasos, simplemente repite #7- #10 para cada página. Ten en cuenta que dependiendo de la cantidad de datos que tus campos recojan, este método dejará de funcionar al cabo de un tiempo, ya que las URL tienen una longitud máxima.

También puedes pasar parámetros de URL entrantes a través de tu formulario con campos ocultos como te mostraremos a continuación en este mismo artículo.

¿Cómo funciona esto?

Las páginas de Unbounce completan automáticamente los campos de formulario que tengan el mismo nombre que los parámetros GET, de modo que, puesto que añadimos campos ocultos denominados "nombre " y "email", éstos se rellenarán automáticamente con los valores que forman la URL.

¿Qué tiene de bueno esto?

Aparte de permitirte extender un formulario en varios pasos para no asustar al visitante que llega a la página por primera vez, también tendrás la ventaja de medir cada paso a lo largo del camino. Puedes probar diferentes variantes de cada página y puedes también configurar integraciones para cada paso. Es posible que quieras configurar tu integración con MailChimp/AWeber /Constant Contact en el último paso, o también puedes dejar una notificación por email en el primer paso si quieres que se te notifique acerca de los usuarios que puede que no lleguen al final del camino.

Sabemos que este proceso es más complicado de lo que debería ser y esperamos que pronto se convierta en una funcionalidad propia de Unbounce. Hasta entonces, sin embargo, ¡nos encantaría conocer a alguien que haya conseguido configurarlo con éxito!


Cómo agregar un selector de fechas de calendario a tu formulario

Esta función requiere JavaScript personalizado. Si no estás familiarizado con Javascript, ponte en contacto con uno de nuestros asesores técnicos para encontrar una solución alternativa.

Si tu formulario de generación de leads requiere una fecha o un conjunto de fechas, tal vez te interese un widget "selector de fechas" para facilitar la interacción. Si bien esta es una característica que un día incorporaremos al generador de formularios básicos en Unbounce, puedes utilizar los siguientes pasos para que ponerla en funcionamiento hoy mismo.

Paso 1: Añade jQuery UI

Abre el panel "Javascripts" (haz clic en el botón Javascripts en la parte inferior izquierda del editor) y pega lo siguiente:

<script src="//a.unbounce.com/s/javascripts/jquery/jquery-ui.1.8.16.min.js"></script>

Llama a este código "jQuery UI" y configura la ubicación en Head (Encabezado). Tendría que parecerse a lo que ves en esta imagen:

Paso 2a: Agrega la hoja de estilo jQuery UI

A continuación, pasa a la pantalla Stylesheets (Hojas de estilo) (haz clic en el botón Stylesheets en la parte inferior izquierda del editor) y pega lo siguiente:

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" />

Llama esta hoja "jQuery UI" y pincha en “Save Code” (Guardar código).

Paso 2b (opcional)

Personaliza la apariencia del selector de fechas

Existen muchos temas diferentes disponibles para jQuery UI. El paso anterior utiliza el tema "smoothness". Si quieres utilizar un tema diferente, pásate por aquí y descubre las diferentes opciones. Cuando encuentres la que más te guste, toma nota del URL que te proporcionarán.

... y reemplaza la etiqueta <link> del paso 2 (a) por una nueva etiqueta como esta:

<link rel="stylesheet" type="text/css" href="THE_NEW_URL_YOU_GRABBED_FOR_YOUR_SPECIFIC_THEME" />

Ahora mismo solo debería haber una hoja de estilo de jQuery UI en tu página. 

Paso 3: Agrega el campo de fecha a tu formulario

Es posible que ya tengas esto en tu formulario, pero lo más importante es averiguar cómo se llama el campo. Aquí te interesa usar sólo un Single-line Text Field (Campo de texto de una sola línea) (Single-Line Text Field):

A este ejemplo lo llamamos Start date (Fecha de inicio). Verás que justo debajo de la caja Field Label (Etiqueta del campo) está el texto "start_date". Este es el ID de tu campo, y debes recordarlo para el siguiente paso

Paso 4: Agrega el código JavaScript del ‘date picker’ o selector de fechas

Abre de nuevo el diálogo de Scripts. Agrega un nuevo script, al que llamarás Date Picker (Selector de fechas) y configura la ubicación en Head (Encabezado). Pega el código siguiente y reemplaza "start_date" por el campo ID del formulario que anotaste en el último paso:

<script>
  $(function() {
    $( "#start_date" ).datepicker();
  });
</script> 

Ahora puedes guardar y previsualizar tu página. Al hacer clic en el campo de entrada Start Date (Fecha de inicio) debería aparecerte algo como esto (aunque dependerá del tema que hayas elegido):

Al seleccionar una fecha, se rellenará el campo del formulario de la siguiente manera:

 

No olvides estudiar todas las opciones que tienes a tu disposición para usar este componente si quieres personalizarlo. Tienes muchísimas opciones, incluyendo cambiar el formato de la cadena de fecha que rellena el campo de tu formulario.

¡Cuéntanos cómo te funcionó!


Cómo añadir texto provisional a los campos de formulario

Algunos miembros de nuestra comunidad nos han preguntado cómo agregar texto de provisional o Placeholder a los campos del formulario. Este es un valor predeterminado en gris que desaparece tan pronto como el visitante comience a escribir en el campo.

Nos encantaría tener esta característica incorporada en Unbounce pronto, pero mientras tanto, he aquí una solución que utiliza un poco de JavaScript:

Añade el Script

  1. Haz clic en la pestaña JavaScripts en la parte inferior izquierda del Page Builder (Generador de páginas).
  2. Pega el siguiente script:

Customize the field names and placeholder values

En el fragmento de arriba, verás una lista de campos en la parte superior (first_name, last_name and email) con su texto placeholder asociado.

Tendrás que cambiarlos para que coincidan con los campos de la página a los que quieras asignar un placeholder. Puedes encontrar estos nombres de campo en el generador de formularios, tal y como se muestra en la siguiente captura de pantalla:


Cómo modificar mensajes de error de validación de formulario

Esta función requiere JavaScript personalizado. Si no estás familiarizado con Javascript, ponte en contacto con uno de nuestros asesores técnicos para encontrar una solución alternativa.

Cuando un visitante rellena el formulario en tu página pero lo que ha introducido no es válido, le aparecerán algunos errores que, por defecto, se verán así:

Si quieres, puedes personalizar estos errores de un par de maneras distintas:

Personaliza el texto

Puedes modificar el texto agregando un fragmento de Javascript a tu landing. Aquí está el script:

Para añadirlo a tu página, haz clic en Javascripts en la parte inferior izquierda del Page Builder (Generador de Páginas) y pega el script. A continuación, modifica el script inferior para agregar tus mensajes personalizados.

Por ejemplo, si tienes un campo con el ID de email_address, puedes ajustar tus mensajes de error con una línea como esta:

errors.changeField('email_address', 'Please enter an email address', 'This email address is invalid');

Aquí tienes el resultado:

Personaliza el estilo visual

Si estás familiarizado con CSS, también puedes cambiar el estilo del mensaje de error. Pega el Script a continuación en la sección Stylesheets de tu página y ajústalo para darle el estilo que tú quieras.


Glosario

Campos de formulario: se utiliza para recopilar información del usuario para generar leads

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 10 de 13
Tecnología de Zendesk