contact-form-jquery

Contact Form Using JQuery

Hello Friends,

In this blog post, I am going to let you know about how to make contact form using Jquery?

A contact form is a very important part in your website which provides an interface between you and your users or customer.

If you are looking to make an attractive contact form then you are landed at the right place.

Here we will teach you how to make this contact form with full code support.


How to make this contact Form?

This is a very simple process, you just to follow the step by step procedure given below.

Software used to run this code:

NetBeans IDE,
Xampp Server

Though you can use any suitable platform or software as per your comfort.


Create a project name as contact_form.

If you have no idea how to create a project using NetBeans then please go through the below link.

How to make your first project using NetBeans?

Once you create a project then create the below-given files into your project source file and copy & paste the code as

given below. After this run your project and you will see a attractive contact form.  See the below image.

cont1


The code files are given below:

cform.html:

<!DOCTYPE html>
<html>
<head>
<title>Contact Form using JavaScript</title> <!-- Include CSS file here -->
<link href="cform.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="sample_cform"></div>
<!-- Include Java Script file here -->
<script src="cform.js" type="text/javascript"></script>
</div>
</body>
</html>

cform.js:

// Here we are fetching HTML Elements in Variables by ID.
var x = document.getElementById("sample_cform");
var createform = document.createElement('form'); // Create New Element Form
createform.setAttribute("action", ""); // Setting Action Attribute on Form
createform.setAttribute("method", "post"); // Setting Method Attribute on Form
x.appendChild(createform);

var heading = document.createElement('h2'); //Here we are giving Heading of Form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);

var line = document.createElement('hr'); // Here we are Giving Horizontal Row After Heading
createform.appendChild(line);

var linebreak = document.createElement('br');
createform.appendChild(linebreak);

var namelabel = document.createElement('label'); // Here we Create Label for Name Field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);

var inputelement = document.createElement('input'); // Here we Create Input Field for Name
inputelement.setAttribute("type", "text");
inputelement.setAttribute("name", "dname");
createform.appendChild(inputelement);

var linebreak = document.createElement('br');
createform.appendChild(linebreak);

var emaillabel = document.createElement('label'); // Here we Create Label for E-mail Field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);

var emailelement = document.createElement('input'); // Here we Create Input Field for E-mail
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);

var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);

var messagelabel = document.createElement('label'); // Here we Append Textarea
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);

var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);

var messagebreak = document.createElement('br');
createform.appendChild(messagebreak);

var submitelement = document.createElement('input'); // Here we Append Submit Button
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);

cform.css:

// we have used the Google Fonts with the below import link.
@import url('https://fonts.googleapis.com/css?family=Spectral');
div#main{
width:830px;
height:650px;
margin:0 auto;
font-family: 'Spectral', serif;
}
div#sample_cform{
text-align:center;
border:1px solid #ccc;
width:300px;
padding:0 50px 15px;
margin-top:20px;
box-shadow:0 0 15px;
border-radius:6px;
float:left;
background-color: lightgray;
margin-left: 450px;

}

#main h1{
margin-bottom: 5px;
margin-left: 435px;
}
hr{
margin-top:-5px
}
label{
float:left;
font-size:16px
}
input[type="text"]{
width:100%;
margin-top:10px;
height:35px;
margin-bottom:25px;
padding:10px;
border:3px solid darkslateblue;
}
textarea{
width:100%;
border:3px solid darkslateblue;
padding:10px;
margin-bottom:25px;
margin-top:10px;
height:100px;
resize:none
}
input[type="submit"]{
width:100%;
padding:10px 45px;
background-color:#2BC1F2;
border:none;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
font-family: 'Spectral', serif;
margin-left:10px;

}

In a case of any queries, you can write us at anurag@a5theory.com we will get back to you ASAP.

Hope! you would have enjoyed this post.

Please feel free to give your important feedbacks in the comment section below.

Have a great time! Sayonara!