Simple 11ty Webforms

While working on a website for my wedding I wanted to self host an RSVP page but I also wanted the website to be generated with 11ty. This is how I combined the two to self host a simple form to collect guest RSVP data. You can checkout the form built in this post here! I also have place the source code on my github.

Prerequisites

This is a very simple setup with deployment using docker. Before beginning you'll need 11ty setup to build sites. I based my site around this excellent example on glitch. The directory structure I'm using looks like this:

./
├── docker-compose.yaml
├── Dockerfile
├── .eleventy.js
├── package.json
├── server.js
├── src
│   ├── _includes
│   │   ├── base.njk
│   │   └── form.njk
│   ├── index.md
│   ├── form.md
│   └── success.md
└── submissions.txt

11ty setup

The first thing we need to do is add the webform and success page to our 11ty source.

form.njk

Create a new layout in your _includes. I'm going to name mine form.njk. Inside your newly created layout you will add the form like so:

---
layout: base.njk
---
<div>

    {{ content | safe }}
    
    <!--- Simple Form --->
    <form action="/submit" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea>
        <button type="submit">Submit</button>
    </form>
</div>

If you'd like your form to be fillable using URL parameters you can add the following script to your layout.

<script>
    // Function to autofill the form fields based on URL parameters
    // Source: ChatGPT
    function autofillForm() {
        const params = new URLSearchParams(window.location.search);

        // Loop through all the parameters in the URL
        params.forEach((value, key) => {
            // Find the form field by the name or id that matches the parameter name
            const field = document.querySelector(`[name="${key}"], [id="${key}"]`);
            if (field) {
                // If it's a text or textarea field, set its value
                if (field.tagName === 'TEXTAREA' || field.type === 'text') {
                    field.value = value;
                }
                // Optionally handle other types of input fields (checkbox, radio, etc.)
                // You can add more conditions here if needed (e.g., for radio buttons, checkboxes).
            }
        });
    }

    // Call autofill function on page load
    window.onload = autofillForm;
</script>

form.md

Now we can create a new page that uses this layout. A simple page may look like this:

---
title: 'My simple form'
layout: form.njk
---
Fill out my cool form!

Now if you start up your server with npm run start you'll see this:

Clicking submit though will lead you to a 404!

success.md

We'll need a page for our user to land on after submitting. I made a simple success.md page that just confirms to the user the response was recorded.

---
title: "Success"
layout: base.njk
---

# Success!
Response succesfully recorded.

Server setup

Now we need to set up the server to listen for form submission. To keep it simple I'm using a node server as 11ty already uses node for build.

package.json

Inside your package.json ensure you have the start and build scripts shown:

  "scripts": {
    "start": "npx @11ty/eleventy --serve --watch",
    "build": "npx @11ty/eleventy"
  },

These will be useful when setting up the docker container later. They are also handy for starting/building your site with just npm run start or npm run build respectively.

server.js

To handle the form response we'll need to setup a simple node server. The server needs these two packages as a prerequisite so will install them in to our 11ty setup to mark them as a dependency.

npm install express body-parser

Now we can make a very simple server.js in the root of our development folder. The servers job is just to host our static files as well as handle POST requests to /submit and save the POST to a submissions file. This is a very simple implementation but it's clear to see how this could be extended to make more complex submit procedures. After it saves to file it will redirect the user to the success page we made earlier.

// Simple node server
const express = require('express');
const path = require('path');
const fs = require('fs');
const bodyParser = require('body-parser');

const app = express();
const PORT = 3000;

// Middleware to parse URL-encoded form data
app.use(bodyParser.urlencoded({ extended: true }));

// Serve static files (HTML, CSS, JS)
// NOTE: change _site with whatever directory you output your built site to
app.use(express.static(path.join(__dirname, '_site')));

// Handle form submissions
app.post('/submit', (req, res) => {
    const { name, message } = req.body;

    // Save the form data to a file
    const logMessage = `Name: ${name}\nMessage: ${message}\n\n`;
    fs.appendFile('submissions', logMessage, (err) => {
        if (err) {
            res.status(500).send('Error saving form data');
            return;
        }
        res.redirect('/success');
    });
});

// Start the server
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Dockerfile

To setup our server in a docker container we can extend the base node image. The dockerfile will make an app directory, copy in our app, install dependencies, and then build the 11ty site.

# Use the latest node image
FROM node:latest
# Set active directory
WORKDIR /app
# Copy package list
COPY package.json ./
# Install node packages
RUN npm install
# Copy in full development directory
COPY . .
# Build website
RUN npm run build
# Command to run on container start
CMD ["node", "server.js"]

docker-compose.yaml

To run everything we'll collect it in to a docker-compose.yaml file. The only volume needed is for the submission data so it can persist between rebuilds. Make sure to create the submissions file if it doesn't exist with touch submissions

services:
  website:
    build: .
    container_name: my_website
    ports:
      - "3000:3000"
    volumes:
      # save submissions to local disk
      - ./submissions:/app/submissions

run

Now the site can be run with docker compose up -d. If you make any changes you'll need to run docker compose build && docker compose up -d to rebuild it.

test

Open up the http://yoursite/form page and test it out. Any submission should add new lines to the submission file.