Create A Static Website With Contact Form On Github Pages

github pages static site

What are GitHub pages?

GitHub Pages is a service from Github that allow you to host a static website directly from your GitHub repository. A static site is made up of only HTML, CSS, and JavaScript. There is no server backend running to handle any form posts, to collect any form submissions. This is where fabform comes into play.


In this step-by-step guide, I will show you how to create and host a static website on github pages, and with-in that website, how to add a contact form to collect form submissions on fabform.io our intelligent forms backend.

Step 1: Inside of GitHib, create a new public repository named <username>.github.io. where <username> is your Github username.

If the first part of the repository does not match your username, it won't work, so make sure you get it right.

static site form github pages

Step 2:Inside the github editor: Click create a new file and name the file index.html

static site form github pages

Step 3:Navigate to FabForm

Sign up for an account on FabForm.io

Click on Create Endpoint.

Copy the Endpoint.

In the form action property. Replace {form-id} with your new endpoint.

   

<form action="https://fabform.io/f/{form-id}" method="post">
 <label for="email">Your Email</label>
 <input name="email" type="email">
 <button type="submit">Submit</button> 
</form>

Click on Commit new File

Now nagivate to your new static website.`

https://<username>.github.io

All your contact form submissions will be saved and available on FabForm.io