You want multiple registration of users at a time. Here is the solution!

Use event based forms. Display multiple forms by selecting the number of forms from Select Option Tag.

Show multiple form on option tag selection

 

Options are available in the selection field. One can select the number of forms to display from the given option. Desired number of forms will be displayed.

Suppose, you want to register multiple guest for your event. You can do it easily with multiple forms.

Select the number of forms from the select option. And those number of forms will be available on the screen Dynamically.

Say, if you select “One”, one form will display.

Similarly for two guests,  select “Two” . Two forms will display at a time.

Form1 for Guest1

Form2 for Guest2.

Likewise, you can show multiple form at a time and allow  multiple registration of your guests.

Here is the code to create Multiple Forms Using select option using jQuery.

HTML File – mulipleform.html


<!DOCTYPE html>
<html>
<head>
<title>Show Multiple Form Using Drop down Option - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Importing Font Family From Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href="multipleform.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/multipleform.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamically Created Form Fields Based On Selection</h2>
<div id="selected_form_code">
<select id="select_btn">
<option value="0">--Select No Of Form to Display for Registration--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<div id="form1">
<form action="#" id="form_submit" method="post" name="form_submit">
<!-- Dynamic Registration Form Fields Creates Here -->
</form>
</div>
</div>
</body>
</html>

jQuery File – multipleform.js


$(document).ready(function() {
$('select#select_btn').change(function() {
var sel_value = $('option:selected').val();
if (sel_value == 0) {
$("#form_submit").empty(); // Resetting Form
$("#form1").css({
'display': 'none'
});
} else {
$("#form_submit").empty(); //Resetting Form
// Below Function Creates Input Fields Dynamically
create(sel_value);
// Appending Submit Button To Form
$("#form_submit").append($("<input/>", {
type: 'submit',
value: 'Register'
}))
}
});
function create(sel_value) {
for (var i = 1; i <= sel_value; i++) {
$("div#form1").slideDown('slow');
$("div#form1").append($("#form_submit").append($("<div/>", {
id: 'head'
}).append($("<h3/>").text("Registration Form" + i)), $("<input/>", {
type: 'text',
placeholder: 'Name' + i,
name: 'name_' + i
}), $("<br/>"), $("<input/>", {
type: 'text',
placeholder: 'Email' + i,
name: 'email_' + i
}), $("<br/>"), $("<textarea/>", {
placeholder: 'Message' + i,
type: 'text',
name: 'msg_' + i
}), $("<br/>"), $("<hr/>"), $("<br/>")))
}
}
});

Css File -multipleform.css


div#form1{
width:380px;
display:none;
height:auto;
border:1px solid gray;
padding:20px;
background-color:#FDE2E2;
border-radius:5px;
margin-left:40px;
box-shadow:0 0 8px gray
}
#select_btn{
width:425px;
height:30px;
margin-left:40px;
font-family:'Droid Serif',serif
}
h3{
text-align:center;
font-family:'Droid Serif',serif
}
h2{
margin-top:80px;
width:500px;
text-align:center;
text-shadow:0 0 1px gray;
font-family:'Droid Serif',serif
}
input[type=text]{
padding:5px;
width:100%;
height:40px;
border:1px solid #49b637;
margin:10px 0;
box-shadow:0 0 5px #5a5a6f;
border-radius:3px;
font-family:'Droid Serif',serif
}
input[type=submit]{
background-color:#781149;
color:#fff;
border-radius:5px;
padding:10px;
width:100%;
height:40px;
border:2px solid #fff;
font-size:16px;
font-family:'Droid Serif',serif
}
input[type=submit]:hover{
background-color:orange;
cursor:pointer
}
textarea{
padding:5px;
width:100%;
height:80px;
border:1px solid #49b637;
margin:10px 0;
box-shadow:0 0 5px #5a5a6f;
border-radius:3px;
font-family:'Droid Serif',serif
}
.container{
margin:20px auto;
width:960px;
position:relative
}

Conclusion:

If you want registration from multiple users, displaying multiple form by event trigger will be very helpful for you. The process is fast and easy.

You will select the number and those number of  forms will be displayed. That means multiple users can register themselves at a time.

If you know any other method for multiple registration,you can share with us in the link given below.