Learn creating contact form using simple JavaScript codes. Here is a tutorial guide to tell you about complete JavaScript codes to create Contact Form.

In this tutorial, we have created a form div with id “form_sample” in our html page.

<div id="form_sample"></div>

In our js code we have created form elements using .createElement function and appended the elements to html div using the .appendChild function of JavaScript.

var x = document.getElementById("form_sample");
var createform = document.createElement('form'); // Create New Element Form
x.appendChild(createform);

Further, we have included some CSS codes to give proper alignment to form.

 

 Below is our complete code with download and live demo option

Javascript-contact-form

 

Download Code   
 

-: See Also :-

Send Email on Form Submission 

HTML File – demo.html

Simple HTML codes to add form Div.


<!DOCTYPE html>
<html>
<head>
<title>Contact Form using JavaScript</title> <!-- Include CSS file here -->
<link href="css/form.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Contact Form using JavaScript</h1>
<div id="form_sample"></div> <!-- Include JS file here -->
<script src="js/form.js"></script>
</div>
</body>
</html>

JavaScript File -form.js

  • Create object for the form.
  • Set action attribute (post method).
  • Create field label.
  • Append form fields and set it’s label.

// Fetching HTML Elements in Variables by ID.
var x = document.getElementById("form_sample");
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'); // Heading of Form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);

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

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

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

var inputelement = document.createElement('input'); // 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'); // Create Label for E-mail Field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);

var emailelement = document.createElement('input'); // 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'); // 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'); // Append Submit Button
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);

Css File – form.css

Css coding to give proper alignment to form elements and the complete form itself.


/* Below line is write to use Google font online */
@import "http://fonts.googleapis.com/css?family=Ubuntu";
div#main{
width:830px;
height:650px;
margin:0 auto;
font-family:'Ubuntu',sans-serif
}
div#form_sample{
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
}
#main h1{
margin-top:40px
}
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 #2BC1F2
}
textarea{
width:100%;
border:3px solid #2BC1F2;
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:'Ubuntu',sans-serif
}
/* -------------------------------------
CSS for Sidebar (optional)
---------------------------------------- */
div#fugo{
float:right
}

Pabbly Form Builder

Conclusion:

Given above is the JavaScript code to create simple contact form. If you want to style your form use above CSS ,

And if you have any query regarding the post, you can contact us or put commenst below any time.

You may also like –

Related Posts:

How To Create Pop-up Contact Form Using JavaScript
How To Create Sidebar Sliding Contact Form With JavaScript
How To Dynamically Add and Remove Form Fields Using JavaScript