articles » current » javascript » contact-form-creation-example

JavaScript: Contact Form Creation Example

How to create a contact form using JavaScript createElement and appendChild procedures

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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE