Michela Mosquera

WordPress: 7 Pasos para Crear Tu Formulario con Formspree Gratis

Introducción

Si buscas una manera sencilla de crear un formulario de contacto en WordPress y no tienes acceso a FTP en tu hosting, este tutorial es para ti. Te muestro cómo usar Formspree, una herramienta online gratuita, para añadir fácilmente un formulario profesional a tu web, sin complicaciones técnicas y en menos de 15 minutos.

¿Por qué elegí Formspree en WordPress?

Usando un plan como EasyWP Starter de Namecheap, me encontré con la limitante de no poder acceder a FTP ni cPanel tradicional. Esto me impidió instalar ciertos plugins o modificar archivos directamente. Investigué y encontré una alternativa práctica, gratuita y profesional: Formspree. Decidí implementarla y ahora quiero compartir este método efectivo y rápido para crear formularios en WordPress sin FTP y sin complicaciones.

Paso a paso para obtener tu formulario con Formspree en WordPress

  1. Regístrate en Formspree: Ve a formspree.io y crea una cuenta gratuita.
  2. Completa el breve proceso de bienvenida: Responde las preguntas (“How did you hear about Formspree?” y “When do you need your form(s) to start collecting responses?”). Elige cualquier opción, no afecta el resultado.
  3. Crea tu primer formulario: Haz clic en + New Project o Create Form. Asígnale un nombre (por ejemplo, ContactForm).
  4. Selecciona “Classic” como tipo de formulario: Así obtienes el código HTML que podrás pegar directamente en tu sitio WordPress.
  5. Copia tu código único de Formspree: Te darán una URL del tipo https://formspree.io/f/abc12345. Es el action de tu formulario.
  6. Inserta el código en WordPress: En tu página de contacto, agrega un Bloque HTML personalizado y pega el formulario. Guarda y publica los cambios.
  7. Prueba el formulario: Completa una prueba y revisa tu correo asociado. ¡Así de fácil!

Ejemplo de código listo para WordPress

Este código es compatible y sencillo (sustituye tu_codigo_unico por el tuyo de Formspree):

<form action="https://formspree.io/f/tu_codigo_unico" method="POST">
  <label>Nombre:<br>
    <input type="text" name="name" required>
  </label><br>
  <label>Email:<br>
    <input type="email" name="email" required>
  </label><br>
  <label>Mensaje:<br>
    <textarea name="message" required></textarea>
  </label><br>
  <button type="submit">Enviar</button>
</form>

Visualmente se ve así, ver imagen del formulario básico:

Ejemplo visual de formulario de Contacta básico para WordPress usando formspree

Puedes personalizar fácilmente el diseño del formulario usando CSS propio en WordPress para un aspecto profesional.

¿Quieres mejorar su apariencia? Descubre nuestras mejores prácticas de personalización aquí.

Cómo mejorar el diseño de tu formulario en WordPress

Si ya armaste tu formulario de contacto en WordPress usando Formspree, puedes hacerlo mucho más atractivo con un poco de CSS. Aquí tienes el código HTML completo y el CSS recomendado para lograr un formulario moderno, centrado y profesional.

1. HTML COMPLETO DEL FORMULARIO (para pegar en WordPress)

Pega este código en tu página de contacto usando un bloque HTML personalizado:

<div class="contact-form-container">
  <form action="https://formspree.io/f/tu_codigo_unico" method="POST" class="contact-form">
    <label for="cf-name">Nombre:</label>
    <input type="text" id="cf-name" name="name" required>

    <label for="cf-email">Email:</label>
    <input type="email" id="cf-email" name="email" required>

    <label for="cf-message">Mensaje:</label>
    <textarea id="cf-message" name="message" required rows="5"></textarea>

    <button type="submit" class="contact-btn">Enviar</button>
  </form>
</div>

Recuerda reemplazar tu_codigo_unico por el código que recibiste en Formspree.

2. CSS PARA MEJORAR EL ESTILO DEL FORMULARIO

Agrega este CSS en Apariencia > Personalizar > CSS adicional para que tu formulario se vea más profesional:

.contact-form-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.contact-form {
  background: #f9f9fb;
  border: 1px solid #eee;
  padding: 30px 38px 25px 38px;
  border-radius: 12px;
  max-width: 420px;
  min-width: 300px;
  width: 100%;
  box-shadow: 0 5px 22px rgba(0,0,0,0.05);
}
.contact-form label {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  color: #22395d;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 11px;
  margin-bottom: 18px;
  border: 1px solid #c6c8d0;
  border-radius: 6px;
  font-size: 16px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #2774ae;
  outline: none;
}
.contact-btn {
  background: linear-gradient(90deg, #2774AE 0%, #56b3b4 90%);
  color: #fff;
  font-weight: 700;
  padding: 12px 28px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(39,116,174,0.13);
  letter-spacing: 1px;
  transition: background 0.25s, transform 0.15s;
}
.contact-btn:hover,
.contact-btn:focus {
  background: linear-gradient(90deg, #56b3b4 0%, #2774AE 90%);
  transform: translateY(-2px) scale(1.04);
}

Visualmente se ve así, ver imagen del formulario con estilo CSS:

Captura muestra cómo lucirá el formulario HTML básico con CSS en WordPress con código de Formspree

Si deseas cambiar los colores para que se ajusten a tu marca, puedes modificar los valores #2774AE y #56b3b4 en el CSS.

¿Por qué es útil este CSS?

  • Formulario centrado y con fondo suave: luce profesional en cualquier sitio.
  • Campos y botón fácilmente legibles: mejor experiencia de usuario.
  • Estilo responsivo: tu formulario se ve bien en móvil y escritorio.

Ventajas de esta alternativa

  • No requiere acceso a FTP, cPanel ni conocimientos técnicos avanzados.
  • Gratis para sitios pequeños y medianos.
  • Compatible con cualquier tema WordPress.
  • Se puede personalizar el diseño de los formularios fácilmente.
  • Rápido: tu formulario funcionando en menos de 15 minutos.

Preguntas frecuentes sobre WordPress y Formspree

  • ¿Puedo usar Formspree gratis con WordPress?
    Sí, Formspree ofrece un plan gratuito ideal para la mayoría de sitios WordPress pequeños y medianos.
  • ¿Qué pasa si mi hosting de WordPress no tiene FTP?
    No necesitas acceso a FTP: Formspree es ideal para planes administrados como EasyWP Starter donde no tienes acceso al servidor.
  • ¿Puedo personalizar el diseño del formulario?
    ¡Por supuesto! Puedes añadir CSS personalizado en Apariencia > Personalizar > CSS adicional para un acabado profesional.
  • ¿Necesito instalar algún plugin extra en WordPress?
    No, todo se hace con el editor de bloques y el código HTML de Formspree.

Conclusión

Crear un formulario profesional en WordPress hoy es más fácil que nunca, incluso si no tienes FTP. Probar Formspree me permitió resolver la falta de acceso técnico y agilizó la comunicación con mis visitantes. ¿Te resultó útil este paso a paso? Déjame tu comentario, comparte este artículo si piensas que puede ayudar a más personas, o contáctame si tienes dudas.