Nice Contact Form using jQuery

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

jquery contact form

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.

images       jquery-1.9.1.min

Step 6. Run contact.html file.

Thanks for your reading. Please do not forget to leave a comment.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *