Página de contacto con formspree

La plantilla NichoClean v2.0 incluye una página de contacto profesional totalmente integrada con Formspree y Google reCAPTCHA, ideal para recibir mensajes de tus lectores de forma segura, sin necesidad de scripts complejos o bases de datos externas. En este tutorial aprenderás cómo activarla, personalizarla y aprovecharla al máximo en tu blog de Blogger.

📌 ¿Qué es la página de contacto y para qué sirve?

La página de contacto es una sección esencial en cualquier sitio web profesional. Permite que tus visitantes te envíen consultas, colaboraciones, sugerencias o mensajes directos sin salir del blog. En NichoClean v2.0, esta página está optimizada para:

Ofrecer una experiencia limpia y minimalista, adaptada al diseño general de la plantilla.
Funcionar con Formspree, un servicio gratuito que envía los formularios directamente a tu correo electrónico.
Proteger tu blog contra spam mediante Google reCAPTCHA.
Ser 100% responsive, adaptándose perfectamente a dispositivos móviles y tablets.

⚙️ Cómo crear la página de contacto en Blogger

Para implementar el formulario de contacto en tu blog con la plantilla NichoClean v2.0, sigue estos pasos cuidadosamente:

1. Crea una nueva página estática

Entra a tu panel de Blogger y ve a Páginas → Nueva página. Asigna un título como "Contacto" o "Envíanos un mensaje". Luego, cambia al modo HTML y pega el siguiente código:

<form action="https://formspree.io/f/{form_id}" method="POST" class="contact-form">
  <div class="form-group">
    <label for="name">Nombre completo</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div class="form-group">
    <label for="email">Correo electrónico</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div class="form-group">
    <label for="subject">Asunto</label>
    <input type="text" id="subject" name="subject" required>
  </div>

  <div class="form-group">
    <label for="message">Mensaje</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <div class="form-group checkbox">
    <input type="checkbox" id="policy" name="RPGD" value="Acepté la política de datos" required>
    <label for="policy">He leído y acepto la <a href="/p/politica-de-privacidad.html">política de privacidad</a></label>
  </div>
  
  <!-- recaptcha SITE -->
<div class="form-group">
  
  <div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div> <!-- replace with your recaptcha SITE key not secret key -->
  										 	
</div>

  <div class="form-group">
    <button type="submit" class="btn-submit">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
        <path d="M22 2 11 13"></path>
        <path d="m22 2-7 20-4-9-9-4z"></path>
      </svg>
      Enviar mensaje
    </button>
  </div>
</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Importante: reemplaza {form_id} por el ID único que te proporciona Formspree (por ejemplo: https://formspree.io/f/maypknll).

2. Regístrate en Formspree

Uno de los mayores beneficios del sistema de contacto de NichoClean v2.0 es que trabaja con Formspree, una plataforma segura que envía los mensajes directamente a tu correo electrónico sin requerir servidores o bases de datos. Pero además, Formspree te permite integrar fácilmente Google reCAPTCHA para evitar el envío de mensajes automáticos o spam.

🧭 Cómo crear un Formulario y activar reCAPTCHA correctamente

Visita Formspree.io y crea una cuenta gratuita usando tu correo electrónico habitual.
Una vez dentro, verás un panel con tus formularios activos y su estado.
Haz clic en el botón “New Form” o “Crear nuevo formulario”.
Formspree generará un ID único para tu formulario (por ejemplo: https://formspree.io/f/maypknll).
Copia ese enlace y pégalo dentro del atributo action del formulario en tu página Blogger:
```
<form action="https://formspree.io/f/maypknll" method="POST" class="contact-form">
```
Luego, en el mismo panel de Formspree, entra a la configuración de tu formulario y busca la sección “Spam Protection” o “Protección contra spam”.
Activa la casilla de “Enable reCAPTCHA” o “Activar reCAPTCHA”.
Si no aparece, puedes añadirlo manualmente en tu código HTML con la siguiente estructura:
```
<div class="g-recaptcha" data-sitekey="TU_SITE_KEY_AQUI"></div>
```

3. Configura reCAPTCHA de Google

Para evitar el spam automatizado, este formulario incluye integración con Google reCAPTCHA v2. Crea tu clave pública (Site Key) en Google reCAPTCHA y reemplaza la cadena xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx por tu clave real.

🔐 Cómo obtener tu clave reCAPTCHA de Google

Para que el sistema funcione correctamente, debes generar una clave pública (site key) desde el panel oficial de Google:

Entra a Google reCAPTCHA Admin Console.
Inicia sesión con tu cuenta de Google.
En “Etiqueta” escribe algo como: Formulario NichoClean.
Selecciona la opción “reCAPTCHA v2” → “No soy un robot”.
Agrega el dominio de tu blog, por ejemplo: tublog.blogspot.com o www.tudominio.com.
Marca “Aceptar los Términos del Servicio” y haz clic en “Enviar”.
Google te mostrará dos claves: una clave del sitio (site key) y una clave secreta (secret key).

Solo debes copiar la clave del sitio (site key) y reemplazarla en el código del formulario, así:

<div class="g-recaptcha" data-sitekey="6LdEXAMPLEbCkAAAAAGHnOEXAMPLErZxj7"></div>

Importante: nunca publiques ni compartas tu clave secreta; esa se usa únicamente en servidores, y no es necesaria en Blogger.

✅ Verifica la conexión final

Guarda los cambios en Formspree y en tu página de Blogger. Luego, abre la página de contacto y verifica que el recuadro de “No soy un robot” aparezca correctamente. Haz una prueba enviando un mensaje: si todo está bien, recibirás un correo de confirmación desde Formspree.io indicando que el formulario ha sido enviado con éxito.

Si el reCAPTCHA no se muestra, revisa que:

El script de Google esté al final de tu formulario:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Tu dominio esté correctamente añadido en la consola de Google reCAPTCHA.
No haya bloqueadores de scripts o extensiones activas en tu navegador.

Una vez verificado, tu formulario estará completamente protegido y listo para recibir mensajes reales de tus lectores, evitando bots o spam automático.

4. Guarda y publica

Guarda la página, publica y verifica que el formulario funcione correctamente. Recibirás los mensajes directamente en el correo que usaste para registrar tu cuenta de Formspree.

💡 Personalización y estilo visual

La plantilla NichoClean v2.0 ya incluye los estilos CSS necesarios para que este formulario se vea perfectamente integrado con el diseño minimalista del tema:

Campos amplios, legibles y adaptativos.
Botón de envío con icono SVG y animación suave al pasar el cursor.
Diseño responsive, adaptado a todos los tamaños de pantalla.

Si deseas ajustar los colores o la tipografía, puedes editar las clases .contact-form, .form-group y .btn-submit en tu hoja de estilo principal del tema.

⚠️ Recomendaciones importantes

Comprueba que el form_id y la clave de reCAPTCHA estén correctamente configurados antes de publicar.
No publiques tu clave secreta de reCAPTCHA, solo la site key.
Si usas AdBlock o bloqueadores de scripts, el reCAPTCHA podría no mostrarse; prueba en una ventana de incógnito.
Para mayor seguridad, agrega un enlace visible a tu política de privacidad.

✅ Ventajas de este sistema de contacto

Este sistema integrado ofrece todas las ventajas de un formulario profesional sin los inconvenientes de los sistemas tradicionales:

No requiere base de datos ni plugins externos.
Funciona directamente con tu correo de Formspree.
Incluye verificación humana con reCAPTCHA.
Compatible con el estilo limpio de NichoClean v2.0.
Ideal para blogs de nicho, landing pages o sitios corporativos.

🎯 Conclusión

Con la página de contacto integrada de NichoClean v2.0, puedes ofrecer a tus visitantes una vía de comunicación profesional, rápida y segura. Configurarla solo toma unos minutos, y te permitirá fortalecer la confianza y credibilidad de tu blog frente a tu audiencia.

Recuerda mantener actualizados los datos de tu Formspree y tu clave reCAPTCHA, y verifica cada cierto tiempo que los mensajes lleguen correctamente. Un buen canal de contacto es el primer paso para construir relaciones digitales duraderas.

🚀 ¿Aún no usas NichoClean v2.0? Descárgala aquí y disfruta de todas las funciones optimizadas para SEO, diseño y experiencia de usuario.