Contact form with responsive map on top bootstrap snipp

Contact form with responsive map on top bootstrap snipp 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);
.form-control {
    border-color: #ebebeb;

<div class="embed-responsive embed-responsive-16by9 " style="height:380px !important;">

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


<div class="container py-5">
<div class="row" >
<div class="col-lg-6 mx-auto text-center">


<p class="text-muted small mb-4 font-weight-bold">Fill all fields so we can get some info about you. We'll never send you spam</p>
<div class=" mt-4">
  <div class="row mb-2 pt-2">
    <div class="col-12 col-lg-6 form-group">
    <input type="text" class="form-control form-control-lg" placeholder="Name">    
    <div class="col-12 col-lg-6 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 mt-4">Submit</button>

Spread the love

Related Posts

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

Back To Top