Crear y diseñar formularios con el widget Formulario de Elementor

Crear y diseñar formularios con el widget Formulario de Elementor

¡Cada sitio web debe incluir un formulario de contacto! Los formularios de contacto son útiles para una variedad de propósitos, sin importar el tipo de sitio web que tenga. Pueden generar clientes potenciales, establecer conexiones y relaciones, permitir a los usuarios informar problemas con su sitio y todo lo demás.

No es necesario ser un experto técnico para crear formularios de contacto en WordPress. El creador de páginas Elementor hace que sea más fácil que nunca crear sitios web hermosos.

Para demostrar cómo crear formularios de contacto con Elementor, repasaremos las diferentes opciones y todo lo que hay que saber sobre los formularios de contacto en Elementor.

Elementor ha incluido un widget de formulario desde hace bastante tiempo, lo que significa que ya no necesita ir a ningún otro lugar para crear formularios para su sitio web de WordPress, ¡lo cual es una bendición!

En el pasado, es posible que haya encontrado dificultades al crear formularios con algunos de los plugin disponibles. El proceso de diseño y configuración de formularios puede llevar mucho tiempo y resultar frustrante. Afortunadamente para todos nosotros, es sencillo trabajar con el widget Elementor Form.

Antes de comenzar con el generador de formularios de Elementor, echemos un vistazo rápido a algunas de sus características más esenciales.

Una de las características más distintivas, para empezar, es que está completamente integrado en la interfaz de Elementor, lo que significa que tiene acceso a muchas opciones de diseño / estilo / disposición disponibles en Elementor. No creo que encuentre un plugin formulario independiente con un sistema de diseño tan robusto como este.

A partir de ahí, puede crear hasta 18 tipos diferentes de campos:

  • Texto Correo electrónico Área de texto Área de texto
  • La URL y el número de teléfono son los siguientes:
  • Los botones de opción son un tipo de botón de opción.
  • Elija de una lista (desplegable)
  • Las casillas de verificación se utilizan en las listas de verificación.
  • Solo hay una casilla de verificación (aceptación)
  • reCAPTCHA
  • Los honeypots son un tipo de recipiente que contiene miel (evita el spam)

También puede dividir sus formularios en varias páginas para crear formularios de varios pasos, beneficiosos para las aplicaciones de formato largo.

Elementor Pro tiene más de 12 integraciones con servicios populares de marketing por correo electrónico y sistemas de gestión de relaciones con los clientes para ayudarlo a aprovechar al máximo sus formularios. También hay una integración catchall Zapier que le permite conectarse a cualquiera de las miles de herramientas disponibles en la plataforma Zapier si su herramienta no está en la lista.

También hay algunas otras alternativas interesantes. Para ex amp le, cuando alguien rellena el formulario, puede recibir notificaciones a través de la holgura o la discordia.

Hablando de notificaciones, también puede personalizar las notificaciones por correo electrónico que recibe y las notificaciones por correo electrónico que reciben los remitentes de formularios. Después de que envíen el formulario, puede redirigirlos a una página de agradecimiento personalizada que cree.

¿Cuál es la mejor manera de crear un formulario en Elementor?

Comenzaremos abriendo el editor de Elementor y luego arrastrando y soltando el widget de formulario a la ubicación donde queremos construir nuestro formulario.

Cómo crear un formulario Elementor

Como todo lo demás en Elementor, el proceso de creación de formularios se realiza visualmente. No es necesario utilizar un plugin adicional, ni es esencial que actúe como backend de su sitio web.

Formando elementos Elementor de forma estructurada

Una vez que su formulario esté en su lugar, el primer paso es organizar la información que contiene. ¿Qué campos necesita y qué tipos de campos deberían ser? ¿Qué estás buscando?

Cuando se trabaja en el editor de Elementor, los campos de formulario se agregan y editan desde la pestaña Contenido. Como se puede ver en la ex amp le abajo, formas incluyen algunos campos por defecto. Al seleccionar Agregar elemento en el menú desplegable, puede crear nuevos campos.

También es posible duplicar un campo seleccionando el icono que parece dos documentos, uno frente al otro, y haciendo clic en él. 

Tipos de campos en un formulario

Hay muchos tipos de campos de formulario disponibles, que van desde simples campos de texto hasta contraseñas, ReCaptcha y campos de honeypot.

Para cambiar el comportamiento de un campo de formulario, primero seleccione el campo y luego haga clic en Me gusta en el menú desplegable Tipo para ver los distintos tipos de campo disponibles.

Tipos de campos en un formulario Elementor

Ancho de una columna de formulario

Esta función le permite utilizar dos campos de formulario en la misma línea ajustando la configuración de Ancho de columna. Cambie el ancho de la ventana seleccionándola en el selector desplegable y seleccionando 50 por ciento. Vale la pena señalar que si hace esto con dos campos de formulario consecutivos, notará que aparecen juntos en la misma línea.

Formularios en Elementor para estilizar

Diseñe sus formularios en Elementor de la misma manera que diseña otros widgets al navegar al panel Estilo ubicado dentro de la interfaz de edición de Elementor.

El formulario en sí, los campos, los botones, los pasos, los mensajes de error y los mensajes de confirmación se pueden personalizar.

Para aquellos que ya están familiarizados con Elementor, no hay mucho más que deban aprender sobre el estilo de Elementor Forms.

Acciones en un formulario

Después de nuestra discusión sobre la creación de un formulario en Elementor, veamos cómo configurar lo que sucede después de que se envía su formulario; esto se logra a través de acciones de formulario, o como se hace referencia a ellas en Elementor, Acciones después de enviar.

Cuando se envía un formulario, es común que el sistema envíe un correo electrónico y redirija al usuario a una página web diferente. Por supuesto, puede incluir tantas acciones como desee en sus formularios y combinarlas de la forma que desee. Como era de esperar, hay un campo selector específico sin codificación involucrada.

Cada una de las acciones que agregue aparecerá como una opción de pestaña separada en el menú principal. Actualmente tenemos una opción de pestaña para correo electrónico, pero si tuviera que incluir una redirección en el campo Agregar acción, también veríamos redirección en mis opciones de la ficha, como se muestra en la ex amp le adelante.

Para concluir, demostraré cómo configurar el formulario para aceptar envíos por correo electrónico, la pregunta más frecuente sobre formularios.

Cuando seleccione Correo electrónico en la pestaña Contenido en el editor, se le presentará la pantalla que se muestra a continuación; aquí es donde puede personalizar el correo electrónico de remitente y el correo electrónico de respuesta, y también puede agregar un CC o CCO a cualquier persona que deba recibir una copia de los envíos del formulario.

Creación de una plantilla de mensajería de formulario de contacto en Elementor 

Mucha gente se sorprende al saber que el editor de formularios de Elementor es más poderoso de lo que parece a primera vista, y una de las características más avanzadas es la capacidad de personalizar la mensajería para cada formulario.

Es posible personalizar los mensajes del formulario para proporcionar un proceso de retroalimentación más personalizado al usuario final que ha completado su formulario, en lugar de sonar como un robot aburrido. Pero, específicamente, los mensajes que puede personalizar para su formulario de contacto de Elementor son los siguientes:

Para comenzar, primero debe habilitar la mensajería personalizada seleccionando "Opciones adicionales" en el menú desplegable y luego cambiando el interruptor de palanca de "Mensajería personalizada" a "Sí".

Personalización del widget del formulario de contacto de Elementor agregando mensajes personalizados

Como puede ver, hay cuatro mensajes diferentes que puede personalizar, incluidos los que se enumeran a continuación:

Se muestra un mensaje de éxito al usuario final después de enviar el formulario y verificar que el formulario se completó correctamente (por ejemplo, que no faltan campos obligatorios, etc.).

Mensaje de error: mensaje que se muestra al usuario final cuando se produce un error desconocido durante el envío del formulario.

Mensaje obligatorio: aparece cuando no se completa un campo de formulario obligatorio, se envía el formulario y no se completa el formulario.

Cuando algo dentro del envío del formulario es incorrecto y no se puede enviar, se muestra al usuario final el mensaje Mensaje no válido.

Poder editar los mensajes le permite ser creativo y peculiar, o más formal y empresarial si tiene un sitio corporativo. La mejor parte es que son completamente editables, ¡así que puedes hacer lo que quieras!

Conclusión

Widget de formulario de Elementor, es fácil construir un formulario de contacto. Viene con un generador de formularios de contacto intuitivo de arrastrar y soltar y una gran cantidad de opciones de personalización que lo distinguen de los otros plugin formularios de contacto disponibles en el mercado. Puede personalizar fácilmente su estilo y combinación de colores para que coincida con la apariencia de su empresa. También se incluyen varios otros widgets atractivos, más de 300 plantillas profesionales y un generador de ventanas emergentes en un paquete conveniente. Este creador de páginas de WordPress con todas las funciones consta de todos los widgets y funciones necesarios, por lo que no tendrá que comprar creadores de páginas adicionales para personalizar aún más su sitio web. Además, permite la integración de más de 30 servicios de marketing, por lo que es uno de los plugin más comprados en el mercado hoy en día.

Deja un comentario

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