Introduction
This tutorial example shows how you can create a nice contact form using jQuery. The concept was taken from http://www.emblematiq.com/projects/niceforms/. This beautiful contact form may be useful in situations like you want to create a Contact Us/Me form on your website or you can also use this contact form for comment purpose for your blog. This contact form consists of four fields such as Full Name, Email Address, Website and Message or Comments. This contact form has been tested in Chrome, Firefox, IE 11 and IE Edge.
Prerequisites
Knowledge of HTML, CSS and jQuery 1.9.1 – 3.6.0
Final Output
The final output of this example will give you the similar form as shown below:
Nice Contact Form
Now I will show you step by step how you can create a beautiful contact form using jquery.
Step 1. Create a folder anywhere in your system. Let’s called this folder nice-contact-form.
Step 2. Now create a contact form with the below code. Create an HTML file called contact-form.html and write the below code code into the HTML file.
<div class="form">
<form action="" method="post" class="niceform">
<fieldset>
<legend>Nice Contact Form</legend>
<dl>
<dt><label for="name">Full Name:</label></dt>
<dd><input type="text" name="name" id="name" size="54" /></dd>
</dl>
<dl>
<dt><label for="email">Email Address:</label></dt>
<dd><input type="text" name="email" id="email" size="54" /></dd>
</dl>
<dl>
<dt><label for="website">Website:</label></dt>
<dd><input type="text" name="website" id="website" size="54" /></dd>
</dl>
<dl>
<dt><label for="message">Message:</label></dt>
<dd><textarea name="message" id="message" rows="8" cols="36"></textarea></dd>
</dl>
<dl class="submit">
<input type="submit" name="submit" id="submit" value="Submit" />
</dl>
</fieldset>
</form>
</div>Step 3. Need some jQuery and css stuff, so I will create those files.
contact.js
//Variables
var imagesPath = "images/";
var textareaTopPadding = 10;
var textareaSidePadding = 10;
//Global Variables
var NF = new Array();
var isIE = false;
var resizeTest = 1;
//Initialization function
function NFInit() {
try {
document.execCommand('BackgroundImageCache', false, true);
} catch (e) {
}
if (!document.getElementById) {
return false;
}
NFDo('start');
}
function NFDo(what) {
var niceforms = document.getElementsByTagName('form');
var identifier = new RegExp('(^| )' + 'niceform' + '( |$)');
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
var ieversion = new Number(RegExp.$1);
if (ieversion < 7) {
return false;
} //exit script if IE6
isIE = true;
}
for (var q = 0; q < niceforms.length; q++) {
if (identifier.test(niceforms[q].className)) {
if (what == "start") { //Load Niceforms
NF[q] = new niceform(niceforms[q]);
niceforms[q].start();
}
else { //Unload Niceforms
niceforms[q].unload();
NF[q] = "";
}
}
}
}
function NFFix() {
NFDo('stop');
NFDo('start');
}
function niceform(nf) {
nf._inputText = new Array();
nf._inputRadio = new Array();
nf._inputCheck = new Array();
nf._inputSubmit = new Array();
nf._inputFile = new Array();
nf._textarea = new Array();
nf._select = new Array();
nf._multiselect = new Array();
nf.add_inputText = function(obj) {
this._inputText[this._inputText.length] = obj;
inputText(obj);
}
nf.add_inputSubmit = function(obj) {
this._inputSubmit[this._inputSubmit.length] = obj;
inputSubmit(obj);
}
nf.add_textarea = function(obj) {
this._textarea[this._textarea.length] = obj;
textarea(obj);
}
nf.start = function() {
//Separate and assign elements
var allInputs = this.getElementsByTagName('input');
for (var w = 0; w < allInputs.length; w++) {
switch (allInputs[w].type) {
case "text":
case "password":
{
this.add_inputText(allInputs[w]);
break;
}
case "submit":
case "reset":
case "button":
{
this.add_inputSubmit(allInputs[w]);
break;
}
}
}
var allButtons = this.getElementsByTagName('button');
for (var w = 0; w < allButtons.length; w++) {
this.add_inputSubmit(allButtons[w]);
}
var allTextareas = this.getElementsByTagName('textarea');
for (var w = 0; w < allTextareas.length; w++) {
this.add_textarea(allTextareas[w]);
}
//Start
for (w = 0; w < this._inputText.length; w++) {
this._inputText[w].init();
}
for (w = 0; w < this._inputSubmit.length; w++) {
this._inputSubmit[w].init();
}
for (w = 0; w < this._textarea.length; w++) {
this._textarea[w].init();
}
}
nf.unload = function() {
//Stop
for (w = 0; w < this._inputText.length; w++) {
this._inputText[w].unload();
}
for (w = 0; w < this._inputSubmit.length; w++) {
this._inputSubmit[w].unload();
}
for (w = 0; w < this._textarea.length; w++) {
this._textarea[w].unload();
}
}
}
function inputText(el) { //extent Text inputs
el.oldClassName = el.className;
el.left = document.createElement('img');
el.left.src = imagesPath + "0.png";
el.left.className = "NFTextLeft";
el.right = document.createElement('img');
el.right.src = imagesPath + "0.png";
el.right.className = "NFTextRight";
el.dummy = document.createElement('div');
el.dummy.className = "NFTextCenter";
el.onfocus = function() {
this.dummy.className = "NFTextCenter NFh";
this.left.className = "NFTextLeft NFh";
this.right.className = "NFTextRight NFh";
}
el.onblur = function() {
this.dummy.className = "NFTextCenter";
this.left.className = "NFTextLeft";
this.right.className = "NFTextRight";
}
el.init = function() {
this.parentNode.insertBefore(this.left, this);
this.parentNode.insertBefore(this.right, this.nextSibling);
this.dummy.appendChild(this);
this.right.parentNode.insertBefore(this.dummy, this.right);
this.className = "NFText";
}
el.unload = function() {
this.parentNode.parentNode.appendChild(this);
this.parentNode.removeChild(this.left);
this.parentNode.removeChild(this.right);
this.parentNode.removeChild(this.dummy);
this.className = this.oldClassName;
}
}
function inputSubmit(el) { //extend Buttons
el.oldClassName = el.className;
el.left = document.createElement('img');
el.left.className = "NFButtonLeft";
el.left.src = imagesPath + "0.png";
el.right = document.createElement('img');
el.right.src = imagesPath + "0.png";
el.right.className = "NFButtonRight";
el.onmouseover = function() {
this.className = "NFButton NFh";
this.left.className = "NFButtonLeft NFh";
this.right.className = "NFButtonRight NFh";
}
el.onmouseout = function() {
this.className = "NFButton";
this.left.className = "NFButtonLeft";
this.right.className = "NFButtonRight";
}
el.init = function() {
this.parentNode.insertBefore(this.left, this);
this.parentNode.insertBefore(this.right, this.nextSibling);
this.className = "NFButton";
}
el.unload = function() {
this.parentNode.removeChild(this.left);
this.parentNode.removeChild(this.right);
this.className = this.oldClassName;
}
}
function textarea(el) { //extend Textareas
el.oldClassName = el.className;
el.height = el.offsetHeight - textareaTopPadding;
el.width = el.offsetWidth - textareaSidePadding;
el.topLeft = document.createElement('img');
el.topLeft.src = imagesPath + "0.png";
el.topLeft.className = "NFTextareaTopLeft";
el.topRight = document.createElement('div');
el.topRight.className = "NFTextareaTop";
el.bottomLeft = document.createElement('img');
el.bottomLeft.src = imagesPath + "0.png";
el.bottomLeft.className = "NFTextareaBottomLeft";
el.bottomRight = document.createElement('div');
el.bottomRight.className = "NFTextareaBottom";
el.left = document.createElement('div');
el.left.className = "NFTextareaLeft";
el.right = document.createElement('div');
el.right.className = "NFTextareaRight";
el.init = function() {
var top = this.parentNode;
if (this.previousSibling) {
var where = this.previousSibling;
}
else {
var where = top.childNodes[0];
}
top.insertBefore(el.topRight, where);
top.insertBefore(el.right, where);
top.insertBefore(el.bottomRight, where);
this.topRight.appendChild(this.topLeft);
this.right.appendChild(this.left);
this.right.appendChild(this);
this.bottomRight.appendChild(this.bottomLeft);
el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px';
el.style.height = el.left.style.height = el.right.style.height = el.height + 'px';
this.className = "NFTextarea";
}
el.unload = function() {
this.parentNode.parentNode.appendChild(this);
this.parentNode.removeChild(this.topRight);
this.parentNode.removeChild(this.bottomRight);
this.parentNode.removeChild(this.right);
this.className = this.oldClassName;
this.style.width = this.style.height = "";
}
el.onfocus = function() {
this.topLeft.className = "NFTextareaTopLeft NFh";
this.topRight.className = "NFTextareaTop NFhr";
this.left.className = "NFTextareaLeftH";
this.right.className = "NFTextareaRightH";
this.bottomLeft.className = "NFTextareaBottomLeft NFh";
this.bottomRight.className = "NFTextareaBottom NFhr";
}
el.onblur = function() {
this.topLeft.className = "NFTextareaTopLeft";
this.topRight.className = "NFTextareaTop";
this.left.className = "NFTextareaLeft";
this.right.className = "NFTextareaRight";
this.bottomLeft.className = "NFTextareaBottomLeft";
this.bottomRight.className = "NFTextareaBottom";
}
}
//Get Position
function findPosY(obj) {
var posTop = 0;
do {
posTop += obj.offsetTop;
} while (obj = obj.offsetParent);
return posTop;
}
function findPosX(obj) {
var posLeft = 0;
do {
posLeft += obj.offsetLeft;
} while (obj = obj.offsetParent);
return posLeft;
}
//Get Siblings
function getInputsByName(name) {
var inputs = document.getElementsByTagName("input");
var w = 0;
var results = new Array();
for (var q = 0; q < inputs.length; q++) {
if (inputs[q].name == name) {
results[w] = inputs[q];
++w;
}
}
return results;
}
//Add events
var existingLoadEvent = window.onload || function() {
};
var existingResizeEvent = window.onresize || function() {
};
window.onload = function() {
existingLoadEvent();
NFInit();
}
window.onresize = function() {
if (resizeTest != document.documentElement.clientHeight) {
existingResizeEvent();
NFFix();
}
resizeTest = document.documentElement.clientHeight;
}
style.css
The following css code applies styles to the nice contact form:
.form{
width:600px;
float:left;
clear:both;
}
fieldset { /*border:none;*/ clear:both;}
label {font-size:14px; font-weight:bold; color:#666;}
label a{font-size:14px; font-weight:bold; color:#666;}
dl {clear:both; width:600px;}
dl.submit {clear:both; width:500px; text-align:center; padding:0 0 0 90px;}
dt {float:left; text-align:right; width:170px; line-height:34px; padding:0 10px 10px 0;}
dd {float:left; width:400px; margin:0 0 10px 0;}
label.check_label{
padding:0 0 0 10px;
line-height:32px;
}
/*Text inputs*/
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none; float:left;}
.NFTextCenter {height:26px; width:auto;background:url(images/input.gif) repeat-x 0 0; padding:8px 0 0 0; margin:0; float:left; line-height:27px;}
.NFTextLeft, .NFTextRight {width:10px; height:34px; vertical-align:middle; float:left;}
.NFTextLeft {background:url(images/input-left.gif) no-repeat 0 0;}
.NFTextRight {background:url(images/input-right.gif) no-repeat 0 0;}
/*Buttons*/
.NFButton {width:auto; height:34px; padding:0 15px; font-weight:bold; background:url(images/button.gif) repeat-x 0 0; cursor:pointer; border:none;color:#FFFFFF; text-shadow:1px 1px #45add8;vertical-align:middle;margin: 0;}
.NFButtonLeft, .NFButtonRight {width:10px; height:34px; vertical-align:middle;}
.NFButtonLeft {background:url(images/button-left.gif) no-repeat 0 0;}
.NFButtonRight {background:url(images/button-right.gif) no-repeat 0 0;}
/*Textareas*/
.NFTextarea {border:none; background:none; font:12px/12px Arial, Helvetica, sans-serif; margin:0;}
.NFTextareaTop, .NFTextareaBottom {height:10px; clear:both; float:none; padding-right:18px;}
.NFTextareaTop {background:url(images/textarea-tr.gif) no-repeat 100% 0;}
.NFTextareaBottom {background:url(images/textarea-br.gif) no-repeat 100% 0; margin-bottom:0px;}
.NFTextareaTopLeft, .NFTextareaBottomLeft {width:10px; height:10px;}
.NFTextareaTopLeft {background:#f2f2e6 url(images/textarea-tl.gif) no-repeat 0 0;}
.NFTextareaBottomLeft {background:#f2f2e6 url(images/textarea-bl.gif) no-repeat 0 0;}
.NFTextareaLeft, .NFTextareaRight, .NFTextareaLeftH, .NFTextareaRightH {float:left; padding-bottom:10px;}
.NFTextareaLeft, .NFTextareaLeftH {width:10px;}
.NFTextareaLeft {background:url(images/textarea-l-off.gif) repeat-y 0 0;}
.NFTextareaLeftH {background:url(images/textarea-l-over.gif) repeat-y 0 0;}
.NFTextareaRight, .NFTextareaRightH {padding-right:5px; padding-bottom:0;}
.NFTextareaRight {background:url(images/textarea-r-off.gif) repeat-y 100% 0;}
.NFTextareaRightH {background:url(images/textarea-r-off.gif) repeat-y 100% 100%;}
/*Focused*/
.NFfocused {border:1px dotted #666;}
/*Hovered*/
.NFh {background-position:0 100%;}
.NFhr {background-position:100% 100%;}
/*Hidden*/
.NFhidden {opacity:0; z-index:-1; position:relative;}
/*Safari*/
select, input, textarea, button {outline:none; resize:none;}Step 4. Include required js and css files in the head section of the HTML page.
<!--<script type="text/javascript" src="jquery-1.9.1.min.js"></script>-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script language="javascript" type="text/javascript" src="contact.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />Step 5. You need images and jQuery file. So download images and jquery file from the below links and put under nice-contact-form directory.
Step 6. Run contact-form.html file. Simply, you can do right click on the HTML file and open with the browser.