En este tutorial aprenderemos a integrar formspree a nuestro sitio web, es bastante sencillo y sin duda de mucha utilidad para prototipar nuestros proyectos.
Como sabemos, y si no ahora lo sabes, formspree es un servicio en línea que nos permite dar funcionalidad a formularios de páginas web estáticas, sí, páginas web con solo HTML y quizás CSS.
Para integrar formspree a nuesta página web no es necesario de conocer o dominar ningún lenguaje de programación ni programar absolutamente del lado del backend. Nos olvidemos de PHP, Python, Ruby, JavaScript etc..
INTEGRACIÓN
Lo primero que haremos será dar de alta nuestra cuenta en el en el sitio web de formspree. Es completamente gratis.
Una vez hayamos verificado nuestra cuenta ya seremos capaces de hacer uso de formspree.
La forma más sencilla de integrar formspree es haciendo uso de nuestro user_id. Para ello clic sobre new form e integration. Obtendremos el siguiente ejemplo.
<form action="https://formspree.io/<USER_ID>" method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Podemos observar que la url de action hace referencia a nuestra cuenta.
Este es un formulario base, sin embargo podemos cambiar los campos si ningún problema. Veamos un ejemplo con bootstrap.
<h2>Formulario de contacto</h2>
<form action="https://formspree.io/<USER_ID>" method="POST">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="nameexample.com">
</div>
<div class="form-group">
<label for="select">Select</label>
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
</select>
</div>
<div class="form-group">
<label for="comment">Comment</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary mb-2">Enviar formulario</button>
</form>
Es importante colocar nuestro user_id en la dirección de envío, además que todos los campos deben poseer el atributo _name.
Al hacer el submit seremos redirigidos a completar un pequeño captcha, y listo, recibiremos en nuestro correo (el que utilizamos para crear la cuenta) la información enviada a través del formulario. 😺👻
