In this tutorial you will learn to create simple HTML form using  jQuery script.

We have just created a blank div (form1) in HTML. Using jQuery we are updating complete HTML form in the div (form1).  You can use the code directly in any of your project.



It consists of three files:

  • Html file – jqueryform.html : In this file, a div is assigned to a form.
  • jQuery file – jqueryform.js : Here, form elements are append in form using jQuery script.
  • Css file – jqueryform.css : Here, look and feel of the form is optimized using css.

 

Below is our complete code with download and live demo option

create-form-jquery

HTML File – jqueryform.html


<!DOCTYPE html>
<html>
<head>
<title>Create Form Using jQuery - Demo Preview</title>
<link href="jqueryform.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jqueryform.js"></script>
</head>
<body>
<div id="container">
<h2>Dynamically Created Form Using jQuery</h2>
<div id="form1">
<!-- Dynamic Form Div -->
</div>
</div>
</body>
</html>

jQueryFile -jqueryform.js

$(document).ready(function() {
$("div#form1").append(
// Creating Form Div and Adding <h2> and <p> Paragraph Tag in it.
$("<h3/>").text("Contact Form"), $("<p/>").text("This is my form. Please fill it out. It's awesome!"), $("<form/>", {
action: '#',
method: '#'
}).append(
// Create <form> Tag and Appending in HTML Div form1.
$("<input/>", {
type: 'text',
id: 'vname',
name: 'name',
placeholder: 'Your Name'
}), // Creating Input Element With Attribute.
$("<input/>", {
type: 'text',
id: 'vemail',
name: 'email',
placeholder: 'Your Email'
}), $("<textarea/>", {
rows: '5px',
cols: '27px',
type: 'text',
id: 'vmsg',
name: 'msg',
placeholder: 'Message'
}), $("<br/>"), $("<input/>", {
type: 'submit',
id: 'submit',
value: 'Submit'
})))
});

Css File -jqueryform.css


@import "http://fonts.googleapis.com/css?family=Raleway";
/*-----------------------------------------------------------------
CSS settings for HTML Div form1 (Dynamically Created using jQuery)
------------------------------------------------------------------*/
div#form1{
width:250px;
height:430px;
border:2px solid #a5a5a5;
padding:20px;
background-color:#f3f3f3;
border-radius:3px;
float:left;
text-align:center;
margin-left:100px;
margin-top:50px
}
h3,p{
text-align:center;
font-family:'Raleway',sans-serif;
color:#006400
}
input{
width:100%;
margin:10px 0;
padding:5px;
height:35px;
box-shadow:1px 1px 1px 1px gray;
border-radius:3px
}
input#submit{
width:100%;
margin:10px 15px 10px 0;
padding:5px;
background-color:#3fb8e8;
box-shadow:0 3px 0 0 #3293ba;
border-radius:3px;
color:#fff;
height:41px;
font-size:16px
}
textarea{
margin:10px 0;
padding:5px;
box-shadow:1px 1px 1px 1px gray;
border-radius:3px
}
div#container{
margin:50px auto;
width:960px
}
h2{
font-family:'Raleway',sans-serif;
color:#006400;
text-shadow:1px 1px 1px gray
}

Pabbly Form Builder


Conclusion

Hope, this tutorial teach you about creating form using jQuery script.

Get more related stuff here –

You can write down your feedback or share your codes in the comment form below: