Formulario de contacto para WordPress sin plugin

Algo que no entiendo es que WordPress no incluya aún por defecto un formulario de contacto simple, pero completo.

Como habitualmente hago tareas de optimización de WordPress, tanto aquí como en sitios ajenos, en muchas ocasiones sustituyo plugins engordados innecesariamente con opciones, bloques y adornos que nunca se usan o no se necesitan por código para aligerar la carga.

Este formulario de contacto es una solución completa y personalizable para WordPress, diseñado para ser seguro, fácil de usar y respetuoso con la privacidad del usuario. Además, puedes añadir o quitar opciones a tu interés. Es el formulario que uso aquí.

Estas son sus principales funciones y características y las instrucciones para añadirlo a cualquier página o post de tu blog con un shortcode.

Estructura y opciones

1. Campos del formulario

• Nombre: Campo obligatorio para que el usuario ingrese su nombre.
• Email: Campo obligatorio para que el usuario ingrese su dirección de correo electrónico.
• Mensaje: Campo obligatorio para que el usuario escriba su mensaje. Debe tener al menos 15 caracteres y un máximo de 1000. No se permiten enlaces ni direcciones de correo en el cuerpo del mensaje.
• Captcha de suma: Un captcha simple que pide al usuario resolver una suma de dos números aleatorios entre 1 y 9.
• Aceptación de política de privacidad: Casilla de verificación obligatoria para aceptar la política de privacidad antes de enviar el formulario.

2. Validaciones y seguridad

• Validación de campos obligatorios: Todos los campos son obligatorios. Si falta alguno, se muestra un mensaje de error.
• Validación de enlaces: No se permiten enlaces (URLs) en los campos de nombre o mensaje.
• Captcha de suma: Evita el spam automatizado al requerir que el usuario resuelva una operación matemática simple.
• Google reCAPTCHA (opcional): Si se configuran las claves de reCAPTCHA de Google, se añade un segundo nivel de seguridad para evitar bots. Si no se añaden las claves de reCAPTCHA al código, este no se añadirá al formulario.
• Validación de palabras prohibidas: Opcionalmente, se pueden bloquear palabras específicas en el mensaje, por ejemplo: piña,pizza,bitcoin (separadas con coma y sin espacios)
• Nonce de seguridad: Protege contra ataques CSRF (Cross-Site Request Forgery).

3. Privacidad

• Sin almacenamiento de datos: No se almacena ningún dato del usuario (ni correos, ni IPs, ni URLs de referencia, nada). Este enfoque cumple con las normativas de privacidad como el RGPD, ya que no se recopila ni almacena información personal alguna.
• Política de privacidad: Incluye un enlace a la política de privacidad que el usuario debe leer aceptar antes de enviar el formulario.

4. Mensajes de retroalimentación

• Mensajes de error: Se muestran en un bloque al principio del formulario si hay errores en la validación.
• Mensaje de éxito: Tras enviar el formulario correctamente, se muestra un mensaje de éxito en verde, con un tamaño de 14px y en negrita: "¡Gracias! Tu mensaje ha sido enviado.". Puedes cambiar este texto y su formato en el código. El resto de los estilos como el fondo amarillo, el borde y sombra de la caja que contiene el formulario que puedes ver aquí, así como otros elementos exteriores no se incluyen en el código ya que están añadidos con un contenedor de GenerateBlocks.

5. Personalización

• Texto del captcha: Personalizable (por defecto: "¿Eres humano? Resuelve esta suma:").
• Palabras prohibidas: Se puede añadir una lista de palabras prohibidas separadas por comas.
• Google reCAPTCHA: Opcional, solo se añade si se configuran y añaden las claves del sitio y secreta de tu captcha al código.

6. Rendimiento

En el código se verifica si el shortcode está presente y si no está el shortcode, no mostrará nada, por lo que sólo se ejecutará en la página o post donde se haya añadido shortcode.

El rendimiento allá donde se muestra es óptimo.

Instrucciones de instalación y configuración

1. Copiar y añadir el código

1. Abre el archivo functions.php de tu tema WordPress (o crea un plugin personalizado si prefieres no modificar el tema o usa Code Snippets).
2. Copia y pega el código completo del formulario en el archivo functions.php

2. Configurar Google reCAPTCHA (Opcional)

1. Dirígete a Google reCAPTCHA.
2. Selecciona reCAPTCHA v2 y elige la opción "I'm not a robot" Checkbox.
3. Registra tu sitio web y obtén las claves:
   • Clave del sitio (Site Key)
   • Clave secreta (Secret Key)
4. En el código del formulario, reemplaza 'TU_CLAVE_DEL_SITIO' y 'TU_CLAVE_SECRETA' con las claves que obtuviste.
   • Si no deseas usar reCAPTCHA, deja las claves como están. Es decir, así: ('TU_CLAVE_DEL_SITIO' y 'TU_CLAVE_SECRETA').

3. Configurar palabras prohibidas (Opcional)

1 - En el código del formulario, busca la línea:

$palabras_prohibidas = ' ';

2 - Añade las palabras que deseas bloquear, separadas por comas. Por ejemplo:

$palabras_prohibidas = 'caca,culo,pedo,pis';

Si no quieres bloquear ninguna palabra, deja la variable vacía.

4. Personaliza el texto del captcha de la suma (Opcional)

En el código del formulario, busca esta línea:

<label for="captcha">¿Eres humano? Resuelve esta suma: <strong><?php echo $num1; ?> + <?php echo $num2; ?> = </strong></label>

Cambia el texto "¿Eres humano? Resuelve esta suma:" por el que quieras mostrar.

5. Añade la URL de tu política de privacidad

Sustituye la url de ejemplo por la URL de la política de privacidad de tu página en esta línea:

$politica_privacidad_url = 'https://tuweb.com/declaracion-de-privacidad/';

6. Shortcode

Añade el shortcode en la página o post donde quieras que se muestre el formulario.

[formulario_contacto]

Por último, solo tendrás que probarlo para verificar que los correos se envían y llegan y observar el uso para prevenir que los incansables spammers consigan colar sus mierdas complicando el captcha matemático y´/o activando ambos captchas al tiempo. El código siempre es mejorable y se puede depurar y optimizar. También puedes traducirlo si necesitas usarlo en otro idioma.

Si hago cambios o mejoras en el código en función del resultado iré añadiendo las notas aquí mismo.

Puedes encontrar el código completo en la página 2