Si llevas un tiempo con WordPress, lo más probable es que en algún momento te hayas preguntado cómo añadir un formulario de contacto decente a tu web. La verdad es que parece más complicado de lo que es, y hoy te lo voy a explicar todo desde cero con Contact Form 7, el plugin de toda la vida, que es gratuito, ligero y funciona de maravilla.
Vamos paso a paso para que puedas tenerlo listo en menos de 10 minutos, aunque no tengas ni idea de programación.
¿Por qué usar Contact Form 7?
A ver, hay un montón de plugins para crear formularios en WordPress: WPForms, Gravity Forms, Ninja Forms… Pero Contact Form 7 lleva años siendo el más descargado del repositorio oficial, y no es por casualidad.
Sus ventajas principales:
- Es completamente gratuito (sin funciones de pago ocultas para lo básico)
- Es muy ligero y no ralentiza tu web
- Tiene una comunidad enorme detrás, o sea, cualquier duda que tengas ya la ha resuelto alguien antes
- Se integra perfectamente con otros plugins como Flamingo (para guardar los mensajes) o con herramientas de email marketing
La verdad es que, para la mayoría de webs —especialmente para pequeños negocios o proyectos personales— Contact Form 7 es más que suficiente. No necesitas pagar por algo premium si lo que quieres es un formulario de contacto funcional y bonito.
Paso 1: Instalar y activar Contact Form 7
Lo primero, claro, es tener el plugin instalado. Si aún no lo tienes, ve a tu panel de WordPress y sigue estos pasos:
- Ve a Plugins > Añadir nuevo
- En el buscador escribe «Contact Form 7»
- Haz clic en Instalar ahora
- Una vez instalado, haz clic en Activar
Listo. En el menú lateral de tu panel de WordPress te aparecerá ahora una nueva sección llamada «Contacto». Haz clic ahí y verás que ya hay un formulario creado por defecto que puedes usar o editar a tu gusto.
Paso 2: Crear (o editar) tu formulario de contacto
Al entrar en Contacto > Formularios de contacto, verás el formulario por defecto que trae Contact Form 7. Puedes editarlo directamente o crear uno nuevo desde cero. Para la mayoría de casos, con editarlo es más que suficiente.
Haz clic en Editar y entrarás a la pantalla de configuración del formulario. Aquí es donde está la chicha.
¿Qué campos deberías incluir?
Aquí te doy un consejo muy importante que aplico siempre en los proyectos de mis clientes: pide lo menos posible.
Es que está demostrado que cuantos más campos tiene un formulario, menos gente lo rellena. Parece obvio, pero hay webs con formularios que parecen un cuestionario del médico. Nombre, apellidos, teléfono, email, empresa, asunto, mensaje, horario de contacto preferido… ¡Para! Eso espanta a la gente.
Mi recomendación para la gran mayoría de negocios es quedarse con tres campos:
- Nombre
- Correo electrónico
- Mensaje (opcional, incluso)
Con eso tienes suficiente para que alguien te contacte. Si necesitas llamarles, ya les pedirás el teléfono por email una vez hayan contactado. Es más, hay sectores donde sí tiene sentido pedir el teléfono desde el formulario —como en inmobiliaria o en servicios de alto valor donde el contacto es principalmente por llamada—, pero en general, menos es más.
El código del formulario
En la pestaña Formulario dentro del editor, verás un área de texto con código. Este es el shortcode que construye los campos del formulario. Puedes sustituirlo por este que ya tengo preparado y que funciona perfectamente:
<label> Nombre
[text* your-name autocomplete:name ] </label>
<label> Correo electrónico
[email* your-email autocomplete:email] </label>
<label> Mensaje (opcional)
[textarea your-message] </label>
[acceptance acceptance-281] He leído y acepto la <a href="https://muyseo.com/politica-de-privacidad/" rel="nofollow" target=”_blank”>política de privacidad </a> [/acceptance]
[submit "Enviar"]
⚠️ Importante: Cambia la URL de la política de privacidad por la tuya. No la dejes con la de ejemplo o tendrás un problema legal serio.
La casilla de aceptación de política de privacidad
Es obligatoria por ley (RGPD). No es opcional ni «recomendable», es que sin ella estás incumpliendo la normativa europea de protección de datos. La línea [acceptance] del código de arriba ya la incluye, así que no te preocupes.
En Contact Form 7, este tipo de campo se llama «Aceptación» (no «casilla de verificación», que puede despistarte). Puedes añadirlo manualmente desde los botones del editor haciendo clic en Aceptación y configurando que sea obligatoria.
¿El campo del asunto? Yo me lo cargo
De hecho, en mis proyectos el campo «Asunto» no suele estar. Para un negocio pequeño o mediano, el asunto es redundante: ya sabes por qué te contactan (están en tu web de servicios, o en tu página de contacto). Total, que ese campo solo añade fricción sin aportar demasiado valor real.
Paso 3: Configurar el correo donde recibirás los mensajes
Una vez tienes el formulario montado, tienes que decirle a Contact Form 7 a qué email debe enviar los mensajes. Ve a la pestaña Correo dentro del editor del formulario.
Ahí verás varios campos:
- Para: el email donde quieres recibir los mensajes (el tuyo o el de tu cliente)
- De: por defecto usa el email de WordPress, está bien dejarlo así
- Asunto: puedes personalizarlo, por ejemplo:
Nuevo mensaje desde tu web: [your-name] - Cuerpo del mensaje: aquí se muestran los datos que ha enviado el usuario
Asegúrate de que el campo «Para» tiene la dirección correcta. Parece una tontería, pero anda que no he visto webs donde los formularios no funcionaban simplemente porque el email de destino estaba mal escrito.
Paso 4: Incrustar el formulario en una página
Con el formulario ya guardado, toca ponerlo en algún sitio de tu web para que la gente pueda usarlo. Contact Form 7 genera un shortcode que puedes pegar en cualquier página o entrada.
Verás el shortcode en la lista de formularios, tiene esta pinta:
[contact-form-7 id="abc123" title="Formulario de contacto 1"]
Cópialo. Luego ve a la página donde quieras añadirlo (por ejemplo, tu página «Contacto»), edítala con Gutenberg y añade un bloque de HTML personalizado. Pega ahí el shortcode. También puedes usar el bloque nativo de shortcode si lo prefieres.
Guarda y publica. Ya tendrás el formulario visible en tu web.
Paso 5: Darle estilo al formulario con CSS
Por defecto, Contact Form 7 tiene un diseño bastante soso. La verdad es que funciona, pero visualmente deja bastante que desear. La buena noticia es que con un poco de CSS lo puedes convertir en algo que parece hecho por un diseñador profesional.
Aquí tienes el CSS que uso habitualmente en mis proyectos. Es un diseño neutro que se adapta bien a casi cualquier web:
/* Estilo general del formulario */
.wpcf7-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Estilo de los campos de entrada */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 16px;
}
/* Estilo del botón de envío */
.wpcf7-form input[type="submit"] {
background-color: #56ABB0;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
Para añadir este CSS a tu web, ve a Apariencia > Personalizar > CSS adicional, pega el código ahí y dale a Publicar. Ya verás cómo cambia el aspecto.
¿Quieres cambiar el color del botón? En la línea background-color: #56ABB0; cambia el código hexadecimal por el color de tu marca. Si no sabes el código hex de tu color, puedes buscarlo en Google con «color picker» o pedirle a ChatGPT que te lo dé a partir de una descripción. También puedes simplemente poner nombres en inglés como black, coral, steelblue, etc.
Errores comunes al crear un formulario de contacto en WordPress
Después de haber montado formularios para decenas de webs de clientes, he visto los mismos fallos repetirse una y otra vez. Toma nota:
1. No probar el formulario antes de publicar
O sea, esto parece una obviedad pero te sorprenderías. Siempre rellena y envía el formulario tú mismo antes de darlo por terminado. Comprueba que el email de confirmación llega correctamente y que los datos se ven bien.
2. El formulario no envía emails
Este es, de lejos, el problema más frecuente con Contact Form 7. Tiene que ver con la configuración del servidor de correo y no con el plugin en sí. La solución más habitual es instalar un plugin de SMTP como WP Mail SMTP y configurarlo con las credenciales de tu proveedor de email. De hecho, yo lo instalo siempre junto con Contact Form 7, sin excepción.
3. No incluir la casilla de política de privacidad
Ya lo he dicho antes, pero lo repito porque es importante: sin esta casilla estás incumpliendo el RGPD. Ponla siempre y asegúrate de que enlaza a tu política de privacidad real, no a una de ejemplo.
4. Poner demasiados campos
Más campos = menos conversiones. Ya lo hemos hablado, pero merece la pena repetirlo. Piensa bien qué información necesitas realmente antes de añadir campos.
5. El formulario no está adaptado a móvil
El CSS que te he dado ya es responsive, pero si usas otro, comprueba siempre cómo se ve en móvil. Más de la mitad de las visitas a cualquier web hoy en día vienen de dispositivos móviles.
¿Y si quiero guardar los mensajes en la base de datos?
Por defecto, Contact Form 7 no guarda los mensajes que te envían. O sea, si hay algún problema con el email y el mensaje no llega, se pierde para siempre. Eso puede ser un problema serio.
La solución es instalar Flamingo, un plugin gratuito del mismo desarrollador de Contact Form 7 que guarda todos los mensajes en la base de datos de WordPress. Así siempre tendrás un histórico de todos los contactos, independientemente de si el email llegó o no.
Es más, te recomendaría instalarlo siempre. Es liviano, gratuito, y puede salvarte de más de un apuro.
Resumen: tu formulario de contacto perfecto en WordPress
Pues nada, ya tienes todo lo que necesitas para crear un formulario de contacto profesional en WordPress. Vamos a hacer un repaso rápido:
- Instala Contact Form 7 desde el repositorio de plugins de WordPress
- Edita el formulario y quédate solo con los campos esenciales (nombre, email, mensaje y casilla de privacidad)
- Configura el email de destino en la pestaña «Correo»
- Incrusta el formulario en tu página de contacto mediante shortcode
- Añade el CSS en Apariencia > Personalizar > CSS adicional
- Instala WP Mail SMTP para asegurarte de que los emails llegan bien
- Instala Flamingo para guardar los mensajes en la base de datos
- Prueba el formulario antes de dar el trabajo por terminado
Es más sencillo de lo que parece, de verdad. Si sigues estos pasos tendrás un formulario de contacto funcional, bonito y que cumple con la normativa vigente. Digamos que es una de esas tareas que, una vez sabes cómo hacerla, no te lleva más de 15-20 minutos.
Si tienes alguna duda, déjamela en los comentarios e intento ayudarte. Y si prefieres verlo en acción, tienes el vídeo completo arriba donde te lo enseño todo paso a paso en tiempo real.
