Contact form for a static site without a backend (2024)

keep in touch

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:someone@example.com" 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 subject, body, and cc fields for this link like this:

<form action="mailto:someone@example.com?subject=Hello&body=Submission+from+contact+form" method="post" enctype="text/plain">...</form>

Also, you can customize the look of this form with CSS styles. But one drawback of this method is your e-mail address is now publicly available that may give you loads of spam e-mails. Dealing this needs some JavaScript to encrypt the 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 JavaScript.

Third-party services

There is a long list of third-party services for this purpose. I just pick up two of them I’ve tried.

1. Wuffo

   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.

2. Formspree

   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 personal e-mail.

   Basic setup like normal form:

   <form action="https://formspree.io/your@email.com" 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.

Now, I’ve also deployed the contact form with serverless function, see Serverless function for sending Slack message as a contact method.

Netlify form

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 needed.

Small chat

One more alternative is using small.chat, which lets you talk to your users directly through Slack channel, a way of contact directly.

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 for your need.

Ads by Google