Primer vistazo a las nuevas funciones de Elementor Pro Forms de ElementsKit

Publicado: 2022-05-13

¿Ha revisado las nuevas funciones de ElementsKit para formularios Elementor Pro?

ElementsKit ha lanzado recientemente dos nuevas características que lo ayudarán a crear formularios profesionales de Elementor más inteligentes.

¡Todos sabemos que ElementsKit nació para hacer que Elementor sea más enriquecedor!

El equipo de desarrollo de ElementsKit siempre ha creído en el poder de Elementor como la mayoría de los usuarios de WordPress. Y con esta admiración por Elementor en el fondo, el equipo ha trabajado muy duro hasta ahora para crear un complemento todo en uno que hace que el diseño web de WordPress sea más conveniente y flexible para más de medio millón de usuarios.

En la búsqueda de lograr este objetivo, ElementsKit ha desarrollado hasta ahora una colección de más de 85 funciones, más de 500 secciones preparadas y más de 35 páginas preparadas y todavía está trabajando para expandir esta colección ya gigantesca.

Todas estas características se crearon para complementar Elementor de la mejor manera posible. Nuestro equipo cree en el espíritu de mejora continua y, para nosotros, es seguir agregando nuevas funciones al kit de herramientas de Elementor con regularidad.

Para fortalecer la amistad con Elementor, ElementsKit ha lanzado nuevamente dos nuevas funciones que puede usar con la versión pro del increíble creador de sitios web. Y esta vez, el enfoque es empoderar a los usuarios de Elementor para que construyan formularios más flexibles e inteligentes utilizando la misma facilidad de uso que proporciona este generador de páginas de arrastrar y soltar.

Debe preguntarse: ¿Cuáles son estas nuevas características de ElementsKit? ¿Y cómo puedes usarlos?

Bueno, para obtener respuestas a sus preguntas, diríjase a la siguiente sección...

ocultar contenido
Descripción general de las nuevas características de los formularios de Elementor Pro: campos condicionales y botón de reinicio
Campos Condicionales
Botón de reinicio
Cómo agregar lógica condicional en Elementor Pro Forms usando ElementsKit
Paso 1: habilite los campos condicionales para el módulo de formulario Elementor Pro
Paso 2: Crea una nueva página
Paso 3: Widget de formulario de arrastrar y soltar de Elementor Pro
Paso 4: aplicar la lógica condicional
Paso 5: Publicar y obtener una vista previa
Cómo agregar el botón Restablecer en Elementor Pro Forms usando ElementsKit
Paso 1: habilite el botón de reinicio para el módulo de formulario Elementor Pro
Paso 2: Crea una nueva página y edítala con Elementor
Paso 3: arrastrar y soltar
Paso 4: agregue el botón Restablecer
Paso 5: Botón de reinicio de estilo
Paso 6: publicar y obtener una vista previa
¿Qué le espera ElementsKit para Elementor Pro?
Ultimas palabras

Descripción general de las nuevas características de los formularios de Elementor Pro: campos condicionales y botón de reinicio

Como se mencionó anteriormente, ElementsKit ha introducido dos nuevas funciones para los usuarios de formularios de Elementor Pro. Las dos características son Lógica condicional para campos de formulario y Botón de reinicio. Puede encontrar estas funciones como parte de los módulos de ElementsKit.

Ambas características son muy útiles y estamos seguros de que las usará con frecuencia una vez que conozca sus funcionalidades. Entonces, conozcamos estas nuevas funciones en pocas palabras.

Campos Condicionales

lógica condicional en Elementor Pro Forms

Esta es una característica de nivel avanzado para los formularios de Elementor Pro. Con este módulo de ElementsKit, ahora puede mostrar/ocultar un campo de entrada de formulario en particular según los valores que el usuario proporciona en los campos de entrada anteriores.

Esta lógica condicional sigue la “ teoría if-else ”. Otra cosa buena es que puede agregar lógica condicional múltiple utilizando las relaciones AND y OR.

Puede agregar lógica condicional a varios campos de entrada del mismo formulario y solo hacer que aparezcan cuando se cumplan las condiciones. Esto es extremadamente útil cuando desea que sus clientes tengan la mejor experiencia de usuario cuando completan un formulario.

¿Cómo?

Bueno, puede mostrar la opción en función de la opción/valor anterior que elijan. Por ejemplo, puede hacer preguntas adicionales solo cuando alguien elija una opción en particular. Otro ejemplo puede ser mostrar solo el botón de enviar una vez que el usuario complete todos los campos obligatorios.

Con la opción condicional de ElementsKit, puede agregar condiciones como Igual, No igual, Mayor que, Mayor que o igual, Menor que y Menor que o igual.

Más importante aún, puede aplicar tantas condiciones como desee utilizando cualquiera de estas lógicas con la combinación de las relaciones AND y OR. Puede encontrar los pasos para usar esta función más adelante en este blog.

¿Revisaste las nuevas características que ha introducido Elementor 3.6 ? Echa un vistazo a nuestro blog sobre Elementor 3.6 Review

Botón de reinicio

Botón de reinicio para Elementor Pro Forms

"Errar es humano."

Por lo tanto, naturalmente puede esperar que parte de su audiencia cometa algunos errores al completar un formulario. Sin embargo, a veces volver a cada campo del formulario y cambiar los valores puede resultar molesto.

El módulo Reset Button de ElementsKit ofrece la solución perfecta en tal escenario. Uno puede simplemente hacer clic en un botón de reinicio y todos los campos de entrada volverán a sus valores predeterminados.

Con la combinación de Elementor Pro y ElementsKit Pro, ahora puede agregar fácilmente un botón Restablecer a su formulario. El botón de reinicio aparecerá como uno en el tipo de campo de entrada en los formularios de Elementor Pro. Además, también puede personalizar el estilo del botón de reinicio para hacerlo más atractivo.

Descargar ElementsKit Pro

Cómo agregar lógica condicional en Elementor Pro Forms usando ElementsKit

Puede encontrar esta característica en una nueva pestaña para cada campo de entrada de los formularios de Elementor pro. Aprenda a agregar lógica condicional a los campos de formulario de Elementor pro en solo 5 simples pasos.

Paso 1: habilite los campos condicionales para el módulo de formulario Elementor Pro

El primer paso es activar los campos condicionales para el módulo de formulario Elementor Pro. Para ello, vaya a ElementsKit ⇒ Módulos ⇒ Active el botón de alternancia de Campos condicionales para el formulario Elementor Pro y, finalmente, haga clic en Guardar cambios.

habilite el módulo de lógica condicional para elementos elementor pro widget Elementor pro

Paso 2: Crea una nueva página

Ahora, necesita crear una nueva página. Para eso, navegue a Panel de WordPress ⇒ Páginas y haga clic en Agregar nuevo.

Ahora proporcione un Título, elija Plantilla como Ancho completo de Elementor y, finalmente, haga clic en Editar con Elementor para editar la página.

Crear página para usar el widget pro de Elementor

Paso 3: Widget de formulario de arrastrar y soltar de Elementor Pro

Busque el widget de formulario. Una vez que encuentre el widget, simplemente arrastre y suelte el widget Elementor Pro para crear un formulario.

formulario de widget de elementor pro de arrastrar y soltar

¿Quiere agregar un mega menú de aspecto moderno a su sitio de Elementor? Lea cómo crear un mega menú con Elementor y ElementsKit

Paso 4: aplicar la lógica condicional

Vamos a aplicar condiciones en el campo Correo electrónico según la entrada del usuario en el campo Nombre. El campo de correo electrónico solo será visible cuando el campo Nombre no sea nulo (el usuario ha ingresado algún valor).

Para eso, haga clic en el campo Correo electrónico para expandir. Debería ver una tercera pestaña llamada Condiciones. Estas son las opciones que debe utilizar para aplicar la condición:

  • Habilitar condiciones: Active el botón de alternancia Habilitar condiciones.
  • Habilitar acción: elija el resultado final que se activará si se cumplen las condiciones. Puede elegir "Mostrar si" u "Ocultar si".
  • Expresiones de condiciones: aquí debe escribir las expresiones condicionales. Si puede agregar múltiples condiciones.
aplicar lógica condicional al campo elementor pro

Nota: Para que el campo Correo electrónico solo sea visible cuando el campo Nombre tiene un valor, debe elegir Si se muestra como el valor Habilitar acción . Después de eso, debe copiar la ID del campo de nombre.

copiar el nombre del widget elementor pro

Luego vaya al campo Correo electrónico y en la Expresión de condiciones escriba "nombre! = nulo"

pase la expresión lógica condicional para el formulario elementor pro

Del mismo modo, puede usar la opción "si ocultar" para ocultar el campo del formulario de mensaje hasta que el usuario escriba su dirección de correo electrónico. Para esto, debe usar el campo de expresión Correo electrónico == “” .

si oculta la condición para el campo de mensaje

Paso 5: Publicar y obtener una vista previa

Una vez que agregue todas las condiciones, haga clic en publicar y luego vea la vista previa.

cómo aplicar la lógica condicional a la vista previa de formularios elementor pro

Para obtener un tutorial más detallado sobre cómo usar la función condicional de ElementsKit en los formularios de Elementor Pro, haga clic aquí.

Cómo agregar el botón Restablecer en Elementor Pro Forms usando ElementsKit

Agregar un botón de reinicio en los formularios de Elementor Pro es como agregar cualquier otro campo de formulario. Puede agregar un botón de reinicio al widget de formulario de Elementor con el botón de reinicio de ElementsKit para el módulo Elementor Pro. Estos son los pasos que debe seguir:

Paso 1: habilite el botón de reinicio para el módulo de formulario Elementor Pro

El primer paso es activar el botón Restablecer para el módulo de formulario Elementor Pro. Para eso, navegue a ElementsKit ⇒ Módulos ⇒ Active el botón de alternancia del botón Restablecer para el formulario Elementor Pro y, finalmente, haga clic en Guardar cambios.

Habilitar el botón de reinicio para formularios elementor pro

Paso 2: Crea una nueva página y edítala con Elementor

Para crear una nueva página. Para eso, navegue a Panel de WordPress ⇒ Páginas y haga clic en Agregar nuevo.

Ahora proporcione un Título, elija Plantilla como Ancho completo de Elementor y, finalmente, haga clic en Editar con Elementor para editar la página.

crear una página para el botón de reinicio

Paso 3: arrastrar y soltar

Escriba desde para buscar en el widget de formulario de Elementor. Una vez que encuentre el widget, simplemente arrastre y suelte el widget para crear un formulario en Elementor.

widget de arrastrar y soltar elementor pro

Los blogs son una excelente manera de conectarse con su audiencia. Compruebe cómo crear una atractiva plantilla de publicación de blog con Elementor

Paso 4: agregue el botón Restablecer

Para agregar un botón de reinicio, haga clic en + AGREGAR ARTÍCULO para agregar un nuevo campo.

agregar un nuevo campo a los formularios de elementor pro

Ahora, en el menú desplegable Tipo, elija Botón de reinicio . Luego, proporcione una etiqueta.

agregar el botón de reinicio al formulario elementor pro

Paso 5: Botón de reinicio de estilo

Para personalizar el estilo del botón de reinicio, vaya a la pestaña Estilo y expanda la pestaña del botón de reinicio. Aquí puede cambiar los estilos para las vistas normal y flotante. Para la vista normal, puede personalizar el color de fondo, el color del texto, la tipografía, el tipo de borde, etc.

estilo elementor pro botón de reinicio

Para la vista flotante, puede personalizar el color de fondo y el color del texto. Para obtener un tutorial más detallado sobre cómo usar el botón Restablecer, haga clic aquí.

Elementor Flexbox Container ofrece más opciones para crear un sitio web que responda al dispositivo. Para obtener más detalles, consulte nuestro blog Cómo usar Elementor Flexbox Container en pasos simples .

Paso 6: publicar y obtener una vista previa

Una vez que haya terminado de personalizar el botón de reinicio, puede publicar la página y usar el formulario con un atractivo botón de reinicio. Aquí hay una demostración del botón de reinicio:

botón de reinicio en formularios elementor pro

¿Qué le espera ElementsKit para Elementor Pro?

Como se mencionó anteriormente, el equipo de ElementsKit se esfuerza por agregar nuevas funciones para potenciar Elementor para que juntos puedan brindar la mejor experiencia de usuario. Con la esperanza de mantener viva la costumbre, siempre tenemos muchas cosas en nuestra hoja de ruta.

En lo que respecta a los formularios de Elementor Pro, muy pronto habrá una nueva adición de características. Y esa característica próxima es un campo de firma para formularios profesionales de Elementor.

Con el widget Firma, los usuarios podrán ingresar su firma usando el mouse o el lápiz táctil . Tendrán la opción de guardar la firma como datos o en formato de imagen (Ej. jpg, png, etc).

Además del campo de la firma, también tenemos muchas características que están en progreso y se lanzarán este año. Puede consultar nuestra hoja de ruta para encontrar más detalles. Y si desea solicitar una función específica, puede enviar sus ideas sobre funciones en este enlace.

Ver hoja de ruta de ElementsKit

Ultimas palabras

ElementsKit anterior solo ofrecía funciones enfocadas en los usuarios de Elementor Free. Comenzamos este año con el objetivo de traer nuevas funciones también para los usuarios de Elementor Pro.

Este es solo el comienzo de una larga amistad que beneficiará inmensamente a los creadores de sitios web de Elementor. El equipo de ElementsKit trabaja constantemente para agregar increíbles widgets y módulos. Entonces, si está buscando una experiencia de diseño web más prolífica, debe usar ElementsKit con Elementor.

En caso de que esté preocupado por el problema de compatibilidad entre ElementsKit y Elementor, simplemente deshágase de esos miedos o aprensiones.

Porque ElementsKit es compatible con todas las últimas versiones de Elementor, que también incluye Elementor 3.6. Por lo tanto, puede usar las nuevas funciones de ElementsKit con Elementor pro sin tener que preocuparse por enfrentar problemas de incompatibilidad.

¡Obtenga su copia de ElementsKit Pro hoy y cree formularios de Elementor Pro más inteligentes!

Cree formularios de Elementor Pro más inteligentes