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

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

keep in touch

Tutorials / Web Notes

2018.03.24

👣 #contact #static #form

    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:

    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.

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

    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

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

    林宏

    Frank Lin

    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.

    PREV

    JS 本地数据存储之 cookie

    NEXT

    npm install, concerns for me

    YOU MAY ALSO LIKE

    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.

    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 networks. It is developed by Microsoft and Cisco (primarily) for mobile users, and introduced as an updated version of IKEv1 in 2005. The IKEv2 MOBIKE (Mobility and Multihoming) protocol allows the client to main secure connection despite network switches, such as when leaving a WiFi area for a mobile data area. IKEv2 works on most platforms, and natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary.

    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.

    Contact form for a static site without a backend (2024)
    Top Articles
    Latest Posts
    Article information

    Author: Nicola Considine CPA

    Last Updated:

    Views: 6369

    Rating: 4.9 / 5 (49 voted)

    Reviews: 80% of readers found this page helpful

    Author information

    Name: Nicola Considine CPA

    Birthday: 1993-02-26

    Address: 3809 Clinton Inlet, East Aleisha, UT 46318-2392

    Phone: +2681424145499

    Job: Government Technician

    Hobby: Calligraphy, Lego building, Worldbuilding, Shooting, Bird watching, Shopping, Cooking

    Introduction: My name is Nicola Considine CPA, I am a determined, witty, powerful, brainy, open, smiling, proud person who loves writing and wants to share my knowledge and understanding with you.