Cree y diseñe formularios con el widget de formulario Elementor

¡Cada sitio web debe incluir un formulario de contacto! Los formularios de contacto son útiles para diversos propósitos, sin importar el tipo de sitio web que tenga. Pueden generar clientes potenciales, construir 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 atractivos.

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 creador de formularios Elementor, echemos un vistazo rápido a algunas de sus características más esenciales.

Para empezar, una de las características más distintivas es que está completamente integrada en la interfaz de Elementor, lo que significa que tiene acceso a muchas opciones de diseño/estilo/diseño disponibles en Elementor. No creo que encuentres un plugin de formulario independiente con un sistema de diseño tan sólido como este.

Desde allí, puedes 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.
  • Sólo 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, lo que resulta beneficioso para 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 el cliente para ayudarle a aprovechar al máximo sus formularios. También hay una integración general de Zapier que le permite conectarse a cualquiera de las miles de herramientas disponibles en la plataforma Zapier si su herramienta no aparece en la lista.

También existen algunas otras alternativas interesantes. Por amp , cuando alguien completa su formulario, puede recibir notificaciones a través de Slack o Discord.

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 usted 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 en la ubicación donde queremos crear nuestro formulario.

Cómo crear un formulario Elementor

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

Formar elementos de Elementor de forma estructurada

Una vez que su formulario esté listo, 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 puede ver en el amp siguiente, los formularios incluyen algunos campos predeterminados. 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 delante del otro, y haciendo clic en él. 

Tipos de campos en un formulario

Hay muchos tipos de campos de formulario disponibles, desde campos de texto simples hasta contraseñas, ReCaptcha y campos 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 campos disponibles.

Tipos de campos en un formulario de 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 diseñar

Diseñe sus formularios en Elementor de la misma manera que diseña otros widgets navegando 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 necesiten aprender sobre cómo diseñar Elementor Forms.

Acciones en un formulario

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

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, puedes incluir tantas acciones como quieras en tus formularios y combinarlas de la forma que quieras. Como es de esperar, hay un campo selector específico que no requiere codificación.

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 incluyera una redirección en el campo Agregar acción, también vería Redirigir en las opciones de mi pestaña, como se muestra en el amp siguiente.

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

Cuando selecciona Correo electrónico en la pestaña Contenido del editor, se le presentará la pantalla que se muestra a continuación; aquí es donde puede personalizar el correo electrónico de origen 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.

Crear una plantilla de mensajes 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 los mensajes para cada formulario.

Es posible personalizar los mensajes del formulario para brindar un proceso de retroalimentación más personalizado al usuario final que completó su formulario, en lugar de parecer un robot aburrido. Pero, específicamente, los mensajes que puedes personalizar para tu 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 "Mensajería personalizada" a "Sí".

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

Como puedes ver, hay cuatro mensajes diferentes que puedes 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 se completó correctamente (por ejemplo, que no faltan campos obligatorios, etc.).

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

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

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

Poder editar los mensajes le permite ser creativo y peculiar, o más formal y profesional 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 Elementor, es sencillo crear un formulario de contacto. Viene con un creador de formularios de contacto intuitivo de arrastrar y soltar y una gran cantidad de opciones de personalización que lo distinguen de otros plugin de formularios de contacto disponibles en el mercado. Puede personalizar fácilmente su estilo y combinación de colores para que coincidan con la apariencia de su empresa. También se incluyen otros atractivos widgets, 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 actual.

Hanson F.

Mensajes recientes

Cómo usar encabezados y pies de página con Elementor

Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...

6 de enero de 2022

Comparación de temas de WordPress: Astra vs OceanWP

Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…

2 de enero de 2022

Comparación de temas de noticias de WordPress: periódico vs. Astra

Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…

25 de octubre de 2021

Cree un sitio web relacionado con noticias con Newspaper Theme

El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…

18 de octubre de 2021

Cómo construir un comercio electrónico con el constructor Avada WooCommerce

Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…

4 de octubre de 2021

Cómo usar encabezados fijos y efectos de desplazamiento con Elementor

Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web,…

21 de septiembre de 2021