Table of Contents

Forms are interactive elements used to get input from the user for further processing.


Most times, forms are just used to receive input that requires no processing but rather just receiving data, this might be a contact form, RSVP, get a quote e.t.c

Traditionally, forms are managed with the help of a server (also known as server side), but this is more efficient when you’re processing the data from the form, maybe a user registration form where the form data is validated, authenticated and saved in a database.

When you’re building a simple form where you’re only receiving data from the user and not processing (i.e contact form) the goal is to get the data from the form and send to your company support email (e.g info@…, support@…)

Using a server here is not ideal and is only an overkill, a very common way of doing this is via PHPMailer ( The classic email sending library for PHP). PHPMailer is used with PHP and requires a lot of boring server configurations. What if you’re just building a static site? There should be an easier way of doing this client side right?

In this article, I’ll introduce you to two methods of handling form data client side in static sites. There are other methods but I’ve used these two and considered them to be the best and easiest (no hard feelings :) ).

NO hectic configurations, NO servers, NO serious stuff, just build your form, do some little tweaks, the user submits and bingo it heads straight to your designated email. :)

STARTER FORM

For the purpose of this article, I’ve built a basic form with HTML5 and Bootstrap 4, you can fork it from the Codepen below.

Currently, this form uses none of the methods we’ll talk about, at the end of the article, I’ll provide the full code for both methods, you can then update the form and test. I’ve added a little validation, don’t worry about that

Now, let’s get started!!

METHOD ONE


Formspree provides functional HTML forms via their platform with no PHP or JavaScript. Send your form to their URL and it’ll be forwarded to your email. No PHP, Javascript or sign up required — perfect for static sites!

Wait!, wait!!, wait!!! it’s Open Sourced too

Form handling with Formspree

(Follow the next step and update this form to use this method)

    <form action="https://formspree.io/you@email.com" method="POST">
        <input type="hidden" name="_subject" value="Bolaji's Form">                 
        <input type="hidden" name="_next" value="/thanks.html" >
        <input type="text" name="name">
        <input type="email" name="_replyto">
        <input type="text" name="phone">
        <input type="submit" value="Send">
    </form>

Now let’s go over the new stuff added above.

— For Email address, I added a _replyto attribute (This just mean, you’ll be able to quickly reply to the user who originally submitted via email)

— I’ve added a _subject attribute. This value is used for the email’s subject so that you can quickly reply to submissions without having to edit the subject line each time.

— I’ve added a _next attribute. By default, after submitting a form the user is shown the Formspree “Thank You” page. You can provide an alternative URL for that page like so: <input type=”hidden” name=”_next” value=”/thanks.html" />

> formspree default success page

> custom success page I built for a client.

This is our Thanos, one snap at this button and your form is erased and its data sent to your email.

That’s all to using formspree :) Although there are other configuration settings for several other features, you can check here.

Things to note!

If you’re building a basic site, you shouldn’t worry about Paid plans, Paid plans are mostly needed by Enterprise applications and companies, the Free plan would cover all your needs. I use this for some client projects too :)

    $.ajax({
        url: "https://formspree.io/FORM_ID",
        method: "POST",
        data: {message: "hello!"},
        dataType: "json"
    });

Well, this is for paid users :)

If you don’t use jQUERY like me and you’re tired of the lengthy AJAX default syntax, check out simpleAJAX library, a simple library I built for handling HTTP requests. Like so:

    const http = new simpleAJAX;

    const data = {
        "name": "Bolaji Ayodeji",
        "email": "hi@bolajiayodeji.com",
        "message": "hi"
    };
    http.post('https://formspree.io/FORM_ID', data,
    (err, user) => {
        if(err) {
         console.log(err)
        } else {
         console.log(user);
       }
     });

A star would make me happy! :)

METHOD TWO


Netlify offers form handling for sites deployed on their platform.

Form handling with Netlify

Please watch this 14min video by @JamesQuick below if you don’t know what Netlify is. Learn about all of the awesome features in Netlify like Continuous Deployment, Lambda Functions, Split Testing, Preview Branches, and more!

    <form action="/thanks.html" name="Bolaji's form" method="POST" data-netlify="true">
        <input type="text" name="name">
        <input type="email" name="email">
        <input type="text" name="phone">
        <input type="submit">
    </form>

Now let’s go over the new stuff I added above.

That’s all, your form submissions goes straight to your Netlify admin panel

Settings > Build & deploy > Environment > Environment variables

(Watch the video above if you don’t understand what the panel means)

Things to note!

https://www.netlify.com/pricing

To do this, add an input with type="file" to any form. When a form is submitted, a link to each uploaded file will be included in the form submission details.

form submissions in the admin panel

And that’s all!!

Final HTML Form code


Conclusion

One thing to note about formspree is that the free version leaves your email address exposed to scrapers and bots so you might want to set up a temporary disposable email address while you use it. If you want to hide your email address by default, you’ll need to upgrade your plan.

Do you want extra practice? Watch this tutorial video below by Brad Traversy and learn how to add a contact or any type of form to your website by using the Netlify form feature including file uploads and spam filtering. [Full guide + practical code]

Thanks for reading! Please share and subscribe :)