En este artículo te voy a enseñar, paso a paso y sin rollos, cómo crear un formulario de contacto profesional para tu web de WordPress usando Elementor Pro. Porque un formulario no es solo poner un campo de nombre y otro de email, ¿vale? Es una de las principales herramientas de conversión de tu negocio y hay que hacerlo bien.

Llevo años diseñando webs para clientes y, te lo digo de verdad, el formulario de contacto es uno de los elementos que más se descuida. He visto proyectos donde el formulario no llegaba al correo, o donde el diseño era tan malo que nadie se molestaba en rellenarlo. Por eso, en mis proyectos, le dedico un tiempo específico a configurarlo en condiciones. No es magia, pero hay detalles que marcan la diferencia entre un formulario que funciona y uno que es un desastre total.

Por qué necesitas Elementor Pro (y no vale con la versión gratis)

¿Por qué te digo esto? Pues porque mucha gente empieza con la versión gratuita de Elementor, que está muy bien para probar. Pero cuando quieres dar el salto y tener un formulario profesional, integrado y que realmente haga lo que tiene que hacer, te topas con un muro. La versión gratuita no trae un constructor de formularios nativo.

¿Qué haces entonces? La gente suele tirar de plugins de terceros, que a veces funcionan y a veces no, o intentan apañarlo con widgets básicos que no están pensados para eso. Es un lío. Y lo peor es que cada plugin que añades es un punto más de fricción, algo más que puede romperse con una actualización. Yo lo he visto, y es un dolor de cabeza.

La ventaja del widget nativo de formularios de Elementor Pro es que está hecho para funcionar dentro del propio constructor. Se arrastra, se suelta y ya está. No tienes que estar sincronizando plugins, ni configurando integraciones raras. Además, el widget de formularios es una característica exclusiva de Elementor Pro, no está disponible en la versión gratuita. Es una de las razones por las que la licencia Pro merece la pena, sobre todo si tu web vive de que la gente te contacte.

No te estoy vendiendo nada, te lo digo desde la experiencia. Cuando trabajas con clientes, necesitas herramientas fiables. Y Elementor es el constructor de páginas más popular para WordPress, con más de 12 millones de instalaciones activas por algo. Su ecosistema, incluido el formulario, está probado y funciona. Yo no sé programar, ¿vale? Por eso busco herramientas que me den fiabilidad sin tener que tocar código.

Arrastra, suelta y empieza: tu primer formulario en 2 minutos

Vale, vamos al lío. Esto es lo más fácil del mundo, pero hay que saber dónde mirar.

  1. Abre el editor de Elementor en la página donde quieras poner el formulario. En la columna izquierda de widgets, busca «Form». No es «Contact Form 7» ni «WPForms», es simplemente «Form». Es el widget nativo.
  2. Arrástralo y suéltalo donde quieras que aparezca. Verás que automáticamente se crea una estructura por defecto con cuatro campos: Nombre, Email, Mensaje y el botón de Enviar.
  3. Aquí viene el primer cambio que yo hago siempre. El campo «Mensaje» por defecto es un campo de texto de una sola línea. Eso no sirve para un mensaje largo. Pincha sobre el formulario para editar sus campos, localiza el campo «Mensaje» y cámbialo de «Texto» a «Textarea». Así se convierte en un cuadro de texto grande donde la gente pueda escribir cómodamente. Es un detalle tonto, pero mejora mucho la usabilidad.

Y ya está. En menos de dos minutos tienes un formulario funcional en tu página. Pero claro, esto es solo el esqueleto. Ahora vamos a darle forma para que sea profesional.

Configuración de campos: de lo básico a lo profesional

Un formulario de contacto básico necesita tres cosas: saber quién es la persona, cómo contactarle y qué quiere. Pero según tu negocio, puede que necesites más. Vamos a verlo por partes.

Campos esenciales (Nombre, Email, Mensaje) Estos son no negociables. Pero ojo con cómo los configuras. * Nombre: Déjalo como campo de texto simple. No hace falta separar nombre y apellidos, a menos que sea crítico para tu negocio (por ejemplo, para enviar facturas). Más campos = más fricción. * Email: Este campo debe tener la validación activada por defecto. Comprueba que en sus ajustes esté marcada la opción de validar como email. Así evitas que la gente ponga «hola@hola» y se quede sin respuesta. * Mensaje: Como te dije, que sea un «Textarea». Yo también suelo poner un «Placeholder» que diga algo como «¿En qué puedo ayudarte?» para dar una pista de qué esperas.

Campos avanzados (Teléfono, Dropdown, Fecha) Aquí es donde personalizas. ¿Eres un fontanero y necesitas que te digan cuándo pueden estar en casa? Añade un campo de «Fecha». ¿Eres una consultoría y quieres saber cómo te encontraron? Añade un «Dropdown» (lista desplegable) con opciones como «Google», «Recomendación», «Redes Sociales». * Teléfono: Útil si tu negocio es por llamada. Hazlo «Requerido» solo si de verdad lo vas a usar. Si no, déjalo opcional. * Dropdown: Perfecto para segmentar leads desde el primer momento. Las opciones deben ser claras y excluyentes. * Campo de Número o campo de Fecha: Ideales para servicios donde el presupuesto o la fecha son clave. Son dos widgets distintos en Elementor («Número» y «Fecha»), pero ambos son muy sencillos de usar y cumplen funciones específicas.

El checkbox de aceptación de la RGPD (esto es obligatorio) Esto no es una opción, es obligatorio por ley. Tienes que añadir un campo de tipo «Aceptación». En el texto, enlaza a tu página de política de privacidad y deja claro para qué usas los datos: «Acepto la política de privacidad y doy mi consentimiento para que mis datos sean tratados con el fin de responder a mi consulta». Este campo debe ser obligatorio para poder enviar el formulario. Si no lo pones, no solo estás incumpliendo la ley, sino que además estás dando una imagen de despreocupación total con los datos de tus clientes. Tienes, de verdad te lo digo, que tener mucho cuidado con estos detalles tan tontos.

Acciones tras el envío: lo que pasa cuando alguien pulsa ‘Enviar’

¿Por qué te digo que esto es lo más importante? Pues porque de nada sirve un formulario bonito si los mensajes se pierden en el limbo o la persona se queda con la duda de si se envió. Es como tener un buzón de correo roto, ¿vale? La gente tira la carta y nunca llega. Hay que configurar tres cosas para que esto no pase.

Configurar el email que tú recibes (To, Subject, From) En la pestaña «Acciones tras el envío» del formulario, lo primero es el «Email». En «To» (Para) pon tu email de negocio. En «Subject» (Asunto) puedes personalizarlo. Yo uso algo como Nuevo contacto de web: [nombre] usando los «shortcodes» que te da Elementor, como [field id="nombre"]. Así ves de quién es el email nada más llegar a tu bandeja. El «From» (De) es crucial. Pon un email de tu propio dominio, como noreply@tudominio.com. Si dejas el genérico de WordPress, es más probable que el email acabe en spam. Y en el cuerpo del mensaje, incluye todos los campos del formulario para tener toda la información de un vistazo.

El email de confirmación para el cliente (Email 2) Esto es un plus que marca la diferencia profesional. Es el «Email 2» en la configuración. Actívalo y configúralo para que se envíe al email que la persona puso en el campo «Email» del formulario. El asunto puede ser «Hemos recibido tu mensaje» y en el cuerpo le das las gracias, le dices que responderás en un plazo (24-48 horas, por ejemplo) y le ofreces un contacto alternativo si es urgente. Esta confirmación automática genera confianza. La persona sabe que su mensaje no se perdió y tú te quitas presión porque ya has dado una primera respuesta.

Redirigir a una página de ‘Gracias’ (esto mejora la experiencia) En lugar de mostrar el mensajito de «Gracias por tu mensaje» justo debajo del formulario (que a veces pasa desapercibido), crea una página específica en tu web llamada «Gracias por contactar». En las acciones del formulario, elige «Redirigir a una URL» y pon el enlace a esa página. En esa página puedes agradecer el contacto, repetir tu plazo de respuesta y, sobre todo, sugerirle algo más: «Mientras tanto, échale un ojo a mi blog» o «¿Quieres ver algunos de mis proyectos?». Es una oportunidad para guiarle dentro de tu web y reducir la tasa de rebote. Es un detalle de usabilidad bestial.

Dale estilo: que tu formulario no parezca de los años 90

Elementor te da un control brutal sobre el diseño, pero con poder viene la responsabilidad. No te vuelvas loco.

Ajustes básicos en la pestaña ‘Estilo’ Aquí controlas el aspecto general. Lo primero: el espaciado. Los campos deben respirar. Aumenta el «Padding» interno de cada campo para que el texto no esté pegado a los bordes, y el «Margin» entre campos para que no se amontonen. Un formulario apretujado da pereza rellenarlo. La tipografía debe ser la misma que usas en el resto de tu web. No inventes una fuente nueva solo para el formulario. Coherencia ante todo. El tamaño de fuente debe ser legible, especialmente en móvil.

Espaciado, tipografía y colores coherentes con tu web Los colores son clave. El color del borde y del texto de los campos debe tener suficiente contraste con el fondo. Si tu web tiene un color corporativo, úsalo para el borde en estado «activo» (cuando alguien pincha en un campo). Eso da un feedback visual muy profesional. El color de fondo del campo puede ser blanco o un gris muy clarito. Nada de fondos oscuros con letras claras a no ser que tu web tenga un diseño oscuro total. La legibilidad es lo primero.

Personalizar el botón de enviar El botón es la culminación, la llamada a la acción. No puede ser un rectángulo gris soso. Usa tu color corporativo más llamativo para el fondo. Cambia el texto de «Enviar» por algo más concreto como «Enviar mensaje» o «Solicitar información». Ajusta su «Border Radius» un poco para darle esquinas ligeramente redondeadas (unos 4-5 píxeles), que son más amigables visualmente que las esquinas totalmente cuadradas. Y, muy importante, dale un «Hover Effect». Que cuando el ratón pase por encima, cambie ligeramente de color o se oscurezca. Es una señal interactiva que invita a hacer clic.

Errores comunes que arruinan tu formulario (y cómo solucionarlos)

He visto estos fallos una y otra vez. Son fáciles de evitar si los conoces.

  • El email no llega (problemas de configuración SMTP). Este es el rey de los problemas. Tu hosting puede no estar configurado para enviar emails de forma fiable, sobre todo los de formularios. La solución no es complicar la configuración de Elementor, es instalar un plugin de SMTP. Plugins como «WP Mail SMTP» te permiten configurar el envío de correos usando un servicio fiable (incluso el SMTP de tu Gmail o Outlook). Es lo primero que hago en cualquier web. Sin esto, puedes estar perdiendo consultas sin saberlo.
  • El formulario se ve mal en móvil (responsive). Lo diseñas en ordenador y en el móvil los campos se salen de la pantalla o el botón se ve minúsculo. Siempre, siempre, revisa el formulario en la vista móvil del editor de Elementor. Ajusta el ancho de las columnas si es necesario y comprueba que los tamaños de fuente y el padding sean suficientes para tocar con el dedo sin equivocarse.
  • Falta el aviso legal RGPD. Ya lo he dicho antes, pero insisto. No es solo un checkbox. Tienes que tener una página de política de privacidad en condiciones, accesible desde el footer de tu web, y el checkbox del formulario debe enlazarla y describir el tratamiento de datos de forma específica. Si solo pones «Acepto los términos», no vale. Esto no es una broma, puede acarrear multas serias y, sobre todo, daña la confianza de quien te quiere contactar.

Más allá del contacto: otros usos para el formulario de Elementor

La potencia de este widget es que no solo sirve para contacto. Con los campos adecuados, puedes crear todo tipo de formularios sin instalar nada más.

Formulario de presupuesto ¿Eres autónomo o tienes una pequeña empresa? En vez de un contacto genérico, crea una página de «Solicitar presupuesto». Usa campos como «Dropdown» para el tipo de servicio, «Campo de número» para un presupuesto aproximado que tenga el cliente, «Fecha» para cuándo lo necesitan y «Subida de archivos» para que puedan adjuntar un plano o una foto. Así recibes leads mucho más cualificados desde el minuto uno.

Formulario de suscripción a newsletter No hace falta usar Mailchimp o MailerLite directamente en la página (aunque luego lo integres). Puedes crear un formulario sencillo solo con «Email» y el checkbox RGPD específico para marketing («Acepto recibir comunicaciones comerciales…»). Luego, en las acciones tras el envío, puedes redirigir a una página de «Gracias por suscribirte» y, con un plugin de integración, añadir ese email automáticamente a tu lista. Es más limpio y controlado.

Formulario de registro para un evento Si haces un webinar o un taller presencial, crea una página de registro. Campos: Nombre, Email, Empresa (opcional), Dropdown para seleccionar la sesión a la que asistirá. Luego, configura el «Email 2» para que sea el ticket de confirmación, con los detalles del evento. Es profesional, está todo integrado en tu web y no dependes de herramientas externas de pago para algo sencillo.

Como ves, no es solo arrastrar un widget. Hay una lógica detrás de cada campo, cada ajuste de estilo y cada acción tras el envío. Un formulario bien hecho es un embudo de conversión que trabaja para ti las 24 horas. Si le dedicas este tiempo a configurarlo bien, te ahorrarás dolores de cabeza y, lo más importante, no perderás oportunidades de negocio por un fallo tonto.

Si te ha quedado alguna duda o quieres profundizar más en el diseño web con Elementor, en mi canal de YouTube subo guías prácticas como esta sin cortes y sin rollos. Y si necesitas una mano profesional para que tu web (y su formulario) estén a punto para convertir, ya sabes dónde estoy.