JavaScript Contact Form

Here is an easy way to add a contact form to every page without having to code it every time. This technique uses a JavaScript file that creates the form and a CSS file that formats it. Notice that the JavaScript and CSS files are downloaded only once so this code is not constantly being downloaded everytime a page is requested as it would be if the HTML form was embedded in the HTML pages.

First, the CSS page for the contact form.

/* contact.css */
.contact-form-container {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	transition: .5s;
	background-color: #fff;
	z-index: 1;
}

.contact-form {
	position: absolute;
	max-width: 500px;
	left: -500px;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	width: 95%;
	border-radius: 20px;
	overflow: hidden;
	transition: .5s ease .5s;
	cursor: pointer;
}

	.contact-form-input,
	.contact-form button {
		font-family: inherit;
		font-weight: bold;
		font-size: 12px;
		padding: 24px;
		letter-spacing: 1px;
		border: none;
		width: 100%;
		margin: 0;
		background-color: transparent;
		outline: none;
	}

	.contact-form button {
		background-color: #8d399e;
		padding: 20px;
		color: #fff;
		text-transform: uppercase;
	}

	.contact-form div {
		cursor: default;
	}

	.contact-form div:nth-child(1),
	.contact-form div:nth-child(2) {
		position: relative;
	}

		.contact-form div:nth-child(1)::after,
		.contact-form div:nth-child(2)::after {
			content: "";
			position: absolute;
			display: block;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			background-color: rgba(0,0,0,0.15);
		}


	.contact-form textarea {
		overflow: auto;
		height: 100px;
		text-transform: none;
	}

.contact-form-container:target {
	visibility: visible;
	opacity: 1;
}

	.contact-form-container:target .contact-form {
		left: 50%;
	}

Second, the JavaScript file which uses the above CSS classes.

// contact.js
function createContactForm() {
	var form = document.createElement("form");
	form.action = "/ajax/email";
	form.method = "post";
	form.className = "contact-form";
	form.onsubmit = function () {
		alert("Back-end not implemented!");
		return false;
	};
	
	var div = document.createElement("div");
	var input = document.createElement("input");
	input.type = "text";
	input.name = "name";
	input.placeholder = "NAME";
	input.className = "contact-form-input";
	input.autocomplete = "off";
	input.maxLength = 25;
	input.required = true;
	div.appendChild(input);
	form.appendChild(div);
	
	div = document.createElement("div");
	input = document.createElement("input");
	input.type = input.name = "email";
	input.placeholder = "EMAIL";
	input.className = "contact-form-input";
	input.autocomplete = "off";
	input.required = true;
	div.appendChild(input);
	form.appendChild(div);
	
	div = document.createElement("div");
	input = document.createElement("textarea");
	input.name = "message";
	input.placeholder = "MESSAGE";
	input.className = "contact-form-input";
	input.required = true;
	div.appendChild(input);
	form.appendChild(div);
	
	div = document.createElement("div");
	input = document.createElement("button");
	input.name = input.type = "submit";
	input.innerText = "send";
	div.appendChild(input);
	form.appendChild(div);
	
	div = document.createElement("div");
	div.id = "id-contact-form";
	div.className = "contact-form-container";
	div.appendChild(form);
	
	document.body.appendChild(div);
}

(function () {
	if (window.addEventListener) {
		window.addEventListener("load", createContactForm, false);
	} else if (window.attachEvent) {
		window.attachEvent("onload", createContactForm);
	} else {
		window["onload"] = createContactForm;
	}
})();

Third, the HTML file that includes the above files thereby automatically having the contact form added to its code.

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="contact.css" />
	<script type="text/javascript" src="contact.js"></script>
	<style>
		.center {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
	<title>Home Page</title>
</head>
<body>
	<div class="center">
		<h1>Home Page</h1>
		<h2><a href="#id-contact-form">CONTACT FORM</a></h2>
		<h2><a href="index.html">home</a></h2>
		<h2><a href="services.html">services</a></h2>
		<h2><a href="about.html">about</a></h2>
	</div>
</body>
</html>

Coding Video

https://youtu.be/bbdic7lV0qM