<link href="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1587270922/datepicker/datedropper.css" rel="stylesheet">
<script src="https://res.cloudinary.com/dxfq3iotg/raw/upload/v1587268278/datepicker/datedropper.js"></script>
<div class="container d-flex justify-content-center text-center">
<div class="card px-5 py-5">
<h1>Contact us form</h1> <span>Got a question? We'd love to hear from you. Send us a message and we'll respond as soon as possible</span>
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="name" /> </div>
<div class="col-md-6"> <input type="text" class="form-control" placeholder="phone" /> </div>
</div>
<div class="row">
<div class="col-md-6"> <input type="text" class="form-control" placeholder="email" /> </div>
<div class="col-md-6"> <input id="date" type="text" class="form-control" placeholder="When can we call you?" /> </div>
</div>
<div class="row mt-3">
<div class="col-md-12"> <textarea rows="6" class="form-control" placeholder="Let us know how can we help you?"></textarea> </div>
</div> <button class="btn btn-success mt-5">Send Message <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Manrope:
[email protected]&display=swap');
html,
body {
height: 100%
}
body {
display: grid;
place-items: center;
font-family: 'Manrope', sans-serif;
background: red
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 20px;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border-radius: 6px;
-moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1)
}
.card input {
margin-top: 10px
}
.btn-success {
color: #fff;
background-color: #ff5300;
border-color: #ff5300
}
.btn-success:hover {
color: #fff;
background-color: #ff0000;
border-color: #ff0000
}
.btn-success.focus,
.btn-success:focus {
box-shadow: 0 0 0 0.2rem rgb(255, 255, 255)
}
.btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle {
color: #fff;
background-color: #ff0000;
border-color: #ff0000
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #ff5300;
outline: 0;
box-shadow: 0 0 0 1px rgb(255, 255, 255) !important
}
$(document).ready(function(){
$('#date').dateDropper({
});
});