arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Formularios con formspree

Eduardo Ismael Garcia

Full Stack Developer at Código Facilito.

av_timer 1 Min. de lectura

remove_red_eye 31693 visitas

calendar_today 25 Octubre 2019

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. 😺👻

Bootcamp FullStack con JavaScript

Más información

Inscripciones Abiertas.