Turn static website (GitHub pages) HTML form to Discord message

When hosting pages on AWS S3, GCP buckets or just GitHub pages it can be a bit problematic to have simple things such as a form where users can submit their questions or request for contact. In this short article we will demonstrate how to create a simple workflow of turning a form submission into a webhook that will send a message to a Discord channel.

Prerequisites

• Webhook Relay account.
• Static website of your choice. We are using websites hosted both on GitHub pages and GCP buckets, however with this setup it doesn’t really matter how or where the website is hosted.
• Discord server where you can configure a webhook

Create a bucket with your public endpoint

Buckets in Webhook Relay act as a grouping mechanism for public endpoints and destination (where to send the webhooks) addresses. You can create a new bucket here https://my.webhookrelay.com/buckets or use the default one that is in your account.

Note the input public URL from your bucket which should be in a format of https://xyz.hooks.webhookrelay.com.

Add the form to your website

This can be either very easy or very hard part depending on the CSS framework you use. In our case we had a Tailwind CSS set up in the project so it was quite easy:

<form class="max-w-xl mx-auto"
    data-aos="fade-down"
    data-aos-delay="300"
    action="https://xyz.hooks.webhookrelay.com"
    method="post"
>
    <div class="flex flex-wrap -mx-3 mb-5">
        <div class="w-full px-3 mb-4 md:mb-0">
            <label class="block text-gray-800 dark:text-gray-300 text-sm font-medium mb-1" for="first-name">Name <span class="text-red-600">*</span></label>
            <input id="beta" name="name" type="name" class="form-input w-full" placeholder="Enter your name" required />
        </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-5">
        <div class="w-full px-3 mb-4 md:mb-0">
            <label class="block text-gray-800 dark:text-gray-300 text-sm font-medium mb-1" for="first-name">Email <span class="text-red-600">*</span></label>
            <input id="beta" name="email" type="email" class="form-input w-full" placeholder="Enter your email" required />
        </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-5">
        <div class="w-full px-3">
            <label class="block text-gray-800 dark:text-gray-300 text-sm font-medium mb-1" for="company">Company </label>
            <input id="beta" name="company" type="company" class="form-input w-full" placeholder="Enter your company name" />
        </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-5">
        <div class="w-full px-3">
            <label class="block text-gray-800 dark:text-gray-300 text-sm font-medium mb-1" for="phone">Phone Number </label>
            <input id="beta" name="tel" type="tel" class="form-input w-full" placeholder="Enter your phone number" />
        </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-5">
        <div class="w-full px-3">
            <div class="flex justify-between items-center mb-1">
                <label class="block text-gray-800 dark:text-gray-300 text-sm font-medium" for="message">Details<span class="text-red-600">*</span></label>
                <span class="text-sm text-gray-500">The more details the merrier</span>
            </div>
            <textarea id="beta" name="message" rows="4" class="form-textarea w-full" placeholder="How can we help you?" required></textarea>
        </div>
    </div>

    <div class="flex flex-wrap -mx-3 mt-6">
        <div class="w-full px-3">
            <button class="btn text-white bg-teal-500 hover:bg-teal-400 w-full flex items-center">
                <span>Leave a message!</span>
            </button>
        </div>
    </div>
</form>