FabForm

Written by: Geoffrey Callaghan

Create A Static Website With Contact Form On Github Pages

Create A Static Website With Contact Form On Github Pages

Pro Tip: At FabForm we love Astro build for building static websites. We love it so much we created a free open source Astro Starter Template called Astrolize. This Starter Template For Astro With Tailwind will get your website up and running in Astro blazingly fast.

FabForm is a service that allows you to handle form submissions easily. Here’s how you can create a static website with a contact form on GitHub Pages using FabForm:

  1. Create a GitHub Repository:

    • Create a new repository on GitHub. Name it something like your-username.github.io.

  2. Create Your Website:

    • Create a simple HTML/CSS website. You can use any code editor of your choice. Here’s a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple static website.</p>

    <form action="https://fabform.io/f/YOUR_FORM_ENDPOINT" method="post">
        <!-- Replace "YOUR_FORM_ENDPOINT" with your actual FabForm form endpoint -->

        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br>

        <label for="message">Message:</label>
        <textarea id="message" name="message" required></textarea><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

  1. Sign Up on FabForm:

    • Go to FabForm and sign up for an account.
    • Create a new form and note down the form endpoint URL.

  2. Replace Form Action URL:

    • Replace "https://fabform.io/f/YOUR_FORM_ENDPOINT" in the form tag with the actual form endpoint URL you obtained from FabForm.

  3. Commit and Push Your Code:

    • Commit your changes and push them to your GitHub repository.
git add .
git commit -m "Initial commit"
git push origin main

  1. Enable GitHub Pages:

    • Go to your GitHub repository’s settings.
    • Scroll down to the GitHub Pages section.
    • Choose the main branch as the source.

  2. Access Your Website:

    • Your website will be available at https://your-username.github.io.

Now, when users submit the form on your website, the form data will be sent to FabForm, and you can manage form submissions through the FabForm dashboard.

Provide your email address on the form

If you would like to give the option for people to contact you by email too. You can use VeilMail.io to hide email address with captcha. VeilMail makes sure it’s a human reading your email address and not a bot or a email scraper.