Responsive html map with contact form on top made with bootstrap, you can use this on middle of your web page, simple div structure easy to implement.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">
<title>Bootstrap map with contact form</title>
</head>
<body>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
.btn {
padding: 14px 26px;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn-danger {
background-color: #e34c43;
border-color: #e34c43;
}
#gmap_canvas
{
filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
-webkit-filter: grayscale(90%);
filter: grayscale(90%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
.map-box2{
z-index:9999; right:60px; width:360px;
}
::placeholder{
font-size:13px;
font-weight:bold;
}
.form-control {
border-color: #ebebeb;
}
</style>
<div class="container-fluid p-0 m-0">
<div class="row no-gutters" >
<div class="col-12">
<div class="position-absolute p-5 bg-white m-5 shadow-lg map-box2">
<h3 class="text-secondary">FeedBack</h3>
<p class="text-muted small">Fill all fields so we can get some info about you. We'll never send you spam</p>
<div class=" mt-4">
<form>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Email">
</div>
<div class="form-group">
<textarea name="" cols="" rows="" class="form-control form-control-lg" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-danger btn-lg w-100 d-block">Submit</button>
</form>
</div>
</div>
<div class="embed-responsive embed-responsive-16by9 " style="height:580px !important;">
<iframe id="gmap_canvas" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
