To add bootstrap 5 modal popup form on page load first we will add link and script of bootstrap 5 and also add a jQuery CDN script which is as below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>Now add the bootstrap model and create an inquiry form using your own form in it.
<!-- Modal -->
<div class="modal fade" id="myprograming" tabindex="-1" aria-labelledby="myprograming" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="myprograming">Contact Form</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 inquiry-form">
<form action="" method="post">
<!--Grid row-->
<div class="row">
<div class="col-12 mb-4">
<div class="">
<input type="text" name="name" placeholder="Enter Name" class="form-control" required />
</div>
</div>
<div class="col-12 mb-4">
<div class="">
<input type="email" name="email" placeholder="Enter Email" class="form-control" required />
</div>
</div>
<div class="col-12 mb-4">
<div class="">
<input type="tel" name="phone" placeholder="Enter Phone no" pattern="[0-9]{10}" class="form-control" required/>
</div>
</div>
<div class="col-12 mb-4">
<div class="">
<input type="submit" name="submit" class="form-control btn btn-secondary">
</div>
</div>
</div>
<!--Grid row-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end-->Finally add this script
<!--Modal JS Script -->
<script type="text/javascript">
window.onload = () => {
$('#myprograming').modal('show');
}
</script>
