Contact Form for Static Website

Contact Form for Static Website

Most of us would think about hosting our website in github or google drive but the problem is for form submission (like contact form) as we cannot use php or any backend in static website.

So, To create a static form for your static website follow me 😊

1. Create a static form using html and css

<html>

<head>

<title>Contact Page by Binit KC</title>

integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<style>

.form-control {

border: none;

border-bottom: 2px solid blue;

}

.form-control:focus {

border: 2px solid green;

}

.icon {

font-size: 20px;

background: ;

color: white;

}

</style>

</head>

<body>

<h1>Contact Us Static Form by Binit KC</h1><br>

</div>

<input id="emailField" name="entry.1523672953" type="email" required placeholder="* Your Email"

class="form-control requiretop" />

</div>

<textarea id="messageField" name="entry.2019507677" rows="4" placeholder="* Your Message"

class="form-control requiretop"></textarea>

</div>

<button id="send" type="submit" class="btn btn-success"><i class="icon fa fa-paper-plane"

aria-hidden="true"></i>

</button>

</div>

</form>

<strong>Thank You!</strong> Message sent successfully...

</div>

</body>

</html>

I have used bootstrap too to make the form look better and jquery(ajax) for handling the form.

2. Now, create a google form with your required fields

The google form may look like this and you can add fields as much you want and make sure to match the field name of both google form and your html form.

3. Now, we have to find out the name of the fields using inspect method. For that open your google form in preview mode. Then right button click and go to inspect.

Now, Go to element tab in inspect press Ctrl + F and search for "entry."

For searching for entry. you will find three field names as entry.<random_numbers>. Those three field names are of Name, Email and Message. Now, copy those field names to notepad as:

Also, copy the url of you form and change viewform to formResponse? as:

Initial url : https://docs.google.com/forms/d/e/1FAIpQLSczAYiRZyyyKUXU0L7-HiuprPsArSnR1wVOi81KuQmjAk9Mig/viewform

After editing url : https://docs.google.com/forms/d/e/1FAIpQLSczAYiRZyyyKUXU0L7-HiuprPsArSnR1wVOi81KuQmjAk9Mig/formResponse?

4. Now, lets edit the html file of form adding some scripts of ajax as:

function postToGoogle() {

var field1 = $("#nameField").val();

var field2 = $("#emailField").val();

var field3 = $("#messageField").val();

if(field1 == ""){

alert('Please Fill Your Name');

document.getElementById("nameField").focus();

return false;

}

if(field2 == ""){

alert('Please Fill Your Email');

document.getElementById("emailField").focus();

return false;

}

if(field3 == ""){

alert('Please Fill Your Message');

document.getElementById("messageField").focus();

return false;

}

$.ajax({

url: "https://docs.google.com/forms/d/e/1FAIpQLSczAYiRZyyyKUXU0L7-HiuprPsArSnR1wVOi81KuQmjAk9Mig/formResponse?",

data: {"entry.2005620554": field1, "entry.1045781291": field2, "entry.839337160": field3},

type: "POST",

dataType: "xml",

success: function(d)

{

error: function(x, y, z)

{

$('#success-msg').show();

$("#form")[0].reset();

}

});

return false;

}

</script>

Points to be noted are change the url: to your edited url and change the entries field too and add this script code to you html file.

So, For final html file Click Here to download.

Congratulations! You are all done. Now, lets test if it works or not. For that open the html form file in any web browser and fill up the form and click on Send.