Dynamic forms are instant crafted form. It’s very simple and quick to create form dynamically with dynamic form builder. One will click on the required form fields and form will be constructed with just few clicks. You can add new fields like input fields, Radio button, checkbox, email fields and can also remove them.

Below is our complete code with download and live demo option

 

Last time, we have shown you how to create dynamic form using JavaScript. Here, you will learn the same using Jquery.


Pabbly Form Builder


HTML File – dynamicallyformcreation.html


<!DOCTYPE html>
<html>
<head>
<title>Create Dynamic Form Using jQuery </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="css/style.css" rel="stylesheet">
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<div class="maindiv">
<div id="header"></div>
<div class="menu">
<button id="namebutton"><img src="images/name-img.png">Name</button>
<button id="emailbutton"><img src="images/email.png">Email</button>
<button id="addressbutton"><img src="images/contact-img.png">Address</button>
<button id="checkboxbutton"><img src="images/check-img.png">CheckBox</button>
<button id="radioaddbutton"><img src="images/radio-img.png">Radio</button>
<button id="reset">Reset</button>
</div>
<div class="InputsWrapper1">
<div id="yourhead">
<div id="your">
<h2 id="yourtitle">Your Form Title<img src="images/edit-form.png"></h2>
<h4 id="justclickid">Just Click on Fields on left to start building your form. It's fast, easy & fun.</h4>
</div>
</div>
<div id="InputsWrapper"></div>
</div>
</div>
</body>
</html>

jQuery File – script.js


$(document).ready(function() {
/*------------------------------------------------
To Edit Your Form Heading
-------------------------------------------------*/
$("#yourtitle").click(function() {
$("#your").hide();
var createhead = $(document.createElement('div'));
createhead.attr("id", "your1");
createhead.html('<label id="titleid">' + '<b>Title : </b>' + '</label>' + '<br/>' + '<input id="inputhead" "type=text placeholder="Type Your Choicehead"/>' +
'<button id="doneid">Done</button>');
$("#yourhead").append(createhead);
var get1 = $("#yourtitle").text();
$("#inputhead").val(get1);
$("#doneid").click(function() {
var get = $("#inputhead").val();
if (get == 0) {
alert("Cannot Leave Field Blank");
} else {
$("#yourtitle").html('<h1>' + get + '</h1>');
$("#yourtitle").css({
"text-align": "center",
"font-size": "25px",
"color": "white",
"cursor": "pointer"
});
$("#your1").remove();
$("#your").show();
$("#your").css({
"background-color": "#F4D4FA",
"width": "530px"
});
$("#justclickid").hide();
}
});
});
/*-------------------------------------------------------------------*/
var MaxInputs = 100; //Maximum Input Boxes Allowed
/*-------------------------------------------------------------------
To Keep Track of Fields And Divs Added
-------------------------------------------------------------------*/
var nameFieldCount = 0;
var emailFieldCount = 0;
var addressFieldCount = 0;
var checkboxFieldCount = 0;
var radiobuttonFieldCount = 0;
var checkboxdivCount = 0;
var checkbox_sub_para_Count = 0;
var radiobuttondivCount = 0;
var radio_sub_para_Count = 0;
var InputsWrapper = $("#InputsWrapper"); // Input Box Wrapper ID
var x = InputsWrapper.length; // Initial Field Count
/*--------------------------------------------------------------
To Get Fields Button ID
----------------------------------------------------------------*/
var namefield = $("#namebutton");
var emailfield = $("#emailbutton");
var addressfield = $("#addressbutton");
var checkbox = $("#checkboxbutton");
var radiobutton = $("#radioaddbutton");
$(InputsWrapper).sortable(); // To Make Added Fields Sortable
/*---------------------------------------------------------------
To Add Name Field
----------------------------------------------------------------*/
$(namefield).click(function() {
if (x <= MaxInputs) {
nameFieldCount++;
$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_0' + nameFieldCount + '">' + '<label>Name:' + nameFieldCount + '</label>' +
'<input type="text" name="mytext[]" id="field_' + nameFieldCount + '" placeholder="Name ' + nameFieldCount + '"/>' + '<button class="removeclass0">x</button>' +
'<button class="addclass0">+</button>' + '<br>' + '</div>' + '</div>');
x++;
}
return false;
});
$("body").on("click", ".removeclass0", function() {
$(this).parent('div').remove(); // To Remove Name Field
x--;
return false;
});
$("body").on("click", ".addclass0", function() {
nameFieldCount++; // To Add More Name Fields
$(this).parent('div').parent('div').append('<div class="name">' + '<label>Name:' + nameFieldCount + '</label>' + '<input type="text" name="mytext[]" id="field_' +
nameFieldCount + '" placeholder="Name ' + nameFieldCount + '"/>' + '<button class="removeclass0">x</button>' + '<button class="addclass0">+</button>' + '<br>' +
'</div>');
x++;
return false;
});
/*------------------------------------------------
To Add Email Field
-------------------------------------------------*/
$(emailfield).click(function() {
if (x <= MaxInputs) {
emailFieldCount++;
$(InputsWrapper).append('<div>' + '<div class="email" id="InputsWrapper_1' + emailFieldCount + '">' + '<label>Email:' + emailFieldCount + '</label>' +
'<input type="text" name="myemail[]" id="field_' + emailFieldCount + '" placeholder="Email' + emailFieldCount + '"/>' + '<button class="removeclass1">x</button>' +
'<button class="addclass1">+</button>' + '<br>' + '</div>' + '</div>');
x++;
}
return false;
});
$("body").on("click", ".removeclass1", function() {
$(this).parent('div').remove(); // To Remove Email Field
x--;
return false;
});
$("body").on("click", ".addclass1", function() {
emailFieldCount++; // To Add More Email Field
$(this).parent('div').parent('div').append('<div class="email">' + '<label>Email:' + emailFieldCount + '</label>' + '<input type="text" name="myemail[]" id="field_' +
emailFieldCount + '" placeholder="Email' + emailFieldCount + '"/>' + '<button class="removeclass1">x</button>' + '<button class="addclass1">+</button>' + '<br>' +
'</div>');
x++;
return false;
});
/*------------------------------------------------
To Add Address Field
-------------------------------------------------*/
$(addressfield).click(function() {
if (x <= MaxInputs) {
addressFieldCount++;
$(InputsWrapper).append('<div>' + '<div class="address" id="InputsWrapper_2' + addressFieldCount + '">' + '<label>Address:' + addressFieldCount + '</label>' + '<p>' +
'<textarea type="text" name="myaddress[]" id="field_' + addressFieldCount + '" placeholder="Address' + addressFieldCount + '" />' +
'<button class="removeclass2">x</button>' + '<button class="addclass2">+</button>' + '</p>' + '<br>' + '</div>' + '</div>');
x++;
}
return false;
});
$("body").on("click", ".removeclass2", function() {
$(this).parent('p').parent('div').remove(); // To Remove Address Field
x--;
return false;
});
$("body").on("click", ".addclass2", function() {
addressFieldCount++; // To Add More Address Field
$(this).parent('p').parent('div').parent('div').append('<div class="address">' + '<label>Address:' + addressFieldCount + '</label>' + '<p>' +
'<textarea type="text" name="myaddress[]" id="field_' + addressFieldCount + '" placeholder="Address' + addressFieldCount + '"/>' +
'<button class="removeclass2">x</button>' + '<button class="addclass2">+</button>' + '<br>' + '</p>' + '</div>');
x++;
return false;
});
/*------------------------------------------------
To Add Check-Box
-------------------------------------------------*/
$(checkbox).click(function() {
if (x <= MaxInputs) {
checkboxFieldCount++;
checkboxdivCount++;
checkbox_sub_para_Count++;
$(InputsWrapper).append('<div class="checkbox" id="InputsWrapper_3_' + checkboxdivCount + '">' + '<p class="checkbox_child" id="para' + checkbox_sub_para_Count + '">' +
'<label>CheckBox:' + checkboxFieldCount + '</label>' + '<input type="checkbox" name="mycheckbox[]" id="field_' + checkboxFieldCount + '" value="CheckBox' +
checkboxFieldCount+++'"/>' + '<button class="removeclass3">x</button>' + '<button class="addclass3">+</button>' + '</p>' + '<p class="checkbox_child" id="para' +
checkbox_sub_para_Count + '" >' + '<label>CheckBox:' + checkboxFieldCount + '</label>' + '<input type="checkbox" name="mycheckbox[]" id="field_' +
checkboxFieldCount + '" value="CheckBox' + checkboxFieldCount+++'"/>' + '<button class="removeclass3">x</button>' + '<button class="addclass3">+</button>' + '</p>' +
'<p class="checkbox_child" id="para' + checkbox_sub_para_Count + '" >' + '<label>CheckBox:' + checkboxFieldCount + '</label>' +
'<input type="checkbox" name="mycheckbox[]" id="field_' + checkboxFieldCount + '" value="CheckBox' + checkboxFieldCount + '"/>' +
'<button class="removeclass3">x</button>' + '<button class="addclass3">+</button>' + '</p>' + '</div>');
x++;
}
return false;
});
$("body").on("click", ".removeclass3", function() {
$(this).parent('p').remove(); // To Remove Check-Box
x--;
return false;
});
$("body").on("click", ".addclass3", function() {
checkboxFieldCount++; // To Add More Check-Box
$(this).parent('p').parent('div').append('<p class="checkbox_child" id="para' + checkbox_sub_para_Count + '">' + '<label>CheckBox:' + checkboxFieldCount + '</label>' +
'<input type="checkbox" name="mycheckbox[]" id="field_' + checkboxFieldCount + '" value="CheckBox' + checkboxFieldCount + '"/>' +
'<button class="removeclass3">x</button>' + '<button class="addclass3">+</button>' + '</p>');
x++;
return false;
});
/*------------------------------------------------
To Add Radio-Button
-------------------------------------------------*/
$(radiobutton).click(function() {
if (x <= MaxInputs) {
radiobuttonFieldCount++;
radiobuttondivCount++;
radio_sub_para_Count++;
$(InputsWrapper).append('<div class="radiobutton" id="InputsWrapper_4_' + radiobuttondivCount + '">' + '<p class="radiobutton_child" id="para' + radio_sub_para_Count +
'">' + '<label>Radio:' + radiobuttonFieldCount + '</label>' + '<input type="radio" name="myradio[]" id="field_' + radiobuttonFieldCount + '" placeholder="Radio_' +
radiobuttonFieldCount+++'"/>' + '<button class="removeclass4">x</button>' + '<button class="addclass4">+</button>' + '</p>' +
'<p class="radiobutton_child" id="para' + radio_sub_para_Count + '">' + '<label>Radio:' + radiobuttonFieldCount + '</label>' +
'<input type="radio" name="myradio[]" id="field_' + radiobuttonFieldCount + '" placeholder="Radio_' + radiobuttonFieldCount+++'"/>' +
'<button class="removeclass4">x</button>' + '<button class="addclass4">+</button>' + '</p>' + '<p class="radiobutton_child" id="para' + radio_sub_para_Count +
'">' + '<label>Radio:' + radiobuttonFieldCount + '</label>' + '<input type="radio" name="myradio[]" id="field_' + radiobuttonFieldCount + '" placeholder="Radio_' +
radiobuttonFieldCount + '"/>' + '<button class="removeclass4">x</button>' + '<button class="addclass4">+</button>' + '</p>' + '</div>');
x++;
}
return false;
});
$("body").on("click", ".removeclass4", function() {
$(this).parent('p').remove(); // To Remove Radio-Button
x--;
return false;
});
$("body").on("click", ".addclass4", function() {
radiobuttonFieldCount++; // To Add More Radio-Button
$(this).parent('p').parent('div').append('<p class="radiobutton_child" id="para' + radio_sub_para_Count + '">' + '<label>Radio:' + radiobuttonFieldCount + '</label>' +
'<input type="radio" name="myradio[]" id="field_' + radiobuttonFieldCount + '" placeholder="Radio_' + radiobuttonFieldCount + '"/>' +
'<button class="removeclass4">x</button>' + '<button class="addclass4">+</button>' + '</p>');
x++;
return false;
});
$("#reset").on("click", function() {
$("#InputsWrapper").empty(); // To Reset All Elements
});
});

Css File – style.css


#header{
background-color:#40B1ED;
height:60px
}
.maindiv{
border:1px solid #000;
background:#FAFAFA;
width:960px;
height:1000px;
position:absolute;
top:20px;
left:350px;
overflow:auto
}
.menu{
background-color:#fff;
width:220px;
height:350px;
padding:15px;
border:1px solid #000;
border-radius:4px;
position:absolute;
top:70px;
left:10px;
box-shadow:0 0 5px #000
}
.menu img{
float:left;
padding-left:10px
}
#your{
padding:10px;
width:400px;
height:120px;
position:absolute;
top:10px;
left:50px;
border:1px dashed #fff
}
#your:hover{
background-color:#FBF0FC;
border:1px dashed #000;
cursor:pointer
}
#InputsWrapper{
position:absolute;
top:150px;
left:40px
}
#your1{
padding:10px;
width:500px;
height:120px;
position:absolute;
top:10px;
left:50px;
border:1px dashed #000
}
#titleid{
font-size:20px
}
#inputhead{
font-size:30px;
border-radius:2px;
box-shadow:0 0 5px #40B1ED;
border:1px solid #40B1ED;
width:450px
}
#doneid{
position:absolute;
bottom:5px;
right:5px;
color:#fff;
background-color:#40B1ED;
border-radius:2px;
border:2px solid #40B1ED
}
#namebutton{
border:4px solid #9AB7F5;
width:200px;
height:50px;
background:#E4E7F0 url(../images/tab-bg.png) repeat-x;
margin-bottom:10px;
font-size:20px;
border-radius:2px
}
#namebutton:hover{
border:4px solid #9680ED;
border-radius:2px;
cursor:pointer
}
#emailbutton{
border:4px solid #9AB7F5;
width:200px;
height:50px;
background:#efefef url(../images/tab-bg.png) repeat-x;
margin-bottom:10px;
font-size:20px;
border-radius:2px
}
#emailbutton:hover{
border:4px solid #9680ED;
border-radius:2px;
cursor:pointer
}
#addressbutton{
border:4px solid #9AB7F5;
width:200px;
height:50px;
background:#efefef url(../images/tab-bg.png) repeat-x;
margin-bottom:10px;
font-size:20px;
border-radius:2px
}
#addressbutton:hover{
border:4px solid #9680ED;
border-radius:2px;
cursor:pointer
}
#checkboxbutton{
border:4px solid #9AB7F5;
width:200px;
height:50px;
background:#efefef url(../images/tab-bg.png) repeat-x;
margin-bottom:10px;
font-size:20px;
border-radius:2px
}
#checkboxbutton:hover{
border:4px solid #9680ED;
border-radius:2px;
cursor:pointer
}
#radioaddbutton{
border:4px solid #9AB7F5;
width:200px;
height:50px;
background:#efefef url(../images/tab-bg.png) repeat-x;
margin-bottom:10px;
font-size:20px;
border-radius:2px
}
#radioaddbutton:hover{
border:4px solid #9680ED;
border-radius:2px;
cursor:pointer
}
#reset{
border:4px solid #9AB7F5;
width:200px;
height:50px;
margin-bottom:10px;
font-size:20px;
border-radius:2px
}
.InputsWrapper1{
background-color:#fff;
width:650px;
height:900px;
border:1px solid #000;
position:absolute;
top:70px;
right:10px;
border-radius:4px;
overflow:auto;
box-shadow:0 0 5px #000
}
div.name{
background:#E1F3FC;
margin-bottom:10px;
margin-top:15px;
margin-left:10px;
width:300px;
height:35px;
border-radius:5px;
border:1px solid blue;
padding:5px;
cursor:move
}
.name input,.email input{
padding:5px
}
div.email{
background:#E1F3FC;
margin-bottom:10px;
margin-top:15px;
margin-left:10px;
width:300px;
height:35px;
border-radius:5px;
border:1px solid blue;
padding:5px;
cursor:move
}
div.address{
position:relative;
background:#E1F3FC;
margin-bottom:10px;
margin-top:15px;
margin-left:10px;
width:320px;
height:50px;
border-radius:5px;
border:1px solid blue;
padding:5px;
cursor:move
}
.address textarea{
padding-left:5px
}
div.address label{
position:absolute
}
div.address p{
position:absolute;
right:10px;
top:-10px
}
.checkbox_child{
background:#E1F3FC;
margin-bottom:10px;
margin-top:20px;
margin-left:10px;
width:170px;
height:25px;
border-radius:5px;
border:1px solid blue;
padding:5px;
cursor:move
}
.radiobutton_child{
background:#E1F3FC;
margin-bottom:10px;
margin-top:20px;
margin-left:10px;
width:140px;
height:25px;
border-radius:5px;
border:1px solid blue;
padding:5px;
cursor:move
}

Pabbly Form Builder


Conclusion:

I hope, this tutorial would be helpful for you. And, you could able to create dynamic form using jQuery codes in simple manner.

You may aslo like –