PROWAREtech
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
Comment
