Contact form for a static site without a backend

Contact form for a static site without a backend

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.

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.

small chat screen shot

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.

THE END
Ads by Google

林宏

Frank Lin, PhD

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 billion . This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Setup an IKEv2 server with strongSwan

Tutorials

2020.01.09

Setup an IKEv2 server with strongSwan

IKEv2, or Internet Key Exchange v2, is a protocol that allows for direct IPSec tunnelling between two points. In IKEv2 implementations, IPSec provides encryption for the network traffic. IKEv2 is natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary, and it handles client hiccups quite smoothly.

Hands on IBM Cloud Functions with CLI

Tools

2020.10.20

Hands on IBM Cloud Functions with CLI

IBM Cloud CLI allows complete management of the Cloud Functions system. You can use the Cloud Functions CLI plugin-in to manage your code snippets in actions, create triggers, and rules to enable your actions to respond to events, and bundle actions into packages.

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.

TOC

Ads by Google