Algo que se hecha en falta en Elementor es la posibilidad de crear formularios de registro. En esta entrada os explicaremos cómo crear formularios de registro con Elementor y Ultimate addons for Elementor.
Os mostraremos varias formas de mostrar los formularios de registro. Desde crearlo en una página, pasando por mostrarlo en un popup y acabaremos con un botón conmutador para mostrar el registro y el login.
Índice de contenidos
Plugins que necesitaremos
Los plugins que necesitaremos para crear las diferentes formas en las que vamos a mostrar los formularios de registro son:
- Elementor: versión gratuita.
- Shortcode for Elementor: plugin para asociar plantillas o secciones a un shotcodes.
- Ultimate addons for Elementor: Plugin que añade funciones a Elementor, entre ellas 3 con las que trabajaremos en este tutorial.
Creando el formulario de registro
Lo primero que realizaremos es habilitar los widgets de Ultimate Addons for Elementor. Esto lo haremos desde ajustes/UAE
Creamos una plantilla que asociaremos a un shortcodes. Para ello vamos a shortcodes elementor y creamos uno nuevo al que le pondremos el nombre de formulario de contacto. En la columna de la derecha encontraremos el shortcodes que deberemos insertar en la página del registro (recuadro rojo de la imagen).
Seguimos y editamos con Elementor.
Buscamos el widget User registration form, lo insertamos en nuestro contenido. por defecto nos aparecerá un formulario de registro con los campos más comunes, pero el widget nos permite agregarle algunos campos adicionales como añadir nombre y apellidos, confirmar contraseña o añadir un recaptcha.
Form fields
En este apartado podremos añadir o quitar campos al formulario.
- Type: Definiremos el tipo de campo que queremos añadir al formulario
- Label: Definimos el nombre del campo.
- Placeholder: Definimos el texto que va dentro del campo.
- Required: Definimos si el campo es obligatorio de forma individual.
- Column With: Definimos qué ancho debe tener el campo. En nuestro caso al 50% del contenedor.
- Input size: Definimos el tamaño de los campos.
- Label: Definimos si queremos que se muestren el nombre de los campos de forma global.
- Required mark: Definimos si queremos que todos los campos del formulario sean obligatorios.
Register button
Opciones de personalización del botón de registro que combinaremos con los ajustes de los estilos.
- Text: Definimos el texto del botón.
- Size: Definiremos el tamaño del botón.
- Column widht: Definiremos el ancho de la columna del botón.
- Alignment: Como debe esta alineado el botón. A la izquierda, centrado, a la derecha o justificado.
- Icon: Nos da la opción de añadir un icono al botón.
General settings
Opciones de ajustes generales del formulario de registro.
- Hide form from loggetd users: Ocultar el formulario a los usuarios logueados.
- New user role: Permite definir el rol de usuario del usuario registrado.
- Login: Muestra un enlace a la página de acceso. Nos permite personalizar el texto del enlace y enlazar a página de logueo de WordPress o a una personalizada.
- Lost your password: Muestra un enlace a la página para recuperar la contraseña anterior. Como en el punto anterior nos permite personalizar el texto del enlace y enlazar a página para recuperar la contraseña de WordPress o a una personalizada.
- Ajustes de personalización de los enlaces de login y recuperar contraseña.
- Password strength check: Forzar el nivel de seguridad de la contraseña.
After register actions y email
Nos permite configurar que acciones se realizarán después del registro.
- Nos permite autologuear al usuario que se acaba de registrar, enviar un correo de registro o redireccionar a una página (recuadro rojo de la imagen)
- Nos permite enviar un correo estandar del registro del usuario o nos lo permite personalizar.
Para la personalización del corrreo de registro puedes hacer uso de estos shortcodes:
- [field=username]
- [field=email]
- [field=password]
- [field=first_name]
- [field=last_name]
Succes / Error message
- Aquí editaremos los mensajes que hacen saber si el registro se ha realizado correctamente o a habido algún error.
Una vez realizados todos los ajustes de contenido del formulario de registro trabajaremos el aspecto visual del formulario desde la sección estilo.
Ya solo nos quedará publicar y pegar el shortcode que creamos al inicio en la página donde quieras que aparezca el formulario. Puedes recuperarlo accediendo desde el panel de administración de tu WordPress en Shortcodes Elementor/All shortcodes.
Repasa todo lo que hemos explicado en el siguiente vídeo.
Cómo crear un formulario de registro con un popup
Bien, tenemos creada nuestra plantilla de formulario y la tenemos asociada a un shortcodes. Seguiremos los mismo pasos para crear una plantilla para el popup.
Ya en el editor de Elementor buscaremos el widget modal popup y lo insertamos en el contenido y pasamos a su configuración:
- Preview modal popup: Habilitando esta opción obtendremos una vista previa del popup. Para el proceso de personalización del popup mantendremos este selector habilitado, pero recuerda desactivarlo antes de su publicación.
- Title: Definimos el título del popup.
- Content type: Nos permite definir cuál será el contenido del popup. Para insertar la plantilla de nuestro formulario seleccionaremos la opción content y en el editor pegaremos el shortcodes de nuestro formulario de registro.
- Modal popup width: Definimos el ancho del popup.
- Modal appear effect: El widget nos permite mostrar el popup con diferentes efectos. Seleccionamos al gusto.
- Overlay color: Definimos el color del overlay.
- Close Icon: Podremos personalizar el icono que cierra el popup.
- Size Icon: Definimos el tamaño del icono.
- Color: Personalizamos el color del icono.
- Image/icon position: Este ajuste nos permite definir donde queremos que aparezca el icono que cierra el popup.
- Close on ESC keypress: Habilitando esta opción permitimos cerrar el popup apretando la tecla ESC.
- Close on overlay click: habilitando esta opción permitimos cerrar el popup cuando hacemos click en el overlay.
- Display modal on: Aquí podemos definir que tipo de elemento disparará el popup. En nuestro caso seleccionaremos el elemento button pero puede ser un icono, una imagen, un texto, etc etc.
- Button text: Aquí podremos editar el texto del botón.
- Alignment: Alienamos el botón según necesidad.
- Size: Definimos el tamaño del botón.
- Icon: Nos permite añadir un icono al botón.
Igual que hicimos con el formulario, el siguiente paso será personalizar el popup desde los ajustes de estilos. Publicamos y solo nos quedará insertar el shortcodes del popup donde queramos que aparezca el botón que lo dispare.
INSERTAR POPUP EN MENÚ PRINCIPAL
Si quieres que tu popup se dispare desde un elemento de tu menú principal deberemos modificar 2 ajustes del popup:
- En el ajuste display modal on seleccionaremos que el elemento que dispare el popup sea un texto.
- Desde los estilos del widget desplegamos el ajuste Display Text y lo personalizamos como los elementos de nuestro menú. Fuente, tamaño, color, etc etc.
Ahora solo falta añadirlo al menú. Para averiguar cómo hacerlo echa un vistazo a nuestra entrada cómo añadir widgets a tu menú principal.
Sigue todos los pasos para mostrar un formulario de registro en un popup en el siguiente vídeo.
Formulario de registro/login con un botón conmutador
Para mostrar nuestros formularios con un botón conmutador seguiremos trabajando con la plantilla del formulario que tenemos creada y deberemos crear 2 mas. Una para el formulario del login y otra para el botón conmutador.
Empezaremos con la del formulario del login.
Creamos la plantilla como hicimos con el formulario de registro y desde Elementor buscamos el widget Login form y configuramos el widget.
- Field label: Desde este ajuste personalizamos todos los textos del formulario: campos, placeholder y contraseña.
- Input size: Definimos el tamaño de los campos del formulario.
- Rebember me: Activando esta opción habilitamos la opción de recordar los datos del login.
- Social login: Nos permite loguearnos con nuestras cuentas de Google o Facebook. En esta entrada no profundizaremos sobre esta opción.
- Text button: Personalizamos el texto del botón del login.
- Size: Personalizamos el tamaño del botón
- Alignment: Nos permite definir la alineación del botón.
- Redirect after login: Habilitando esta opción nos permite redireccionar a una url después de hacer el login.
- Redirect after logout:Habilitando esta opción nos permite redireccionar a una url después abandonar nuestra sesión.
- Lost your password: Habilita la opción de recuperar contraseña. Para los ajuste revisa cuando creamos el formulario de registro.
- Ajuste de personalización del enlace para recuperar la contraseña.
Acabamos de pulir el aspecto visual del formulario desde los estilos del widget y publicamos. Ya tenemos nuestro formulario de login.
Ya solo nos faltará crear la plantilla del botón conmutador. Ten a mano los shortcodes de la plantilla del formulario de registro y del login porque las necesitarás.
De nuevo nos vamos a shortcodes elementor, creamos la plantilla botón conmutador y desde Elementor buscamos el widget Content toggle
Creamos la plantilla como hicimos con el formulario de registro y desde Elementor buscamos el widget Login form y configuramos el widget.
- Heading: Personalizamos el texto de la cabecera. En nuestro caso registro.
- Section: Definimos que mostrará esta sección. Nosotros escogeremos Content.
- En el editor pegaremos el shortcodes de nuestro formulario de registro.
- Repetiremos los pasos que hemos realizado para el formulario del login.
Personalizamos desde los ajustes de estilo y publicamos. Ahora solo nos quedará pegar el shortcode del botón conmutador donde queramos que se vea.
Si te has dado cuenta poco sentido tiene que en nuestro formulario de registro aparezcan los enlaces para el login y para recuperar la contraseña. Estas opciones ya las tenemos en el formulario del login, por lo que tendremos que realizar algunas modificaciones en la plantilla del formulario de registro.
Para ello editamos la plantilla y desde los general settings del widget deshabilitamos las opciones login y lost password.
Repasa todos los pasos para añadir tus formularios a un botón conmutador en el siguiente vídeo.
Bien, pues ya te hemos explicado cómo crear formularios de registro con Elementor y Ultimate addons for Elementor. Si tienes alguna duda puedes dejarla en comentarios.
Que gran tutorial muchas gracias, pero falta algo para completarlo que es realizar el formulario de recuperación de contraseña, puedes por favor indicarme como hacerlo, o dirigirme donde lo puedo encontrar, mil gracias dos un maestro. Bendiciones.
Hola Edwin:
Para habilitar la opción de recuperar la contraseña debes habilitar la opción que encontrarás en los general settings del widget.
También puedes mirarte el plugin Frontend Reset Password para una opción más personalizada.