Create a static webpage with a contact form on Github pages

What are GitHub pages?

GitHub pages allow you to host a website directly from your GitHub repository. It can host static websites that take HTML, CSS, and JavaScript files straight from your GitHub repository. It cannot execute server-side code like PHP so we can not add a contact form that redirects to a PHP file. That is where formspree comes in.

Steps

Step 1: Create a new repository named <username>.github.io. <username> is your GitHub username.

Note: My repo name shows an error since I already have a repository named CharalambosIoannou.github.io. Also, the repository must be set to public.

Step 2: Create your static page. Make sure the main html file is named index.html.

In my case I have created my portfolio website as can be seen from the image below.

Step 3: Navigate to formspree

1) In formspree click the sign-up button in the top right corner and enter your email address along with a password.
2) Verify your email
3) Press the + button and enter a form name. The email input box should be auto filled with the email address used to sign up to fromspree.

4) You can then copy paste the code provided by formspree into your website.

I have altered this code slightly to allow visitors to add a message as well. The code used is:

<div id="contact">
        <h2>Get in Touch</h2>
        <div id="contact-form">
                <form action="https://formspree.io/mpzyqdng" method="POST">
                <input type="hidden" name="_subject" value="Contact request from personal website" />
                <input type="email" name="_replyto" placeholder="Your email" required>
                <textarea name="message" placeholder="Type your message" required></textarea>
                <button type="submit">Send</button>
            </form>
        </div>
    </div>

And this code produces the following result:

Step 4: Push your code to GitHub and navigate to your website by typing https://<username>.github.io/ in the URL.

If you cannot see your website after some time has passed then go to your repository, click on settings, scroll down until you see a section named "GitHub Pages" and click on the None dropdown in the Source subsection and set it to master branch.

You know if your website is published if you see this message in the "GitHub Pages" section:

Step 5: Testing your form.

If you want to test your form, then go to your website and fill out your form.
When clicking the send button we get redirected and have to authenticate that we are not a robot 🤖. When ticking the box, soon enough you will receive an email with all the details the sender has provided.

THAT’S IT!!!

I hope you find this easy and useful.

P/S: This is my first post ever. Hope you enjoyed it 😄.

Happy Exploring!!

Resources: GitHub

Comments

[irishgeoff9]

This is a some good additional information on how to create a static website with contact form on github pages

[Charalambos Ioannou]

Thank you! Will definitely check it out and update the article! 😃

[Jonny Muir]

Simple and to the point - just what I needed - ta!

[Charalambos Ioannou]

Thank you very much, glad I could help 😄

[Jonny Muir]

You did!
And here it is in action if you are interested:
jonnymuir.com/#planet11-article

[Charalambos Ioannou]

Amazing, thanks I will take a look!

[adam-fu]

Hi Charalambos,

this is a useful tutorial. It helps making GitHub and GitLab pages more popular.

I would suggest an alternative to use formspree. Because contact forms without a captcha are crap. And paying for this feature 10USD/month I consider a bit overpriced. So how about hosting your own contact form backend? I created an open source project that does just that, including a complete ansible playbook for installation: just-code.io

Cheers,

Adam

[Charalambos Ioannou]

Hello Adam,

If I'm not mistaken the captcha for Formspree is free. At least I'm using my form with captcha and I'm not paying anything. However i have looked at your project and looks very nice and well thought. When i have the time i will definitely replace my Formspree with your project

Sincerely,
Charalambos

[adam-fu]

Hi Charalambos,

I think you are right, just had a second look on formspree.io/plans. They write "All forms come with reCAPTCHA support", the missing dot in the feature list is about advanced spam filtering. So for users with less than 50 contact requests per month, their free tier maybe an option :)

Cheers,
Adam

[Charalambos Ioannou]

Hello Adam,

Oh i see, yes you are right. I don't get 50 requests per month so it's suitable for me. But for people who will be frequently contacted then this is not suitable if they don't wanna pay. I will definitely see your project and contact you in the future on how to integrate it with my website. And also if you want we can write a new article together on github static pages and contact forms :)

Sincerely,
Charalambos

[Yair Even Or]

Hi Adam, your link is dead...

[adam-fu]

Hi Yair,
I changed the domain. team TLD was to expensive. I changed to just-code.io/

[This Dot Media]

Great step-by-step Charalambos 👐🏼 This is really helpful. You did awesome for your first post. Look forward to seeing more 😁

[Charalambos Ioannou]

Thank you so much This Dot Media. It means a lot 😄. Have a great day and will definitely publish more.

[This Dot Media]

You are most welcome. Thanks so much 😄 And woohoo

[Gui Hebling]

Thanks for the tip on Formspree! 👏😁
With that, I was able to deploy my first website with a functioning form! 🥳🎉

[Charalambos Ioannou]

That's amazing 😀😀 congratulations 🎊 🎉
I'm glad i could help 😃😃😃

[irishgeoff22]

Helpful tutorial github pages contact form

[Victor Araujo]

Thanks for the tutorial! This is gonna help me!

[Charalambos Ioannou]

No problem 🙂 I'm glad I can help

[irishgeoff9]

You may find this helpful also
fabform.io/a/create-a-static-websi...

[John Knight]

Thanks. Very glad I found this. But I just tried Formspree and the form's email came from "Formspree [e-mail]". Is that correct? Not very nice. Is there a way to change that? Thanks.

[Charalambos Ioannou]

Yes, this is correct. Unfortunately you cannot change this because the user’s text is passed through formspree’s sever to create and direct the email to you. However this is just when you receive the email from a person. When you will reply back then the reply comes directly through your email address and not formspree.

Thank you and apologies for the late reply.