<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content shadow-xl">
<div class="modal-header">
<div>
<h5 class="modal-title f-600" id="exampleModalLabel">We Value Your Feedback!</h5>
<p>Share your thoughts to help us improve our website.</p>
</div>
</div>
<div class="modal-body">
<form id="feedbackForm" action="https://formsubmit.co/ershad.alam@netoyed.com" method="POST">
<div class="row">
<div class="mb-3 col-12 col-sm-6">
<label for="name" class="form-label">Full Name</label>
<input type="name" class="form-control" id="name" aria-describedby="name">
</div>
<div class="mb-3 col-12 col-sm-6">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" aria-describedby="email">
</div>
</div>
<div class="mb-3 col-12 col-sm-12">
<label class="form-label">Ratings*</label>
<ul class="feedback-rating d-flex gap-3">
<li class="feedback-rating-1"></li>
<li class="feedback-rating-2"></li>
<li class="feedback-rating-3"></li>
<li class="feedback-rating-4"></li>
<li class="feedback-rating-5"></li>
</ul>
</div>
<div class="mb-3">
<label for="feedback" class="form-label">Feedback*</label>
<textarea minlength="0" maxlength="2000" name="feedback" class="form-control" id="feedback" aria-describedby="feedback" style="height:100px"></textarea>
</div>
<div class="text-gray-600">
0/2000
</div>
<div class="d-flex justify-content-between gap-2 mt-30">
<button type="button" class="btn btn-outline-danger flex-grow-1" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary flex-grow-1">Submit</button>
</div>
</form>
<div class="d-flex gap-2 mt-30 mb-10 justify-content-center align-items-center">
<strong class="f-500">Powered by</strong>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCA1MSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQzNzhfMjA2KSI+CjxwYXRoIGQ9Ik03LjgyNzE5IDAuNDA4MjAzSDExLjI5MlY4Ljc1NzMxQzExLjI5MiA5Ljc1MDAzIDExLjA1OTQgMTAuNjA5MSAxMC41OTQxIDExLjMzNDVDMTAuMTMyOSAxMi4wNTU4IDkuNDg4OTYgMTIuNjEzNiA4LjY2MjI3IDEzLjAwODJDNy44MzU1MiAxMy4zOTg1IDYuODc1ODQgMTMuNTkzNiA1Ljc4MzI0IDEzLjU5MzZDNC42ODIyOCAxMy41OTM2IDMuNzE4NDUgMTMuMzk4NSAyLjg5MTcyIDEzLjAwODJDMi4wNjQ5OCAxMi42MTM2IDEuNDIxMDQgMTIuMDU1OCAwLjk1OTg5OCAxMS4zMzQ1QzAuNTAyOTA5IDEwLjYwOTEgMC4yNzQ0MTQgOS43NTAwMyAwLjI3NDQxNCA4Ljc1NzMxVjAuNDA4MjAzSDMuNzM5MjJWOC40NTE4M0MzLjczOTIyIDguODU0ODcgMy44MjY0NyA5LjIxNTQ1IDQuMDAwOTUgOS41MzM2NEM0LjE3NTQ0IDkuODQ3NTggNC40MTY0IDEwLjA5MzYgNC43MjM4MyAxMC4yNzE4QzUuMDM1NDEgMTAuNDUgNS4zODg1NCAxMC41MzkxIDUuNzgzMjQgMTAuNTM5MUM2LjE4MjAyIDEwLjUzOTEgNi41MzUxOSAxMC40NSA2Ljg0MjYxIDEwLjI3MThDNy4xNTAwNCAxMC4wOTM2IDcuMzkxIDkuODQ3NTggNy41NjU1IDkuNTMzNjRDNy43Mzk5NCA5LjIxNTQ1IDcuODI3MTkgOC44NTQ4NyA3LjgyNzE5IDguNDUxODNWMC40MDgyMDNaTTE2LjY1MjggMC40MDgyMDNMMTguNzQ2NyA0LjIwMDkzSDE4Ljg0NjRMMjAuOTY1MSAwLjQwODIwM0gyNC44Mjg4TDIxLjAxNSA2LjkyNDU1TDI0Ljk3ODMgMTMuNDQwOUgyMS4wMTVMMTguODQ2NCA5LjU3MTgzSDE4Ljc0NjdMMTYuNTc4IDEzLjQ0MDlIMTIuNjM5NkwxNi41NTMxIDYuOTI0NTVMMTIuNzY0MyAwLjQwODIwM0gxNi42NTI4WiIgZmlsbD0iIzE5MzdCMiIvPgo8cGF0aCBkPSJNMjYuMjIxNyAxMS40MDM5VjguNjU0OEwzMS4zNTY2IDAuNDA3NTUySDMzLjc5OTRWNC4wNzMwMUgzMi40MDM1TDI5LjYzNjcgOC41NTI5OVY4LjY1NDhIMzcuMjE0M1YxMS40MDM5SDI2LjIyMTdaTTMyLjQyODQgMTMuNDQwM1YxMC41NjM5TDMyLjUwMzIgOS4zNjc1N1YwLjQwNzU1MkgzNS43NDM3VjEzLjQ0MDNIMzIuNDI4NFpNNDYuOTMxMSA0LjcwOTM3QzQ2Ljg3NzEgNC40ODQ1MiA0Ni43OTE5IDQuMjg3MjUgNDYuNjc1NiA0LjExNzU1QzQ2LjU1OTMgMy45NDM2MSA0Ni40MTM4IDMuNzk3MjUgNDYuMjM5MyAzLjY3ODQ2QzQ2LjA2OSAzLjU1NTQzIDQ1Ljg2OTYgMy40NjQyMiA0NS42NDExIDMuNDA0ODJDNDUuNDE2OCAzLjM0MTE5IDQ1LjE2OTYgMy4zMDkzNyA0NC44OTk1IDMuMzA5MzdDNDQuMzE3OSAzLjMwOTM3IDQzLjgyMTUgMy40NTE0OSA0My40MTAyIDMuNzM1NzNDNDMuMDAzIDQuMDE5OTggNDIuNjkxNCA0LjQyOTM3IDQyLjQ3NTQgNC45NjM5MkM0Mi4yNjM1IDUuNDk4NDYgNDIuMTU3NiA2LjE0MzMxIDQyLjE1NzYgNi44OTg0N0M0Mi4xNTc2IDcuNjYyMDkgNDIuMjU5NCA4LjMxNTQ0IDQyLjQ2MyA4Ljg1ODQ3QzQyLjY2NjUgOS40MDE1IDQyLjk2OTggOS44MTcyNSA0My4zNzI4IDEwLjEwNThDNDMuNzc1OCAxMC4zOTQyIDQ0LjI3NjQgMTAuNTM4NSA0NC44NzQ2IDEwLjUzODVDNDUuNDAyMiAxMC41Mzg1IDQ1Ljg0MDYgMTAuNDYgNDYuMTg5NSAxMC4zMDNDNDYuNTQyNyAxMC4xNDYgNDYuODA2NCA5LjkyMzMxIDQ2Ljk4MDkgOS42MzQ4QzQ3LjE1NTQgOS4zNDYzNCA0Ny4yNDI3IDkuMDA2OTMgNDcuMjQyNyA4LjYxNjY2TDQ3Ljg0MDkgOC42ODAyOEg0NC45MjQ1VjYuMTYwMjhINTAuNTgyOFY3Ljk2NzU3QzUwLjU4MjggOS4xNTU0NCA1MC4zMzU2IDEwLjE3MTUgNDkuODQxMyAxMS4wMTU4QzQ5LjM1MTEgMTEuODU1OCA0OC42NzM5IDEyLjUwMDYgNDcuODA5OCAxMi45NTAzQzQ2Ljk0OTggMTMuMzk1OCA0NS45NjMxIDEzLjYxODUgNDQuODQ5NyAxMy42MTg1QzQzLjYwNzUgMTMuNjE4NSA0Mi41MTY5IDEzLjM0OTEgNDEuNTc4MSAxMi44MTAzQzQwLjYzOTIgMTIuMjcxNSAzOS45MDU5IDExLjUwMzYgMzkuMzc4MyAxMC41MDY3QzM4Ljg1NDggOS41MDk3IDM4LjU5MzEgOC4zMjM4OSAzOC41OTMxIDYuOTQ5MzdDMzguNTkzMSA1Ljg3MTc3IDM4Ljc1MyA0LjkxNzI1IDM5LjA3MjkgNC4wODU3M0MzOS4zOTcgMy4yNTQyMiAzOS44NDU2IDIuNTUyMSA0MC40MTkgMS45NzkzN0M0MC45OTIzIDEuNDAyNCA0MS42NTQ5IDAuOTY3NTUxIDQyLjQwNjkgMC42NzQ4MjJDNDMuMTU4OCAwLjM3Nzg1NSA0My45NjQ4IDAuMjI5MzcgNDQuODI0OCAwLjIyOTM3QzQ1LjU4MDkgMC4yMjkzNyA0Ni4yODMgMC4zMzk2NzMgNDYuOTMxMSAwLjU2MDI4QzQ3LjU4MzMgMC43NzY2NDEgNDguMTU4NyAxLjA4NjM0IDQ4LjY1NzIgMS40ODkzN0M0OS4xNTk5IDEuODg4MTYgNDkuNTY1IDIuMzYxMTkgNDkuODcyNCAyLjkwODQ2QzUwLjE3OTggMy40NTU3MyA1MC4zNjY4IDQuMDU2MDMgNTAuNDMzMyA0LjcwOTM3SDQ2LjkzMTFaIiBmaWxsPSIjQTA2NkNDIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNDM3OF8yMDYiPgo8cmVjdCB3aWR0aD0iNTEiIGhlaWdodD0iMTQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==" />
</div>
</div>
</div>
</div>
</div>
RESULT