Building a Custom Contact Form on GitHub Pages with Google Forms and Apps Script

Posted on by Matt Horn

Creating a contact form on a static site came with some challenges, especially as I wanted to keep my email address private but still direct complete submissions instantly to my inbox.

I have arrived at a solution which does everything I set out to do (and more), and this post should guide you through my thinking as I worked towards a fully functional and cleanly styled contact form that works seamlessly on GitHub Pages using Google Forms and Apps Script.

🧠 Reflect: What Was I Trying to Do?

I wanted to add a working contact form to my static site hosted on GitHub Pages. My goals were:

During the process, I asked a few key questions.

❓ Determine: The Questions I Asked

1. How can I add a form that sends to my email without exposing it?

I initially thought about using a send.PHP file, and concealing my private email address in a hidden .env file, however hosting the site on GitHub Pages meant I couldn’t run PHP or backend code, so I needed a purely frontend solution. I explored options like Formsubmit, but ran into issues around domain verification.

2. How can I integrate a custom form with a Google Form backend?

I soon discovered that I could use a regular <form> and submit directly to a hidden Google Form. Every input field has a unique ID like entry.123456, and by matching those in my custom form, the data would be sent to Google and fill in my linked Google Sheet.

3. How can I avoid the Google Form thank-you redirect?

I set the target of the form to a hidden <iframe>. This meant the user would stay on my static page even after submitting — thus avoiding redirection to Google's clunky thank you page.

<form action="https://docs.google.com/forms/..." target="hidden_iframe" onsubmit="submitted=true;">
                ...
              </form>
              <iframe name="hidden_iframe" style="display:none;"></iframe>

4. How can I be notified when someone contacts me?

Initially, I used the built-in notifications, but in order to view the message I still had to open the spreadsheet and take a look. I used an AI tool to write (a bit of vibe-coding!) a Google Apps Script that would use a sendEmail function using placeholders from the spreadsheet, so that the completed form would arrive in my private email inbox immediately.

5. How can I avoid getting spam from this form?

I added a honeypot field — a hidden input on my form that bots might fill out, but is not displayed to real users. My Apps Script checks that field and ignores submissions that have written anything inside it.

🔁 Refine: what improvements could I make?

As someone who enjoys the minimalist aesthetic, I wasn't initially too keen on including too many animations on my site. However, I do plan to incorporate more interactivity into my form for a smoother and more elegant user experience.

On my own end, I'd love to format the HTML of the email I receive to improve readability.

Conclusion

I am really happy that through seeking to find a free and secure way of receiving messages without exposing my email address in my public code - that this process actually led me to a flexible and reliable solution where I am able to control both the front-end and the back-end development.

What started as a simple project — adding a contact form — turned out to be a rewarding problem-solving process. Best of all, it's all built with just HTML, CSS, DOM using JavaScript, and free google tools that I was already already using.

I'd love to hear if anyone reading this has any feedback or questions on this contact form project? Drop me a message (using mine 😄) — I’d be delighted to help!