Simple way to add Contact Forms on static websites (like Github pages)

So lets say you've got yourself a static portfolio website (maybe on Github pages). Won't it be nice if you can add a nice "Contact me" form so that people can connect with you easier?

But hey, "Github pages doesn't have any server side code or database so how am I gonna get form submissions", you ask.

Well, there's a really simple trick which I will be explaining here. The idea is to use Google forms but within the website (without any redirects). This will work on any static website, not only Github pages.

So, let's get started.

The first step is to make a simple HTML form

	<form>
	<input type="text" name="name" placeholder="name"><br>
	<input type="text" name="email" placeholder="email"><br>
	<textarea name="message"></textarea><br>
	<input type="submit" value="Submit">
	</form>

view raw staticform.html hosted with ❤ by GitHub

Next step is to make a Google form with the SAME fields

Now, we need to know what google calls these fields. So make a pre-filled form, fill it with anything and grab the link.

Fill in any values and click on "Get pre-filled link"

The copied link will look like this

Copied link: https://docs.google.com/forms/d/e/1FAIpQLSetnqwk8lrLySy7uf_Npm32kK6vjqMcqoErg7Ygj7Lca6r6EQ/viewform?usp=pp_url&entry.1660942923=anyName&entry.724182577=anyEmail&entry.1907667966=anyMessage

view raw link.txt hosted with ❤ by GitHub

Now we need to use the entry fields from the pre-filled link into our html form.

	Copied Form: https://docs.google.com/forms/d/e/1FAIpQLSetnqwk8lrLySy7uf_Npm32kK6vjqMcqoErg7Ygj7Lca6r6EQ/viewform?usp=pp_url&entry.1660942923=anyName&entry.724182577=anyEmail&entry.1907667966=anyMessage

	--From this, we get:
	Name for "name" field = entry.1660942923
	Name for "email" field = entry.724182577
	Name for "message" field = entry.1907667966

view raw linkFields.txt hosted with ❤ by GitHub

Using this, we can modify our original form like this:

	<form>
	<input type="text" name="entry.1660942923" id="entry.1660942923" placeholder="name"><br>
	<input type="text" name="entry.724182577" id="entry.724182577" placeholder="email"><br>
	<textarea name="entry.1907667966" id="entry.1907667966"></textarea><br>
	<input type="submit" value="Submit">
	</form>

view raw Edit1.html hosted with ❤ by GitHub

Next step is to set the form action to direct to our google form. Add some hidden <iframe> to block the redirect. Also don't forget to change the final link viewform? to formResponse? (IMPORTANT!)

	<form
	name="gform"
	id="gform"
	action="https://docs.google.com/forms/d/e/1FAIpQLSetnqwk8lrLySy7uf_Npm32kK6vjqMcqoErg7Ygj7Lca6r6EQ/formResponse?"
	target="hidden_iframe"
	onsubmit="submitted=true;"
	>
	<input type="text" name="entry.1660942923" id="entry.1660942923" placeholder="name"><br>
	<input type="text" name="entry.724182577" id="entry.724182577" placeholder="email"><br>
	<textarea name="entry.1907667966" id="entry.1907667966"></textarea><br>
	<input type="submit" value="Submit">
	</form>

	<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {}"></iframe>

view raw finalForm.html hosted with ❤ by GitHub

Now the final step is to add some JavaScript to take care of what happens after submission

	<script src="assets/js/jquery.min.js"></script>
	<script type="text/javascript">var submitted=false;</script>
	<script type="text/javascript">
	$('#gform').on('submit', function(e) {
	$('#gform *').fadeOut(2000);
	$('#gform').prepend('Your message has been sent successfuly...');
	});
	</script>

view raw formSubmit.html hosted with ❤ by GitHub

That's it! Now you have a form that submits to google forms without any redirects. You can enable "email notifications for new responses" to get notified when someone submits the form!