Posted in HTML, jQuery

Nice Contact Form Using jQuery

   Leave a Comment on Nice Contact Form Using jQuery

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:

jquery nice contact form

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.

images  jquery-1.9.1.min

Step 6. Run contact-form.html file. Simply, you can do right click on the HTML file and open with the browser.

Source Code

Download

RELATED POSTS


Preview HTML Form Data using jQuery

Leave a Reply

Your email address will not be published.