Crear página de contacto en WordPress con formulario: Guía paso a paso

Tener una página de contacto con un formulario funcional es una de las partes más importantes de cualquier sitio web. No solo le das a tus visitantes una forma fácil de comunicarse contigo, sino que también evitas que tu correo electrónico esté expuesto a robots que envían spam. Si usas WordPress, estás de suerte: crear un formulario de contacto es muy sencillo, incluso si no tienes experiencia técnica.

En este artículo te voy a guiar paso a paso para que puedas crear tu propia página de contacto con formulario en WordPress. Usaremos un plugin gratuito y popular, y te explicaré todo de forma clara y visual, sin necesidad de tocar código.

¿Por qué necesitas un formulario de contacto en tu web?

Antes de ponernos manos a la obra, es bueno entender por qué es mejor tener un formulario que simplemente poner tu dirección de correo electrónico.

Evitas el spam: Los bots rastrean la web en busca de direcciones de email. Si publicas tu correo, tarde o temprano recibirás montones de mensajes basura. Un formulario oculta tu dirección real.
Organización: Puedes configurar el formulario para que los mensajes lleguen a diferentes departamentos (ventas, soporte, etc.) o que se guarden en tu base de datos.
Profesionalidad: Una página de contacto bien diseñada transmite confianza y seriedad.
Control: Puedes añadir campos específicos (nombre, teléfono, asunto) para que los usuarios te den la información que necesitas desde el principio.

Requisitos previos

Para seguir este tutorial, necesitas:

Un sitio web con WordPress instalado.
Acceso al panel de administración de WordPress (normalmente /wp-admin).
Un tema de WordPress (puede ser cualquier tema, no importa si es gratuito o de pago).
Conexión a internet para instalar plugins.

Si todavía no tienes WordPress instalado, generalmente tu proveedor de hosting te ofrece instaladores automáticos. Por ejemplo, si usas Syspanel (el panel de control que antes se llamaba HestiaCP y que se accede por el puerto 2106), puedes instalar WordPress fácilmente desde el instalador de aplicaciones.

[INFO] Si tu hosting usa Syspanel, recuerda que para acceder al panel debes escribir en tu navegador tudominio.com:2106 y usar tus credenciales de acceso. Desde allí podrás gestionar tus bases de datos, dominios y archivos.

Paso 1: Elige e instala un plugin de formularios

WordPress no trae un formulario de contacto por defecto. Para añadirlo, necesitamos un plugin. Hay muchas opciones, pero para este tutorial usaremos Contact Form 7, que es el más popular, gratuito y sencillo.

¿Por qué Contact Form 7?

Es completamente gratuito.
Es muy ligero y no ralentiza tu web.
Permite personalizar los campos fácilmente.
Se integra con casi cualquier tema.
Tiene una gran comunidad y soporte.

Instalación del plugin

Desde el panel de administración de WordPress, ve a Plugins > Añadir nuevo.
En el buscador, escribe Contact Form 7.
Verás el plugin creado por Takayuki Miyoshi. Haz clic en Instalar ahora.
Una vez instalado, haz clic en Activar.

¡Listo! Ya tienes el plugin activo. Ahora verás una nueva opción en el menú lateral izquierdo llamada Contacto.

[TIP] Si prefieres un plugin con más opciones visuales (arrastrar y soltar), puedes probar WPForms (versión gratuita) o Elementor Pro (si ya usas Elementor). Pero para este tutorial, Contact Form 7 es perfecto.

Paso 2: Crea tu primer formulario de contacto

Una vez activado el plugin, vamos a crear el formulario.

Ve a Contacto > Añadir nuevo.
Se abrirá una página con un editor. Verás que ya hay un formulario de ejemplo con campos como "Tu nombre", "Tu correo electrónico", "Asunto" y "Tu mensaje". Puedes modificarlo o crear uno desde cero.
Ponle un título a tu formulario, por ejemplo: "Formulario de contacto principal".
En el editor, verás un código como este:

<div class="wpcf7">
<p>Tu nombre (requerido)<br />
    [text* your-name] </p>

<p>Tu correo electrónico (requerido)<br />
    [email* your-email] </p>

<p>Asunto<br />
    [text your-subject] </p>

<p>Tu mensaje<br />
    [textarea your-message] </p>

<p>[submit "Enviar"]</p>
</div>

Este código es el que define los campos del formulario. Puedes editarlo directamente. Por ejemplo, si quieres añadir un campo de teléfono, escribe:

<p>Teléfono<br />
    [tel your-phone] </p>

Una vez tengas los campos que quieras, haz clic en Guardar.

[WARNING] No borres las etiquetas [text* ...] o [email* ...] sin saber lo que haces. Cada una representa un campo. El asterisco * significa que el campo es obligatorio.

Paso 3: Configura el envío de los mensajes

Ahora que tienes el formulario, debes indicar a dónde quieres que lleguen los mensajes.

En la misma pantalla de edición del formulario, busca la pestaña Correo (arriba del editor).
Verás dos secciones: Correo (mensaje que recibes tú) y Correo 2 (mensaje de confirmación para el usuario). Por ahora, solo necesitas configurar el primero.
En el campo Para:, escribe la dirección de correo a la que quieres recibir los mensajes. Por defecto aparece la del administrador de WordPress, pero puedes cambiarla.
El campo De: suele tener algo como [your-email]. Esto hace que el remitente sea el correo del usuario que rellena el formulario. Déjalo así.
En Asunto:, puedes poner [your-subject] para que se use el asunto que escribió el usuario, o escribir algo fijo como "Mensaje desde la web".
En Cuerpo del mensaje:, verás etiquetas como [your-name], [your-message], etc. Puedes personalizar el texto del correo que recibirás. Por ejemplo:

Nombre: [your-name]
Correo: [your-email]
Teléfono: [your-phone]
Mensaje:
[your-message]

Haz clic en Guardar.

[INFO] Si los correos no llegan, puede ser un problema de configuración del servidor. Contacta con tu proveedor de hosting o revisa que tu dominio tenga un registro MX válido. En Syspanel, puedes gestionar los correos desde la sección "Mail".

Paso 4: Crea la página de contacto en WordPress

Ahora vamos a crear la página donde se mostrará el formulario.

Ve a Páginas > Añadir nueva.
Ponle de título, por ejemplo, Contacto.
En el editor de bloques (Gutenberg), busca el bloque llamado Shortcode (o "Código corto" en español).
Añade el bloque y pega el shortcode de tu formulario. Para obtenerlo, ve a Contacto en el menú, y verás una lista de formularios. Debajo del título de cada uno, aparece un código como [contact-form-7 id="123" title="Formulario de contacto principal"]. Cópialo.
Pega ese shortcode en el bloque.
Opcionalmente, puedes añadir más contenido: un mapa de Google Maps (con otro bloque), tu dirección física, teléfono, horario, etc.
Publica la página.

[TIP] Si tu tema lo permite, puedes añadir un mapa incrustado copiando el código desde Google Maps. Busca "Google Maps embed" y pega el código en un bloque HTML.

Paso 5: Añade la página de contacto al menú de navegación

Para que los visitantes encuentren tu página de contacto, debes enlazarla en el menú.

Ve a Apariencia > Menús.
Si no tienes un menú creado, crea uno nuevo. Si ya tienes uno, selecciónalo.
En la columna de la izquierda, busca Páginas y marca la página "Contacto" que acabas de crear.
Haz clic en Añadir al menú.
Ordena los elementos arrastrándolos y después haz clic en Guardar menú.

Ahora, cuando visites tu web, verás el enlace "Contacto" en el menú principal.

Personalización avanzada (opcional)

Si quieres que tu formulario se vea más bonito o tenga funcionalidades extra, puedes hacer lo siguiente:

Cambiar el estilo del formulario

Contact Form 7 permite añadir clases CSS. Puedes personalizar los campos usando el Personalizador de WordPress (Apariencia > Personalizar) o añadiendo CSS adicional en Apariencia > Personalizar > CSS adicional.

Por ejemplo, para que los campos tengan bordes redondeados, puedes añadir:

.wpcf7 input, .wpcf7 textarea {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
}

Añadir un campo de selección (desplegable)

Si quieres que el usuario elija un asunto de una lista, usa el código:

<p>Asunto
    [select your-subject "Consulta general" "Soporte técnico" "Ventas" "Otro"]</p>

Protección contra spam sin CAPTCHA

Contact Form 7 incluye una función llamada Akismet (si lo tienes activado) o puedes usar reCAPTCHA de Google desde la configuración del plugin (Contacto > Integración). También puedes instalar plugins como Really Simple CAPTCHA o Honeypot (campos ocultos).

[WARNING] El uso de CAPTCHA puede ralentizar la carga del formulario. Si tu web recibe poco spam, puedes omitirlo.

Solución de problemas comunes (FAQ)

Aquí tienes las preguntas más frecuentes que suelen tener los usuarios al crear su página contacto web con formulario.

1. El formulario no envía los correos

Causa más común: El servidor de correo no está configurado correctamente.
Solución: Contacta con tu hosting. Si usas Syspanel, verifica que el dominio tenga un buzón de correo creado y que el registro MX apunte al servidor. También puedes probar a instalar un plugin como WP Mail SMTP para forzar el envío a través de Gmail u otro servicio SMTP.

2. El formulario se ve mal o no tiene estilo

Causa: El tema no tiene estilos para Contact Form 7.
Solución: Añade CSS personalizado (como el ejemplo de arriba) o usa un plugin de page builder como Elementor que te permite diseñar el formulario visualmente.

3. Aparece un mensaje de error "No se pudo enviar el mensaje"

Causa: Problema con el servidor o con los campos obligatorios.
Solución: Revisa que los campos obligatorios (con asterisco) estén correctamente etiquetados. También prueba a desactivar otros plugins para descartar conflictos.

4. Quiero que el mensaje se guarde en la base de datos

Solución: Instala un plugin adicional como Flamingo (del mismo creador de Contact Form 7) que guarda los mensajes en una base de datos local.

5. ¿Puedo usar otro plugin de formularios?

Sí. Si prefieres una interfaz visual, prueba WPForms (gratuito) o Elementor Pro (de pago). El proceso es similar: instalas el plugin, creas el formulario y lo insertas en una página mediante shortcode o widget.

Conclusión

Crear una página de contacto con formulario en WordPress es un proceso sencillo que cualquier persona puede hacer siguiendo estos pasos. Con solo instalar un plugin gratuito como Contact Form 7, personalizar los campos y añadir la página a tu menú, tendrás un canal de comunicación profesional y libre de spam.

Recuerda que la clave está en la práctica: no tengas miedo de experimentar con diferentes campos, estilos o incluso probar otros plugins. Tu WordPress formulario debe adaptarse a las necesidades de tu negocio o proyecto personal.

Si encuentras algún problema, revisa la sección de FAQ o consulta con tu proveedor de hosting (especialmente si usas Syspanel, donde puedes gestionar correos y bases de datos de forma sencilla desde el puerto 2106). ¡Ahora ya sabes cómo hacerlo! Anímate a crear tu propia página de contacto y facilita la comunicación con tus visitantes.

[INFO] No olvides probar el formulario después de publicarlo. Envíate un mensaje de prueba para asegurarte de que todo funciona correctamente. Un pequeño test te ahorrará problemas futuros.