For a static site like those on GitHub Pages, everything is done in the frontend. The user just downloads a bunch of static files that execute in their browser. But for a “Contact” form, to deal with the submissions we typically need a backend service, either self-hosted or a third a third-party service.
Here, I’m going to summaries several possible solutions that could fulfil the contact form logic.
Link with mailto
The idea of this simple solution comes from Simple Backends: Four ways to implement a “Contact Us” form on a static website. When I searched for the solutions for this topic, it already presents several great methods for our purpose. To get information from users, we could simply use a
mailto: link that open users’ default e-mail client for submission.
Here’s an example contact form from w3schools:
<form action="mailto:[email protected]" method="post" enctype="text/plain"> Name:<br> <input type="text" name="name"><br> E-mail:<br> <input type="text" name="mail"><br> Comment:<br> <input type="text" name="comment" size="50"><br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form>
Try it at: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_mail. We can pre-set the
cc fields for this link like this:
<form action="mailto:[email protected]?subject=Hello&body=Submission+from+contact+form" method="post" enctype="text/plain"> ... </form>
mailto link, like https://jumk.de/nospam/stopspam.html; or you can use base64 string for this link and turn it back when users clicked on it using JS.
There is a long list third-party services for this purpose. I just pick up two of them that I’ve tried.
It’s a great service which lets you build a contact form in seconds, and you can embed the form in your webpages with an iframe. You can even place multiple forms on your page. Wanna try this? Simply go to https://www.wufoo.com/gallery/templates/forms/contact-form/ and play around with it.
Formspree gives you more control over your contact form, and lets you have more configurations like reCAPTCHA. You don’t even need to sign up an account and Formspree will forward the submission to your e-mail.
Basic setup like normal form:
<form action="https://formspree.io/[email protected]" method="POST"> <input type="text" name="name"> <input type="email" name="_replyto"> <input type="submit" value="Send"> </form>
Then you’re ready to get submissions from users. However, this also exposure your e-mail to the public.
Functions as a service
You may have heard of Function as a Service (FasS), like AWS Lambda function or Google Cloud Functions.
Here you can find a full example that using AWS Lambda to build a function for your contact form: https://medium.com/datafire-io/simple-backends-four-ways-to-implement-a-contact-us-form-on-a-static-website-10fc430984a4. It lets you receive submissions from users and then send e-mails to you via Gmail service.
Also, another tutorial using Google Firebase Function doing the similar work: Create a Contact Form in Angular using Cloud Functions for Firebase.
They all doing the form submission in a way under your control but lack of simplicity.
As I’m changing hosting to Netlify, the built-in form handling simplify the process of the contact form implementation.
Just place a normal form and give a
netlify attribute is enough:
<form name="contact" method="POST" action="/thank-you/" netlify> ... </form>
Also, you can place a custom page to the
action attribute that redirects when the form successfully submitted. You can configure the Netlify app to forward the e-mail to your Slack workspace for your convenient.
More advanced configurations like spam filtering and AJAX submission are well documented here: https://www.netlify.com/docs/form-handling/. Also, notice that the limit for a free plan is 100 form submissions per month. For now, it’s totally enough for me, and I’m pleased with such a simple way of a functional contact form. I might try the FaaS way later if it needed.
One more alternative is using small.chat, which lets you talk to your users directly through slack channel.
This is different to traditional forms, but it could do the same job and gives you more functions.
Okay, that’s all for now, choose the best you feel.