Formularios avanzados con Elementor al ritmo de la Macarena

Vamos a exprimir al máximo las opciones de formularios de Elementor PRO, vitaminándolo con plugins adicionales para ampliar su funcionalidad.

Desde formularios que permitan a los usuarios publicar contenido en nuestra web hasta la conexión con sistemas de CRM o formularios de acceso y registro a nuestro WordPress desde Elementor.

Y todo esto sin programar una sola línea de código.

Sebastian Echeverri nos lo cuenta con detalle en esta Meetup de Elementor Madrid.

Elemendas.com patrocina esta Meetup

Indice

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:

  1. Crear un Custom Post Type para nuestras fichas de negocio. Podemos usar el plugin CPT UI.
  2. Crear taxonomías para categorizar nuestros negocios.
  3. Añadirle a la ficha campos personalizados con el plugin Advanced Custom Fields.
  4. 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.
  5. Construir nuestro formulario por pasos con Piotnet.
  6. Incluir el formulario en una nueva página.
  7. Darle magia al formulario para que cree un nuevo post.
  8. 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.

  1. Dividimos nuestro formulario en pasos.
  2. Creamos una plantilla para cada uno de los pasos, añadiendo los distintos campos y vinculándolos al id del formulario global.
  3. Creamos una página donde añadir el formulario de alta.
  4. 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).

Sobre el ponente:

Sebastián Echeverri

Sebastián Echeverri es diseñador web, creador en YouTube dedicado a la creación de páginas web con Elementor, profesor de WordPress en una academida de Madrid, un enamorado de su familia y la fotografía.

Entérate de todas las novedades del universo Elementor en Elemendas.com

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  • Responsable: Santiago Becerra Carrillo, titular del website elemendas.com.
  • Finalidad: Enviarte notificaciones por e-mail con novedades de plugins y temas relacionadas con WordPress y Elementor.
  • Legitimación: Consentimiento del interesado (es decir, tú), al enviar el formulario.
  • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En todo caso, los datos que nos facilitas están ubicados en servidores cuya sede se encuentra dentro del territorio de la UE o gestionados por Encargados de Tratamiento acogidos al acuerdo “Privacy Shield”, aprobado por el Comité Europeo de Protección de Datos. Nuestro proveedor de envío de mail es MailerLite.
  • Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Últimas entradas en el blog de Elemendas

Otros meetups de Elementor