Hello Friends, In this blog post, I am going to let you know how to make a contact form using Jquery.
We will also cover Form validation using jQuery examples, and JQuery login form validation.jQuery contact form without PHP|Contact Form Using JQuery|
A contact form is a very important part of your website which provides an interface between you and your users or customers |Contact Form Using JQuery|
If you are looking to make an attractive contact form then you have landed at the right place|Contact Form Using JQuery|
Here we will teach you how to make this contact form with full code support|Contact Form Using JQuery|
How to make this contact form?
This is a very simple process, you just have to follow the step-by-step procedure given below to build a beautiful contact form.
Software used to run this code:
NetBeans IDE,
Xampp Server
However, 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 an attractive contact form. See the below image.
The code files are given below:
cform.html:
[code 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>
[/code]
cform.js:
[code 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(create form);
var heading = document.createElement('h2'); //Here we are giving the Heading of the Form
heading.innerHTML = "Contact Form ";
create form.appendChild(heading);
var line = document.createElement('hr'); // Here we are Giving Horizontal Row After Heading
create form.appendChild(line);
var linebreak = document.createElement('Br');
create form.appendChild(linebreak);
var namelabel = document.createElement('label'); // Here we Create a Label for the Name Field
name label.inner HTML = "Your Name : "; // Set Field Labels
create form.appendChild(name label);
var inputelement = document.createElement('input'); // Here we Create an Input Field for the Name
input element.setAttribute("type", "text");
input element.setAttribute("name", "Dname");
create form.appendChild(input element);
var linebreak = document.createElement('Br');
create form.appendChild(linebreak);
var emaillabel = document.createElement('label'); // Here we Create a Label for the E-mail Field
email label.inner HTML = "Your Email : ";
create form.appendChild(email label);
var emailelement = document.createElement('input'); // Here we Create Input Field for E-mail
email element.setAttribute("type", "text");
email element.setAttribute("name", "Demail");
create form.appendChild(email element);
var emailbreak = document.createElement('Br');
create form.appendChild(email break);
var messagelabel = document.createElement('label'); // Here we Append Textarea
message label.inner HTML = "Your Message : ";
create form.appendChild(message label);
var texareaelement = document.createElement('text area);
Texareaelement.setAttribute("name", "Dmessage");
create form.appendChild(Texareaelement);
var messagebreak = document.createElement('Br');
create form.appendChild(message break);
var submitelement = document.createElement('input'); // Here we Append Submit Button
submit element.setAttribute("type", "submit");
submit element.setAttribute("name", "Dsubmit");
submit element.setAttribute("value", "Submit");
create form.appendChild(submit element);
[/code]
cform.css:
[code 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: light gray;
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;
}
[/code]
Check out this amazing PHP login form at just $9…
you can also go through a few more amazing blog links below related to javascript/jQuery:
Difference Between jQuery and Angular JS In Hindi… Java Script vs Node JS In Hindi… Google Form Captcha Setup Using PHP and Jquery… How to Upload Images with PHP and Jquery Using Form… An Auto Submit Form Using JavaScript… How to limit login attempts in JavaScript… Dynamically Add Remove Form Fields Using JavaScript… Contact Us Popup Form Using JavaScript… How to make a sliding contact form using JavaScript… Contact Form Using JQuery… Progress Bar: How to Show Progress Bar On Form Submission Using JQuery… Difference Between JQuery and JavaScript In Hindi…
Conclusion:
We have gone through How to stop form submission in jQuery. Is the jQuery form valid? How to get from action in jQuery? How can post form data using jQuery? jQuery contact form without PHP, Form validation using jQuery examplesJquery login form validation|Contact Form Using JQuery|
In case of any queries, you can write to us at a5theorys@gmail.com we will get back to you ASAP.
Hope! you would have enjoyed this post Contact Form Using JQuery.
Please feel free to give your important feedback in the comment section below|Contact Form Using JQuery|
Have a great time! Sayonara!
Hey, “been” caught my attention as possibly misspelled?thought you’d want to know. I’ve used spellreport.com before and found it useful.
Thanks,
Brian
Hi there! I know this is kind of off topic but I was wondering which
blog platform are you using for this website? I’m getting fed up of WordPress because I’ve had problems with hackers and I’m looking at alternatives for another
platform. I would be fantastic if you could point me in the direction of a good platform.