Bootstrap 5 Animated Dynamic Form for Students Contact

Loading…

Bootstrap 5 Animated Dynamic Form for Students Contact | GoSnippets

Source Code

1<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
2<dvi class="container h-100">
3	<div class="d-flex justify-content-center">
4		<div class="card mt-5 col-md-4 animated bounceInDown myForm">
5			<div class="card-header">
6				<h4>Students Contact Details</h4>
7			</div>
8			<div class="card-body">
9				<form>
10					<div id="dynamic_container">
11						<div class="input-group">
12							<div class="">
13								<span class="input-group-text br-15"><i class="fas fa-user-graduate"></i></span>
14							</div>
15							<input type="text" placeholder="Student Name" class="form-control"/>
16						</div>
17						<div class="input-group mt-3">
18							<div class="">
19								<span class="input-group-text br-15"><i class="fas fa-phone-square"></i></span>
20							</div>
21							<input type="text" placeholder="Student Phone" class="form-control"/>
22						</div>
23						<div class="input-group mt-3">
24							<div class="">
25								<span class="input-group-text br-15"><i class="fas fa-at"></i></span>
26							</div>
27							<input type="email" placeholder="Student Email" class="form-control"/>
28						</div>
29					</div>
30				</form>
31			</div>
32			<div class="card-footer">
33				<a class="btn btn-secondary btn-sm" id="add_more"><i class="fas fa-plus-circle"></i> Add</a>
34				<a class="btn btn-secondary btn-sm" id="remove_more"><i class="fas fa-trash-alt"></i> Remove</a>
35				<button class="btn btn-success btn-sm float-end submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
36			</div>
37		</div>
38	</div>
39	</dvi>

Bootstrap 5 Animated Dynamic Form for Students Contact

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery