This article shows our solution to forms on static sites.

The Idea#

While I was setting up this portfolio/blog website I ran into a problem. What is the site gonna do when somebody wants to contact us? The template we used had a contact form that I wanted to use. The only problem is that this site does not have a backend except for a simple NGINX setup. The template suggested I use formsubmit, but after I tried to create an account, I got an error. After some time searching for alternatives, I could not find any free websites. That was when I decided to create a simple FastAPI app to manage any static website form.

Code#

In the end, the code was simple. It is just waiting for a post request on /{endpoint}. When the app gets a request, it processes the data and sends an email to me/anybody else that wants to receive the emails.

Sending the email is managed by a SendGrid API. I decided to use SendGrid because it is the only free option that gives us 100 emails/month.

setup.json#

While I was coding the API, I wanted to make it as versatile as possible. This is why I created a setup.json –> a file that tells python how to handle incoming requests.

{
    "<endpoint>":
        {
            "title": "<title of the email>",
            "message_before": "<text before everything else in the email>",
            "from": "<virtual sender - you should set it up on sendgrid>",
            "recipients":   [
                                "<recipient1>",
                                "<recipient2>"
                            ]
        }
}

Setup#

First, you will need to clone the repository.

git clone https://github.com/KarloSmircic/formHandler

After you have a clone of the repository you can choose the way of hosting.

Hosting - Uvicorn#

You will need python for this. We tried and tested the project on Python 3.10 and Python 3.9, so feel free to use one of those versions. As always you will need to install the requirements first. This can be done through requirements.txt.

pip install -r requirements.txt
pip install uvicorn

After the packages are finished installing you can start the server:

uvicorn app.main:app --host 0.0.0.0 --port 80

Hosting - Docker#

My preferred way of hosting is Docker, which is the reason I do it this way. The first thing you will need to do is to set up your docker-compose.yml.

Once you open docker-compose.yml you will be displayed with something like this:

version: '3'
services:
  app:
    build: .
    ports:
      - "<outgoing port>:80"
    environment:
      - APIKEY=<SendGrid API key>
    volumes:
      - type: bind
        source: <path to the repository>/app
        target: /app/

You have to update the file with appropriate pieces of information.

After that, you can simply build the docker image.

docker-compose build

While the image is building you can fill up your setup.json with correct information. When you are finished, and the image is built you can simply start the container.

docker-compose up -d

If you ever need to change setup.json, feel free to do it at any time. You will just have to restart the container after editing the file.

docker restart <name of the container (probably formhandler-app-1)> 

You’ve read it all#

Thanks for reading the article. If you have any questions, feel free to contact us.

The project is available for free on GitHub: https://github.com/KarloSmircic/formHandler.