index.html
<!DOCTYPE html>
<html>
<head>
<title>Animated Dynamic Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<style>
html, body {
height: 100%;
margin: 0;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(149,199,20,1) 0%, rgba(0,212,255,1) 96%);
}
.myForm {
background-color: rgba(0,0,0,0.5) !important;
padding: 1px !important;
border-radius: 1px !important;
color: white;
}
input {
border-radius: 0 1px 1px 0 !important;
}
input:focus {
outline: none;
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.br-15 {
border-radius: 1px 0 0 1px !important;
}
#add_more {
color: white !important;
background-color: #fa8231 !important;
border-radius: 1px !important;
border: 0 !important;
}
#remove_more {
color: white !important;
background-color: #fc5c65 !important;
border-radius: 1px !important;
border: 0 !important;
display: none;
}
.submit_btn {
border-radius: 1px !important;
background-color: #95c714 !important;
border: 0 !important;
}
</style>
<div class="container h-100">
<div class="d-flex justify-content-center">
<div class="card mt-5 col-md-4 animated bounceInDown myForm">
<div class="card-header">
<h4>Students Contact Details</h4>
</div>
<form>
<div class="card-body">
<div id="dynamic_container">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-user-graduate"></i></span>
</div>
<input type="text" placeholder="Student Name" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-phone-square"></i></span>
</div>
<input type="text" placeholder="Student Phone" class="form-control"/>
</div>
<div class="input-group mt-3">
<div class="input-group-prepend">
<span class="input-group-text br-15"><i class="fas fa-at"></i></span>
</div>
<input type="email" placeholder="Student Email" class="form-control"/>
</div>
</div>
</div>
<div class="card-footer">
<a class="btn btn-secondary btn-sm" id="add_more"><i class="fas fa-plus-circle"></i> Add</a>
<a class="btn btn-secondary btn-sm" id="remove_more"><i class="fas fa-trash-alt"></i> Remove</a>
<button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
</div>
</form>
</div>
</div>
</div>
<script>
var i = 0;
$(document).ready(function() {
$('#add_more').on('click', function() {
var colorR = Math.floor((Math.random() * 256));
var colorG = Math.floor((Math.random() * 256));
var colorB = Math.floor((Math.random() * 256));
i++;
var html = '<div id="append_no_' + i + '" class="animated bounceInLeft">' +
'<div class="input-group mt-3">' +
'<div class="input-group-prepend">' +
'<span class="input-group-text br-15" style="color:rgb(' + colorR + ',' + colorG + ',' + colorB + ')">' +
'<i class="fas fa-user-graduate"></i></span>' +
'</div>' +
'<input type="text" placeholder="Student Name" class="form-control"/>' +
'</div>' +
'<div class="input-group mt-3">' +
'<div class="input-group-prepend">' +
'<span class="input-group-text br-15" style="color:rgb(' + colorR + ',' + colorG + ',' + colorB + ')">' +
'<i class="fas fa-phone-square"></i></span>' +
'</div>' +
'<input type="text" placeholder="Student Phone" class="form-control"/>' +
'</div>' +
'<div class="input-group mt-3">' +
'<div class="input-group-prepend">' +
'<span class="input-group-text br-15" style="color:rgb(' + colorR + ',' + colorG + ',' + colorB + ')">' +
'<i class="fas fa-at"></i></span>' +
'</div>' +
'<input type="email" placeholder="Student Email" class="form-control"/>' +
'</div>' +
'</div>';
$('#dynamic_container').append(html);
$('#remove_more').fadeIn(function() {
$(this).show();
});
});
$('#remove_more').on('click', function() {
$('#append_no_' + i).removeClass('bounceInLeft').addClass('bounceOutRight')
.fadeOut(function() {
$(this).remove();
});
i--;
if (i == 0) {
$('#remove_more').fadeOut(function() {
$(this).hide();
});
}
});
});
</script>
</body>
</html>
Explanation:
-
CSS Styles:
-
Custom background using a gradient.
-
Form styling with background color and input field formatting.
-
Button styles for adding/removing fields, with different background colors for add/remove actions.
-
-
HTML Structure:
-
A card form that includes fields for a student's name, phone, and email.
-
Buttons for dynamically adding and removing fields.
-
-
jQuery Functionality:
-
When clicking "Add", new input fields are added with animated transitions (bounceInLeft).
-
When clicking "Remove", the most recent set of input fields is removed with an animated transition (bounceOutRight).
-
-
Dynamic Colors:
-
Each new set of inputs gets a random color for its icons to make the form visually engaging.
-
This code provides an interactive, animated form with dynamic field additions and removals. Let me know if you need any further adjustments!
