Elementor Forms de Elementor Pro

Dificultad del post: facilmediadifícil
elementorforms

Estamos en un momento muy bueno para los formularios de contacto complejos en WordPress.

Por un lado está Gravity Forms. En el momento de escribir este post acaba de salir la versión 2.5 con un cambio de interfaz importante y con algunas mejoras técnicas para seguir ampliando su potencial y posibilidades.

Por otro lado tenemos los formularios de Elementor Pro, también llamados Elementor Forms, que en poco tiempo han conseguido mejorar de largo todo lo existente y que ofrecen un potencial muy difícil de calcular.

Sí, hoy estamos aquí para hablar de Elementor Forms, los formularios de Elementor Pro que actualmente, por distintas razones, han conseguido eso de “ser algo más que un simple plugin de formularios de contacto”.

elementor pro

Si te preguntas por qué el widget de Elementor Forms en Elementor Pro es algo más que un formulario de contacto, es que no lo has probado.

Además de ser totalmente personalizable mediante el editor de Elementor Pro, estamos hablando de un sistema capaz de escribir en campos meta de la DB de WordPress, con la posibilidad de leer y escribir. Además, es totalmente compatible con ACF (Advanced Custom Fields) y, con ciertos plugins como Dynamic.ooo, resulta perfecto para crear interfaces de usuario.

Esto convierte a WordPress en algo más que un CMS, lo convierte en un framework para crear aplicaciones web sin necesidad de saber programar.

El hecho de poder guardar datos en la DB (CPT y custom-fields) hace que, si jugamos con los permisos y con los roles de usuarios, podamos crear cosas tan asombrosas como un CRM con WordPress o cualquier otro tipo de aplicación colaborativa para guardar datos.

Antes de nada, vamos a entender un poco el modo de funcionar normal de Elementor Forms. Después, explicaremos algunas cosas que podemos hacer combinando Elementor Pro con otros plugins 😉

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

¿Cómo funciona Elementor Forms?

Los formularios de Elementor no funcionan como otros plugins de formularios (Gravity Forms, Ninja Forms, Contact Form 7, etc.), sino que funcionan mediante un widget de Elementor Pro.

Hay que destacar que estos formularios solo los vas a encontrar en Elementor Pro, no en la versión gratuita de Elementor.

Cuando arrastramos un widget de Forms en la interfaz de Elementor Pro, insertamos un widget con configuración por defecto como este:

elementor forms

Como ves, puedes crear formularios captando todos los datos que tú quieras con el formato y el «diseño» que tú quieras. A nivel de editor visual, es de lo mejor que he visto en mi vida.

Además, puedes hacer formularios en múltiples pasos o multi-step, algo que suele ser característico de plugins de formularios avanzados y que ya “indica” que puedes crear formularios un poco más avanzados.

A nivel spam también está muy bien, ya que es compatible con honeypot y recaptcha, dependiendo del nivel de protección que quieras. Y todo sin necesidad de un plugin externo, aunque para recaptcha tendrás que meterle tu API de Google Recaptcha.

Volviendo a la captura de la que hablábamos antes:

elementor forms

Te voy a resumir un poco cada una de las secciones de configuración del widget:

  • Form Fields: Como su nombre indica, aquí puedes configurar todo lo que tiene que ver con los campos, desde el tipo (eligiendo entre más de 10) hasta la apariencia y su funcionamiento general.
  • Buttons: Permite personalizar el botón del formulario o los botones de los formularios de múltiples pasos. En ambos casos, solo en lo que se refiere a la apariencia.
  • Actions After Submit: Mi sección favorita, ya que es la que permite hacer cosas impresionantes como añadir acciones para cuando se pulse el botón del formulario. Al añadir acciones, habrá más secciones de configuración.
  • Email: Podemos configurar el email que se envía tras hacer clic, aunque esto puede ser desactivado en “Actions After Submit”.
  • Step Settings: Permite configurar aspectos de la apariencia de los formularios multipaso (no los formularios normales).
  • Additional Options: Simplemente nos permite añadir un form ID o personalizar los mensajes de error que puede dar el formulario.

Vale, hasta aquí, nada impresionante… Lo que vienen siendo unos formularios normales de WordPress pero que, en lugar de incrustarse mediante una configuración propia con un shortcode, se configuran mediante un widget del pagebuilder.

Pero ahora vamos a centrarnos en “Actions After Submit”, ya que es la opción que le da todo el juego a Elementor Forms.

elementor forms

¿Ves toda la lista de acciones que salen? Pues aún se pueden añadir más mediante plugins.

Y mejor aún: podemos añadir varias acciones al mismo tiempo. Así, cuando pulsamos el botón de un formulario, se pueden hacer varias cosas justo en ese momento.

 

Defaults dinámicos, campos dinámicos y webhooks

De forma nativa, el propio Elementor Forms tiene algunas características muy potentes que, combinándolas, permiten hacer cualquier cosa con los formularios de Elementor de forma nativa.

Creo que los defaults dinámicos, los campos dinámicos y los webhooks son características que hay que recalcar, porque son puntos fuertes.

 

Defaults dinámicos en Elementor Forms

En cualquier plugin de formularios avanzados puedes configurar valores por defecto para los campos de los formularios. Sin embargo, en Elementor Forms podemos configurar estos defaults de forma dinámica mediante campos dinámicos de Elementor Pro.

elementor pro forms

Las posibilidades dependen de los plugins que tengamos instalados. De este modo, si usamos un plugin de custom-fields como ACF o JetEngine vamos a conseguir aún más campos dinámicos que podremos utilizar como defaults, pero siempre con cierta lógica.

Esto es ideal para sacar datos de usuario al formulario, por lo que para usuarios registrados los campos predeterminados dinámicos pueden ser aún más potentes.

 

Campos dinámicos de Elementor Pro

Esta es una de las funcionalidades más comunes y menos conocidas de Elementor Pro: los campos dinámicos.

Cualquier campo de Elementor Forms, al igual que cualquier campo de Elementor Pro, puede usar los campos dinámicos (como el default que mostramos en la sección anterior).

elementor pro

Los datos dinámicos que podemos sacar pueden ser ampliados mediante plugins como JetEngine o ACF.

Este es uno de los puntos fuertes de Elementor Forms y también de Elementor Pro en general.

 

Webhooks de Elementor Forms

Los webhooks son la parte más potente de cualquier plugin de formularios. Por eso, si tu plugin de formularios te ofrece la posibilidad de usar webhooks, es que es potente.

Con los webhooks podemos utilizar herramientas externas como Integromat o Zapier para multiplicar por mil las posibilidades del formulario. Con un simple webhook podemos hacer integraciones bastante potentes.

elementor forms

Lo bueno de Elementor Forms es que, además del webhook, podremos configurar varias acciones para después de pulsar el botón.

Otro plugin con el que puedes configurar webhooks en WordPress de forma dinámica es AutomatorWP.

 

Gestión de contenido desde el frontend con Elementor Forms

Sí, lo has leído bien: podemos gestionar contenido de un sitio web desde el front-end con Elementor Forms, solo debemos tener los plugins necesarios para hacerlo.

Además, vamos a destacar que el propio Elementor Pro es totalmente compatible con ACF (Advanced Custom Fields), por lo que las posibilidades son realmente impresionantes.

elementor forms addons

Existen diferentes formas de hacer que los formularios de Elementor Pro puedan guardar CPTs y metas de usuario:

  • Dynamic.ooo: Un plugin que incluye múltiples modificaciones que hacen que Elementor Pro sea mucho más dinámico y funcional. A mí me gusta, pero soy consciente de que es el más rudimentario.
  • JetEngine: Un stack completo de campos dinámicos y campos meta que añade a Elementor bastantes cosas, como formularios con la capacidad de interactuar de forma muy dinámica con el contenido de la web.
  • e-ProForm Actions de e-Addons: Esta parte del plugin e-Addons para Elementor Pro nos permite tener muchas más actions en los formularios de Elementor Forms y, entre ellas, la action para guardar ciertos datos en contenido.

Combinando la posibilidad de guardar datos y la posibilidad de mostrar defaults dinámicos podemos hacer formularios e interfaces muy potentes en WordPress y convertirlo en una aplicación, más que en una web.

jetengine

Como he dicho, esto puede ser aplicable tanto para custom-post y custom-fields como para campos meta de usuario o incluso para modificar o crear filas en la tabla wp_options de la DB de WordPress.

 

Envío de datos a destinos externos con Elementor Forms

Esto se puede hacer también con webhooks, que incluye de forma nativa Elementor Pro. Sin embargo, si queremos ir un poco más allá, tenemos nociones de programación o tenemos delante algún servicio que nos permita recibir datos con un endpoint, podemos usar la función “Export” añadida por Dynamic.ooo.

elementor jet engin

Como he dicho, esta funcionalidad está reservada a usuarios con conocimientos avanzados, pero puede ser de mucha utilidad.

Recordemos que Dynamic.ooo también tiene una funcionalidad para que, mediante un campo dinámico, podamos acceder a un dato recuperado desde una API REST o desde un JSON. De esta forma, podemos cerrar el círculo “leer y escribir” cubriendo ambas posibilidades.

 

Generar PDF con Elementor Forms

En Gravity Forms existe un plugin llamado Gravity PDF que permite hacer cosas muy chulas con la generación de archivos PDF en base a datos dinámicos y a una plantilla.

En Elementor Forms podemos hacer esto con una de las funcionalidades de Dynamic.ooo, creando un PDF a partir de los datos de un formulario de Elementor Pro.

elementor dynamic

Lo bueno es que podremos definir la plantilla con un template de Elementor Pro y todos sabemos la potencia que tiene Elementor como pagebuilder a nivel visual.

 

Perfil e interacciones con Elementor Forms

¿Has visto todo lo anterior? Pues las posibilidades van mucho más allá, ya que combinando funcionalidades podemos conseguir cosas muy curiosas.

En aplicaciones sociales podemos hacer la parte de perfil (profile builder) con Elementor Forms. Además, tenemos distintas opciones, desde el método rudimentario y flexible de Dynamic.ooo hasta el modo asistido y fácil de JetEngine.

elementor profile builder

Mezclando capacidades de recuperar datos mediante defaults dinámicos y capacidades para escribir en cualquier parte de la base de datos, e incluso la capacidad de comunicación externa, podemos hacer cosas muy curiosas que permiten interactuar a nuestros usuarios con el sitio web, pudiendo convertir el sitio web en una aplicación.

Lo bueno es que podemos crear cosas como un hosting de imágenes con WP o utilizar funcionalidades dinámicas del formulario en una aplicación Android creada con WordPress. Las posibilidades son ilimitadas.

 

BONUS: Proyectos dinámicos con Elementor Forms

Cuando alguien empieza a usar Elementor Pro no es consciente de las capacidades que tiene el pagebuilder y mucho menos su sistema de formularios.

En mi Academia WP Avanzado he demostrado que se puede hacer un CRM flexible y personalizable usando Elementor Pro y JetEngine, pero la cosa puede ir mucho más allá, ya que podemos crear sitios web de clasificados, listados dinámicos sociales, etc.

elementor profile builder

En definitiva, cualquier sitio web o aplicación web que se nos pase por la cabeza crear.

Y si algo no podemos hacerlo dentro del propio WordPress, siempre tendremos la posibilidad de mandar los datos a un destino externo para trabajar con ellos o hacer lo que necesitemos.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.
Deja una respuesta

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

Share on twitter
Share on facebook
Share on linkedin