Cómo crear un formulario de contacto gratuito con Elementor (La forma fácil)

¿Quieres crear un formulario de contacto gratuito de Elementor?

Un formulario de contacto es vital para todo tipo de sitios web. Al incluir los campos apropiados en tu formulario, puedes recopilar la información exacta que necesitas de tus clientes potenciales, asegurando una comunicación efectiva.

En este tutorial, te mostraré la mejor manera de agregar un formulario de contacto a tu página de Elementor de forma gratuita. ¡Esta opción funciona muy bien con todas las versiones de Elementor y no requiere código!

Cómo crear un formulario de contacto gratuito de Elementor

Elementor facilita el diseño de una página de contacto, pero no te proporcionará un formulario de contacto funcional de forma gratuita por sí solo. Lo combinarás con un plugin de formularios gratuito para gestionar el formulario en sí, y toda la configuración lleva unos cinco minutos de principio a fin.

La razón por la que necesitas un segundo plugin se reduce al coste. El widget de formularios integrado de Elementor está bloqueado detrás de Elementor Pro, la versión de pago, y Elementor gratuito no incluye ningún formulario de contacto.

Así que, en lugar de actualizar solo para recopilar mensajes, añadirás uno gratis con WPForms, que funciona con todas las versiones de Elementor. Si quieres el análisis completo, aquí tienes cómo se comparan los formularios de Elementor con WPForms.

Paso 1: Instalar y activar WPForms

Para añadir un formulario de contacto a Elementor de forma gratuita, lo combinarás con un plugin de formularios, y WPForms es el que utilizo siempre.

Es el creador de formularios más fácil de usar para principiantes en WordPress, y el constructor de arrastrar y soltar tiene sentido en el momento en que lo abres.

Lo que más me gusta es que la versión gratuita WPForms Lite es más que suficiente para un formulario de contacto. La integración de WPForms con Elementor te permite colocar cualquier formulario que crees directamente en una página de Elementor.

Lo primero que querrás hacer es instalar el plugin WPForms. Para ello, abre tu panel de WordPress y navega a Plugins » Añadir nuevo.

Ahora, busca WPForms y haz clic en Instalar cuando lo encuentres. La instalación solo tomará unos segundos.

Una vez hecho esto, el botón Instalar ahora dirá Activar. Pulsa Activar para terminar de configurar WPForms en tu sitio. ¡Así de simple!

¡Genial! WPForms ya está listo para usarse en tu sitio. Antes de crear tu primer formulario, instalemos Elementor.

Prueba WPForms gratis

Paso 2: Obtén el plugin de WordPress Elementor

Puedes instalar Elementor siguiendo exactamente los mismos pasos que se describen arriba. Simplemente ve a Plugins » Añadir nuevo, busca Elementor e instálalo.

Con las instalaciones hechas, ahora puedes continuar y crear tu formulario de contacto, como te mostramos en el siguiente paso.

Paso 3: Crea tu formulario de contacto de Elementor

Puedes empezar a crear tu formulario de contacto inmediatamente navegando a WPForms » Añadir nuevo.

Esto cargará el constructor de WPForm en unos segundos. Empieza por nombrar tu formulario para que puedas identificarlo fácilmente si más tarde necesitas hacer alguna edición.

Desplázate un poco hacia abajo y verás las plantillas de formularios. Si estás usando WPForms Lite, tendrás docenas de plantillas gratuitas para elegir.

Más adelante, puedes actualizar a Pro para acceder a más de 2100 plantillas de formularios de WordPress para atención al cliente, marketing y otras categorías diversas.

Como necesitamos un formulario de contacto, la Plantilla de Formulario de Contacto Sencillo gratuita es ideal para nuestros propósitos en esta publicación.

Puedes buscar esta plantilla en el cuadro de búsqueda y hacer clic en el botón Usar plantilla cuando aparezca en tu pantalla.

Después de haber elegido una plantilla, se abrirá el constructor de WPForms. La interfaz de usuario de WPForms está diseñada para ser súper fácil de usar para cualquiera.

A la izquierda, puedes ver todos los campos que están disponibles para agregar a tu formulario de contacto. A la derecha, puedes ver una vista previa en vivo de tu formulario.

Si deseas personalizar la plantilla, simplemente arrastra cualquier campo del formulario desde el panel izquierdo al formulario de la derecha.

Puedes a tilde;adir listas desplegables y preguntas de opci ilde;n m ilde;ltiple, adem ilde;s de arrastrar campos hacia arriba y abajo para moverlos en tu formulario.

Si quieres abrir la configuraci ilde;n del campo, haz clic en el campo una vez en el constructor. La configuraci ilde;n aparecer ilde; junto a la vista previa del formulario en el panel izquierdo.

Haz clic en cada campo para configurarlo como quieras. Cuando hayas terminado, haz clic en Guardar en la parte superior.

ilde{iquest;}Prefieres crear un formulario de registro? Tenemos un tutorial aparte para crear un formulario de registro personalizado con Elementor.

WPForms te ofrece todo tipo de comodidades. Por ejemplo, ilde;incluso puedes usarlo como puerta de enlace para conectar Formularios de Elementor con Google Sheets!

Paso 4: Configura el correo electrónico y el mensaje de confirmación del formulario

Ahora veamos los mensajes que se enviar ilde;n cuando se env ilde;e el formulario. En el constructor de formularios, haz clic en Ajustes y luego en el elemento de men ilde; Notificaciones a la izquierda.

A la derecha, puedes ver el correo electr ilde;nico de notificaci ilde;n que se te enviar ilde; cuando se env ilde;e tu formulario. Puedes personalizar el correo electr ilde;nico aqu ilde; si quieres.

ildeiquest;}Te has dado cuenta de que el correo electr ilde;nico se enviar ilde; a {admin_email}? Es un marcador de posici ilde;n para la direcci ilde;n de correo electr ilde;nico del Administrador en WordPress.

Puedes eliminar {admin_email} y escribir aqu ilde; tu direcci ilde;n de correo electr ilde;nico de empresa, o cambiar la direcci ilde;n de correo electr ilde;nico del administrador en WordPress si es incorrecta.

A continuaci ilde;n, haz clic en Confirmaciones. En esta pantalla, podemos personalizar el mensaje que aparece en el front-end cuando se env ilde;a el formulario.

Esto es opcional, as ilde; que puedes dejar el mensaje predeterminado si est ilde;s contento con ilde;l.

Y eso es todo! Es hora de hacer clic en el bot ilde;n Guardar en la parte superior. Puedes cerrar el constructor de formularios haciendo clic en la X en la parte superior derecha de la ventana del constructor de formularios.

ilde;Genial! Tu formulario de Elementor est ilde; listo y solo necesitamos publicarlo para que se active y empiece a recopilar informaci ilde;n.

Paso 5: Crea tu página de contacto de Elementor

En este paso, crearemos una p ilde;gina de Contacto personalizada usando Elementor. Desde el panel de WordPress, haz clic en P ilde;ginas y luego pulsa el bot ilde;n A tilde;adir nueva.

Ve y escribe el t ilde;tulo de tu p ilde;gina en la parte superior. Despu ilde;s de eso, haz clic en el bot ilde;n azul Editar con Elementor.

Esto iniciar ilde; la interfaz del constructor de p ilde;ginas de Elementor, donde puedes a tilde;adir un formulario de contacto y personalizar otros elementos de la p ilde;gina.

Espera unos segundos a que Elementor se cargue en tu navegador. A la izquierda, ver ilde;s diferentes elementos que puedes a tilde;adir a tu p ilde;gina.

Busca en la secci ilde;n B ilde;sica para encontrar el bloque WPForms, que puedes usar para a tilde;adir el formulario que creaste anteriormente.

Arrastra y suelta el bloque WPForms en tu p ilde;gina, luego haz clic en el desplegable para seleccionar el formulario que acabas de crear.

Tan pronto como selecciones el formulario, aparecer ilde; en la p ilde;gina. ilde;Genial! Y hemos terminado de usar el constructor de formularios. Todo lo que necesitamos hacer ahora es publicar la p ilde;gina de Contacto.

Paso 6: Diseña y publica tu página de contacto de Elementor

Publicar la p ilde;gina de contacto es muy f ilde;cil con Elementor. Pero ilde;sab ilde;as que tambi ilde;n puedes dar estilo a tu formulario usando las opciones del bloque WPForms de Elementor?

Para hacer eso, haz clic en el área alrededor del formulario incrustado en tu página para abrir las opciones de bloque en el panel izquierdo. Luego haz clic en la pestaña Estilo.

Debajo de esta pestaña, verás los muchos Temas proporcionados que tienen la imagen de fondo, colores y otras opciones de estilo listas para ti.

O, puedes usar las opciones debajo de ella para cambiar manualmente los estilos de tu campo, etiqueta o botón.

Por ejemplo, utilizamos la configuración de Estilos de botón para aumentar el tamaño, el radio del borde y el color del botón en solo unos clics.

Puedes acceder a opciones aún más avanzadas haciendo clic en la pestaña Avanzado. Esto incluye configuraciones para diseños de formularios, efectos de movimiento, fondos de página y más.

Cuando hayas terminado de personalizar los estilos del formulario, es hora de publicar tu formulario. Simplemente haz clic en el botón Publicar en la barra de herramientas inferior.

Finalmente, haz clic en Echar un Vistazo para ver tu formulario de contacto en tu sitio web. ¡Y eso es todo! Tu página de contacto de Elementor está en vivo y lista para recibir respuestas.

Crea tu formulario de contacto de Elementor gratuito

Haz que tu formulario de contacto de Elementor sea a prueba de spam

Un formulario de contacto público atraerá spam tarde o temprano, por lo que bloquearlo antes de que los bots lo encuentren te ahorra una limpieza posterior. La buena noticia es que cada formulario de WPForms viene con protección contra spam integrada activada por defecto.

Esto incluye un honeypot anti-spam oculto que atrapa bots básicos sin que tus visitantes tengan que resolver un molesto acertijo. Si tu formulario empieza a recibir más spam del que la protección predeterminada puede manejar, puedes añadir otra capa.

WPForms también admite un token anti-spam moderno, reCAPTCHA, hCaptcha y Cloudflare Turnstile en sus planes de pago, por lo que puedes elegir el método que mejor se adapte a tu audiencia.

Esa protección desde el primer día es una gran razón para elegir WPForms aquí. Un formulario de contacto es uno de los objetivos más fáciles en tu sitio para los bots, y el honeypot se encarga silenciosamente de la mayoría de ellos en segundo plano.

Específicamente para usuarios de Elementor, aquí te mostramos cómo bloquear spam en tus formularios de Elementor con Akismet.

Preguntas frecuentes sobre la creación de un formulario de contacto de Elementor

Los formularios de contacto de Elementor aparecen con frecuencia en nuestros comentarios y solicitudes de soporte. Aquí tienes respuestas a las preguntas que los lectores hacen con más frecuencia.

¿Tiene Elementor un formulario de contacto?

Sí, pero solo en la versión de pago. El bloque de formularios de Elementor forma parte de Elementor Pro, por lo que el plugin gratuito por sí solo no te permitirá crear un formulario de contacto.

La buena noticia es que puedes añadir uno gratis usando el bloque de WPForms en su lugar. Necesitarás tener instalados WPForms y Elementor para acceder al bloque de WPForms mientras editas tu página en Elementor.

¿Cómo añado un formulario de contacto en Elementor gratis?

Para añadir un formulario de contacto usando la versión gratuita de Elementor, integra un plugin como WPForms. Primero, instala y activa el plugin WPForms desde tu panel de WordPress. Una vez activado, crea un formulario usando el constructor de WPForms, luego arrastra el bloque de WPForms a tu página de Elementor y selecciona tu formulario.

¿Cómo creo un formulario en Elementor?

Crear un formulario en Elementor se puede hacer fácilmente con el plugin WPForms. Instala WPForms desde tu sección de plugins de WordPress y actívalo. Luego usa la interfaz de arrastrar y soltar de WPForms para construir tu formulario antes de añadirlo a cualquier página de Elementor.

¿Cómo creo un formulario de contacto personalizado en Elementor?

WPForms es una excelente opción para crear un formulario de contacto personalizado en Elementor debido a su flexibilidad y facilidad de uso. Después de instalar y activar WPForms, abre el plugin y selecciona Añadir nuevo para crear tu formulario personalizado.

Personaliza tu formulario añadiendo o eliminando campos según tus necesidades. Una vez que hayas terminado, guarda el formulario. En Elementor, añade el bloque de WPForms en la página donde quieras el formulario, selecciona tu formulario y publica la página.

Solucionar correos electrónicos de notificación de formularios de contacto de Elementor

¿Tienes problemas para recibir envíos de formularios de contacto de Elementor por correo electrónico? Es fácil solucionar este problema para que siempre recibas tus notificaciones por correo electrónico. Echa un vistazo a esta guía para solucionar formularios de contacto de Elementor que no envían correos electrónicos.

Y si quieres aprender sobre algunos constructores de formularios adicionales para Elementor, consulta este artículo sobre plugins de formularios de contacto que funcionan bien con Elementor para mejorar la participación del usuario en los formularios y, en última instancia, la generación de leads.

Obtén WPForms gratis

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.

Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.