Responsive html map with contact form on top

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">
<!-- 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="">
<link href="" rel="stylesheet">
<title>Bootstrap map with contact form</title>

<style type="text/css">
@import url(';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;
    filter: url('data:image/svg+xml;utf8,<svg xmlns=""><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);
z-index:9999; right:60px; width:360px;    
.form-control {
    border-color: #ebebeb;

<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">
    <div class="form-group">
    <input type="text" class="form-control form-control-lg" placeholder="Name">    
    <div class="form-group">
    <input type="email" class="form-control form-control-lg" placeholder="Email">    
    <div class="form-group">
    <textarea name="" cols="" rows="" class="form-control form-control-lg" placeholder="Message"></textarea>    
  <button type="submit" class="btn btn-danger btn-lg w-100 d-block">Submit</button>
<div class="embed-responsive embed-responsive-16by9 " style="height:580px !important;">

<iframe id="gmap_canvas" src="" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>


Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top