This tutorial shows how we can create a beautiful contact form using jQuery. The concept was taken from http://www.emblematiq.com/projects/niceforms/. This contact form may be useful in situations like you want to put a contact us 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 and IE 11.
Prerequisites
Knowledge of HTML, CSS and jQuery
Final Output
Now I will show you step by step how we can create a beautiful contact form using jquery.
Step 1. Create a folder anywhere in your system. Let’s called this folder contact_form.
Step 2. Now create a contact form with the below code. Create an HTML file called contact.html and put the below code code.
<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. We need some jQuery and css stuff, so we will create those file.
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;
}
contact.css
.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:15px;}
.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 js and css in the head.
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script language="javascript" type="text/javascript" src="contact.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="contact.css" />
Step 5. You need images and jQuery file. So download images and jquery file from the below links and put under contact_form directory.
Step 6. Run contact.html file.
Thanks for your reading. Please do not forget to leave a comment.