En esta Meetup de Elementor Madrid hablamos de usos avanzados de los formularios de Elementor.
Lo vemos de la mano de Sebastian Echeverri y aplicándolo a casos de uso de proyectos reales.
Para conseguirlo, utilizaremos varios ingredientes:
- Widget de formularios de Elementor PRO.
- Plugin Piotnet Addons For Elementor (PAFE, para los mendas)
- Plugin Advanced Custom Fields (ACF)
- Plugin Actions Pack (parte 2 del meetup. Tienes el vídeo más abajo)
Formularios avanzados en proyectos reales
La mejor forma de aprender este tipo de funcionalidades es verlo con casos de uso reales.
Y, en esta ocasión, Sebastian nos cuenta 2 proyectos:
- elmercadillo.de: un directorio de negocios en el que los usuarios publican el contenido de manera automatizada y el administrador simplemente tiene que validar y activar las páginas.
- Otro proyecto con usuarios registrados de distintos perfiles en el que ampliamos las funcionalidades de WordPress para personalizar los formularios de registro, acceso y recuperar contraseña.
Cómo publicar contenido creado por los usuarios
En tan solo 8 pasos podremos montar un directorio de negocios con Elementor:
- Crear un Custom Post Type para nuestras fichas de negocio. Podemos usar el plugin CPT UI.
- Crear taxonomías para categorizar nuestros negocios.
- Añadirle a la ficha campos personalizados con el plugin Advanced Custom Fields.
- Maquetar la plantilla individual de nuestros negocios. Usaremos la potencia de Elementor PRO para crear plantillas dentro del theme builder y conectar dinámicamente con los campos de ACF.
- Construir nuestro formulario por pasos con Piotnet.
- Incluir el formulario en una nueva página.
- Darle magia al formulario para que cree un nuevo post.
- Aprobar y publicar el contenido
Para evitar que el Meetup se alargue hasta el infinito, en el vídeo podrás ver la parte relativa a los formularios (desde el paso 5).
Vamos a verlos un poco más en detalle.
Formulario Multistep con Piotnet
Antes de que Elementor permitiera los formularios multistep, Piotnet ya tenía una solución bastante avanzada para construirlos.
Su funcionamiento se basa en el uso de plantillas para cada uno de los pasos.
- Dividimos nuestro formulario en pasos.
- Creamos una plantilla para cada uno de los pasos, añadiendo los distintos campos y vinculándolos al id del formulario global.
- Creamos una página donde añadir el formulario de alta.
- Añadimos nuestro formulario y vamos vinculando las distintas etapas o pasos usando los shortcodes que Elementor asocia a cada plantilla.
La magia del formulario: crear un nuevo post
Ahora llega la magia de Piotnet: tenemos que configurar el formulario para que se encargue automáticamente de crear un nuevo contenido de nuestro Custom Post Type.
Y, además, añadirle los campos personalizados con la información de los usuarios.
Revisa el vídeo. Lo cuenta Sebas sobre el minuto 32 con todo lujo de detalles.
Aprobación del contenido
Como no queremos que la web se convierta en un circo… lo mejor es hacer que el administrador el que, manualmente, edite y publique la información adecuada.
Por eso configuramos el formulario para que le llegue un aviso por correo al administrador y configuramos Piotnet para que cree el contenido como borrador.
¡Listo! Tenemos un directorio de negocios completo en el que los usuarios publican de manera muy cómoda los contenidos.
Ahora vamos a la parte 2 del Meetup, en el que trabajamos con el plugin Actions Pack.
Ampliando los formularios para usuarios con Actions Pack for Elementor
A veces, los formularios nativos de WordPress para los usuarios se quedan bastante pobres.
Y no nos permiten mejorar o ampliar la información que le pedimos a los usuarios.
Para corregir esto podemos aprovechar la potencia de los formularios de Elementor junto con el plugin Actions Pack.
En esta segunda parte del Meetup, Sebas nos cuenta:
- Cómo crear un formulario de registro personalizado para usuarios con campos propios.
- Cómo añadir en la parte pública de la web un switcher con 2 formularios (registro / login).
- Cómo personalizar los formularios de login y olvidé mi contraseña para no utilizar los de WordPress.
Vaya pedazo de masterclass se marcó Sebas en esta Meetup.
La potencia que pueden tener los formularios de Elementor es muy grande.
En Elemendas ya nos tenía enamorados el plugin de Piotnet / PAFE. Pero, después de esta Meetup, nos gusta más todavía y ya estamos pensando en nuevos contenidos que publicar sobre él.
Si todavía no estás recibiendo nuestras novedades, suscríbete a nuestra newsletter para estar al día de las novedades del universo Elementor.
Te esperamos en la próxima newsletter.
El lunes. A las 10:15 (más o menos).
1 comentario en “Formularios avanzados con Elementor al ritmo de la Macarena”
Buen día, estoy desarrollando una página web para ventas de productos y me están pidiendo que desarrolle un formulario donde al momento de seleccionar un estado del país este lo tiene que redirigir al whatsapp de la persona encargada del estado, a esto me refiero que cada estado debe de tener la acción de redirigir al aplicante a un número en particular dependiendo de donde se encuentre. Mi pregunta es: ¿Es posible hacer algo tan específico?