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.

19 comentarios

  1. Estoy buscando crear tarjetas formato A6 para radioaficionado (qsl) en formato pdf con un fondo grafico fijo y una base de datos en excel con campos texto de manera que el usuario busque sus datos e imprima su tarjeta, se puede hacer eso con elementor pro?

    1. Hola Pablo, si que es posible, pero…con bastante mano de obra. Lo único, que posiblemente tuvieras que pasar el Excel a un Google Sheets por temas de compatibilidad, usando Integromat para la interconexión.

      De hecho, para que sea más viable, podrías guardar los datos en un CPT con custom-fields y cerrarlo privadamente para que cada usuario solo pueda imprimir su tarjeta.

      Te lo resumo, si se podría hacer, pero no son 4 clicks,

  2. Hola Alvaro me encantó tu post, una pregunta, busco justamente hacer un pequeño CRM en mi sitio, usando el formulario de elementor, pero en ese mismo formulario hacer consultas y editar información que anteriormente ya llené, (como dando seguimiento ) a los contactos, como le hago? Es posible?

  3. ¡Hola, Álvaro!

    Gracias por compartir buena información.

    Una consulta puntual: ¿es posible enviar formularios a determinados correos según la opción que se elija en un selector? Ejemplo: Elijo la opción 1 y se va al correo 1, opción 2 al correo 2 y así sucesivamente. Muchas gracias.

    1. Hola Jose, esto con Gravity Forms lo puedes hacer facil, pero en el caso de Elementor Forms necesitas un plugin como e-Addons que te permita acciones condicionales en formularios.

  4. Hola Álvaro

    Es posible que el formulario envíe un json personalizado con los campos rellenados

    Gracias

  5. Hola Alvaro, muy completo tu articulo. Felicitaciones!

    Te consulto: desde Elementor Pro uso formularios con campos condicionales, de manera que dependiendo de un “select” de “X” opciones, vayan o no apareciendo los diferentes campos a llenar por el usuario. Eso funciona de maravilla.

    El problema que encuentro y no veo la forma de solucionar desde la misma api, es que el submit que hace me envia todos los campos y sus titulos, o sea, los que llena el usuario y los que no aparecen (quedan ocultos por la condicion logica)

    Y, otro tema es que los datos no llegan muy legibles. Me gustaria ordenarlos un poquito, al menos con algunos

    ¿Que solución le darías a estos puntos?

    Gracias de antemano.

    1. Hola Gustavo, yo mismo me he encontrado con ese problema en varias ocasiones.

      Para lo de enviar todo no hay solucion, al menos que yo haya encontrado, incluso he probado con Piotnet y nada. Por otro lado, lo del email, simplemente hay que construirlo externamente con un sistema de email marketing o usar un sistema como Mailster para construirlo, y no usar el de Elementor Forms.

  6. Hola Alvaro, excelente contenido!
    Sabras si es posible que al enviar un correo desde un formulario de Elementor PRO y se pueda obtener un acuse de recibido o confirmación de lectura del correo enviado?
    Gracias!

    1. Hola Angel, pues…que yo sepa no, nunca me lo había planteado, pero nunca he visto esa funcionalidad.

  7. Hola Álvaro, muy bueno el post!
    Mi caso concreto que me ha traído a él, requiere de un autofoco. Con elementor por, hacer jumplink desde cada uno de las botones de llamada a la acción de la landing, y que todos ellos me lleven el cursor al primer campo del formulario. En versión móvil, hace que directamente se te abra el teclado en la pantalla. ¿Sabrías decirme cómo hacerlo?
    gracias de antemano.

    1. Hola Abelart, nunca he probado a hacer jumplink a un campo de formulario, pero…si el comportamiento es el que comentas, puedes hacer jumplink al bloque que contiene el formulario y ya esta, así no deberías tener problema.

  8. hola gracias por el contenido lo que estoy buscando hacer es precisamente esto que mis clientes puedan poner preguntas en mi pagina y yo poder responder se requiere algun plugin adicional?

    1. Hola Oscar, si, se necesitan otros plugins explicados en este post o incluso otras soluciones más avanzadas como wpForo, AnsPress o CM Answers Pro. Para decir algo concreto necesitaría más datos.

  9. Hola, Tengo una duda espero me puedas ayudar..Cree un formulario condicional que funciona muy bien, su funcion final que la persona busca su nombre en la lista y segun el nombre le aparece una pregunta especial para el.

    Esto lo hice creando la casilla de nombre y pegando un listado con la función de Select y le puse un value a cada nombre ejemplo: Gabriela | 1 , Francisco | 2, hice una pregunta condicional igual de select que cuando pusiera el valor 1 apareciera dicha pregunta o el 2 otra pregunta.

    Hasta aqui todo bien, pero al momento de exportar la base de datos de los formularios no me pone el nombre de la persona, me pone el valor. Ejemplo: Nombre: 2 en lugar de ponerme Nombre: Gabriela.

    Como puedo solucionar esto? Me gustaria que me pusiera el nombre de la persona y no solo su valor.

    Gracias!

  10. Hola busco crear un formulario de consulta seria algo asi
    el cliente entra y consulta si existe la persona con quien trata en nuestra base de datos

  11. ¡Hola Álvaro! Gracias por la información. Tengo la siguiente duda: He agregado eventos a mi sitio modificando el functions.php de mi tema. Ahora quiero hacer con Elementor Pro un formulario con el cual se pueda rellenar el evento sin que yo lo tenga que hacer manualmente. ¿Es esto posible? De ser así, ¿necesitaría algún plugin extra?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Artículos destacados

wp-config.php de WordPress

Copias de seguridad en WordPress

WebP en WordPress

Optimizar la carga de JavaScript y CSS en WordPress

wp-cron.php de WordPress

Desinfectar un WordPress hackeado

Compartir en twitter
Compartir en facebook
Compartir en linkedin

Alvaro Fontela
Consultor WordPress especializado en WPO y rendimiento web; CEO y co-fundador de Raiola Networks.

¡Puedes encontrarme en redes sociales!

¿Te gusta mi blog?

Si quieres recibir mis últimos artículos en tu email, suscríbete a mi lista de correo y te enviaré semanalmente mis últimos contenidos.

RESPONSABLE:

RAIOLA NETWORKS, S.L.

C.I.F.: B27453489

Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo)

Telefono: +34 982776081

e-mail: info@raiolanetworks.es

FINALIDAD:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS:

No se ceden datos a terceros, salvo obligación legal.

Personas físicas o jurídicas directamente relacionadas con el Responsable

Encargados de Tratamiento adheridos al Privacy Shield

DERECHOS:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL:Se puede consultar la política de privacidad de forma más detallada aquí.