The simplest form backend

Request the endpoint via the email, which you also want to recieve the form input.

<form
action="https://forms.garethroll.com/{endpoint}"
>
<input type="email" name="email"/>
<button type="submit">Send</button>
</form>

Honestly, most backends are overkill

In everday developer life, a backend is overkill for 9 of 10 websites. But almost all clients want their form submissions per email. So, I built a adaptive form backend in less than 200 lines of code.

See code

Custom redirections

The form backend reads the $location input and redirects your users accordingly. You can set it's content with the value HTML attribute. Otherwise your users will be redirected to a neutral thank-you page.

<form
action= "https://forms.garethroll.com/{endpoint}"
method="POST"
>
<input type="email" name="email"/>
<input
    type="url"
    name="$location"
    value="https://example.com/thankyou"
    hidden
/>
<button type="submit">Send</button>
</form>

Send with JavaScript

If you don't want the user to be redirected, you can also send the form data to the backend using native JavaScript.

Since the backend can handle raw FormData objects, it should work with any framework out-of-the-box.

<form
    method="POST"
    action="https://forms.garethroll.com/{endpoint}"
    onsubmit="send(event, this)">
    <input name="email" />
    <button type="submit">Subscribe</button>
</form>

<script>
    function send(e, form) {
        fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
        }).then((e) => {
            if (e.ok) {
                form.insertAdjacentText('beforeend', 'Success');
                
            } else form.insertAdjacentText('beforeend', 'Fail');
        });

        e.preventDefault(); // Prevents default formaction redirection
    }
</script>