Los formularios de inscripción son muy comunes al crear nuevas aplicaciones web o redes sociales. La participación de los usuarios puede realmente aumentar su autoconfianza sobre un proyecto cuando se trata de lanzar un nuevo sitio web. Pero, ¿qué puede hacer para ayudar a mejorar la experiencia de registro y, con suerte, obtener más usuarios interesados?
En este tutorial quiero demostrar cómo podemos crear un formulario de registro guiado, ofreciendo consejos a los usuarios a medida que completan cada campo. He incluido algunos de mis propios jQuery personalizados junto con un complemento llamado Progression.js. Esta es una herramienta poderosa que ofrece una información sobre herramientas paso a paso que utiliza sugerencias para dirigir a los usuarios en el camino. Siéntase libre de descargar una copia de mi código fuente y ver la demostración de muestra en vivo a continuación.
Demo en vivo - Descargar código fuente
Empezando
Primero necesitamos descargar una copia del complemento Progression.js e incluir esto dentro del encabezado del sitio web. Progression utiliza un solo archivo JS con una dependencia de la biblioteca jQuery, junto con sus propios estilos CSS personalizados. Obtenga una copia del repositorio oficial de Github que también incluye su propia configuración de mini demo.
Dentro del cuerpo de la página he creado un nuevo formulario con el ID #registro. Este es el elemento de página que adjuntamos al uso de la función Progresión, junto con una serie de parámetros internos. Es interesante observar que la información sobre herramientas aparecerá a lo largo del ancho completo del formulario, no necesariamente de la longitud de los campos de entrada. Por lo tanto, debes asegurarte de que todo esté alineado correctamente con CSS en el lado en el que tengas la información sobre herramientas (izquierda o derecha).
Cada uno de los campos de entrada tiene un atributo de datos HTML5 adicional adjunto que incluye una cadena de texto para la información sobre herramientas. Esto está etiquetado con ayudante de datos y es recogido automáticamente por el plugin. He incluido un tabindex atributo en cada campo que también ayuda a los usuarios móviles a pasar rápidamente de un campo a otro.
Aunque esta forma es algo básica, ilustra claramente los patrones que puede usar para incorporar el complemento. También incluí algunas de mis propias comprobaciones de lógica jQuery más pequeñas que determinan si el nombre de usuario es lo suficientemente largo, si la dirección de correo electrónico es válida y si ambos campos de contraseña coinciden. Estos códigos no están relacionados con el complemento, pero pueden ser útiles para los desarrolladores que crean tipos de formularios web similares.
Diseño de página con CSS
Otra pieza importante de mi código se puede encontrar en el estilos.css hoja de estilo. Configuro los restablecimientos de la página predeterminada junto con la envoltura del núcleo, pero recuerde que el formulario también debe tener un ancho exacto igual a la longitud de los campos de entrada.
los #registro el elemento está bloqueado a un ancho completo de 512 px junto con los campos internos de etiqueta / entrada con un ancho de 160 px + 340 px (total de 500). La etiqueta y los campos de entrada dejan espacio adicional para el relleno, de modo que la información sobre herramientas no está justo encima de nada. También el .basetxt la clase se aplica a cada entrada que utiliza transiciones CSS3 para colorear el borde y el efecto de sombra del cuadro.
Otra pieza importante a esto se relaciona con el mensaje de error p.errmsg. Puede encontrarlos debajo de tres de los cuatro campos que pertenecen a las verificaciones de validación de jQuery. Los mensajes están ocultos por defecto usando pantalla: ninguna y luego se muestra utilizando el método .slideDown () de jQuery's.
Estos últimos bloques de código definen los estilos de los botones de envío, junto con algunos diseños personalizados para la información sobre herramientas. Solo puede editar el archivo CSS del complemento principal, pero esto hace que sea más difícil de actualizar en el futuro. También puede ser difícil saber exactamente lo que editó y revertir los cambios sería casi imposible. Si desea sobrescribir algunos de los estilos de complementos, simplemente seleccione progression.min.css y aprende a qué clases necesitarás apuntar.
jQuery Progression & Validation
En la parte inferior de la página índice antes del cierre. etiqueta he abierto una nueva sección de JavaScript. Esto incluye la inicialización de Progression.js y algunas de mis propias comprobaciones de validación. Es algo complicado, pero lo dividiré en partes más pequeñas.
Nos dirigimos al formulario de registro que llamamos .progresión() con una serie de parámetros internos. Creo que la mayoría (si no todos) de estos parámetros pueden hablar por sí mismos y la documentación del complemento también puede explicar mucho. showProgressBar es uno que desactivé en este ejemplo porque siento que no funciona bien con solo 4 entradas. Pero proporciona una sensación de satisfacción del usuario cuando se requiere una gran cantidad de campos, ya que los usuarios pueden verse realmente avanzando hacia la finalización.
también tooltipPosition y tooltipWidth Puede valer la pena personalizarlos y ver cómo encajan mejor en sus formularios. Las otras configuraciones, como los colores y los tamaños de fuente, son realmente fáciles de manipular y encajar en cualquier diseño. También tenga en cuenta que también he encadenado un controlador de eventos .submit () a este formulario. Entonces, cuando se envía el formulario, llamamos a .preventDefault () en el evento de envío para evitar que suceda. Esto se debe a que mi formulario no tiene un atributo de acción real, pero para un formulario de trabajo activo, debe eliminar este controlador de eventos encadenado por completo.
Cada uno de los 3 bloques de validación finales se verificará cada vez que el usuario borre un campo de entrada. Esta primera parte del código se ejecuta después de que el usuario enfoca y luego borra el campo de nombre de usuario. Si la longitud del nombre de usuario es inferior a 6 caracteres, mostramos el mensaje de error debajo. De lo contrario, si el nombre de usuario tiene 6 caracteres o más, podemos ocultar el mensaje de error, asumiendo que ya se muestra.
Estas dos últimas verificaciones de validación se basan en el mismo tipo de lógica. Primero está el campo de entrada de correo electrónico que usa una cadena de expresiones regulares para verificar una dirección de correo electrónico válida. Encontré esta solución en una pregunta relacionada de desbordamiento de pila que proporciona una sintaxis de correo electrónico simple pero efectiva. Este ejemplo debería ser más que suficiente para manejar cualquier dirección de correo electrónico común.
Al observar la validación de la contraseña, notará que esto no ocurre hasta que el usuario borre el campo de contraseña secundaria. Esto es cuando el usuario debe volver a escribir su contraseña y verificará ambos valores para asegurarse de que sean iguales y no completamente vacío / en blanco. Lo tengo comprobando para asegurarme de que la contraseña tenga al menos 1 carácter, pero podría hacer que las restricciones sean más severas según sea necesario.
Hay algunos complementos de jQuery que realmente ayudan a ejecutar estos tipos de verificaciones de validación. Pero si se siente cómodo con las secuencias de comandos, no se pierde nada con escribir sus propias reglas desde cero.
Demo en vivo - Descargar código fuente
Clausura
Los desarrolladores de jQuery han hecho una serie de complementos para ayudar con el avance de formularios.Los formularios de registro son a menudo un desafío difícil, porque requieren una gran cantidad de información. La aplicación de esta información sobre herramientas de progresión puede animar realmente a los usuarios a completar y finalizar el proceso de registro rápidamente sin dudar. Como siempre, mi código de tutorial es gratuito para descargar e implementar dentro de sus propios proyectos web. Además, si tiene alguna pregunta o sugerencia, no dude en compartir con nosotros en el área de discusión a continuación.