A Pen by Tushar Rupani on CodePen.
Created
July 4, 2022 12:44
-
-
Save tushar-rupani/644b3f67c3b53e679ade11c0bb2f55d3 to your computer and use it in GitHub Desktop.
Responsive Contact Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section id="contact"> | |
<h1 class="section-header">Contact</h1> | |
<div class="contact-wrapper"> | |
<!-- Left contact page --> | |
<form id="contact-form" class="form-horizontal" role="form"> | |
<div class="form-group"> | |
<div class="col-sm-12"> | |
<input type="text" class="form-control" id="name" placeholder="NAME" name="name" value="" required> | |
</div> | |
</div> | |
<div class="form-group"> | |
<div class="col-sm-12"> | |
<input type="email" class="form-control" id="email" placeholder="EMAIL" name="email" value="" required> | |
</div> | |
</div> | |
<textarea class="form-control" rows="10" placeholder="MESSAGE" name="message" required></textarea> | |
<button class="btn btn-primary send-button" id="submit" type="submit" value="SEND"> | |
<div class="alt-send-button"> | |
<i class="fa fa-paper-plane"></i><span class="send-text">SEND</span> | |
</div> | |
</button> | |
</form> | |
<!-- Left contact page --> | |
<div class="direct-contact-container"> | |
<ul class="contact-list"> | |
<li class="list-item"><i class="fa fa-map-marker fa-2x"><span class="contact-text place">City, State</span></i></li> | |
<li class="list-item"><i class="fa fa-phone fa-2x"><span class="contact-text phone"><a href="tel:1-212-555-5555" title="Give me a call">(212) 555-2368</a></span></i></li> | |
<li class="list-item"><i class="fa fa-envelope fa-2x"><span class="contact-text gmail"><a href="mailto:#" title="Send me an email">hitmeup@gmail.com</a></span></i></li> | |
</ul> | |
<hr> | |
<ul class="social-media-list"> | |
<li><a href="#" target="_blank" class="contact-icon"> | |
<i class="fa fa-github" aria-hidden="true"></i></a> | |
</li> | |
<li><a href="#" target="_blank" class="contact-icon"> | |
<i class="fa fa-codepen" aria-hidden="true"></i></a> | |
</li> | |
<li><a href="#" target="_blank" class="contact-icon"> | |
<i class="fa fa-twitter" aria-hidden="true"></i></a> | |
</li> | |
<li><a href="#" target="_blank" class="contact-icon"> | |
<i class="fa fa-instagram" aria-hidden="true"></i></a> | |
</li> | |
</ul> | |
<hr> | |
<div class="copyright">© ALL OF THE RIGHTS RESERVED</div> | |
</div> | |
</div> | |
</section> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
document.querySelector('#contact-form').addEventListener('submit', (e) => { | |
e.preventDefault(); | |
e.target.elements.name.value = ''; | |
e.target.elements.email.value = ''; | |
e.target.elements.message.value = ''; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0; | |
padding: 0; | |
background-color: #fff; | |
padding-bottom: 100px; | |
} | |
#contact { | |
width: 100%; | |
height: 100%; | |
} | |
.section-header { | |
text-align: center; | |
margin: 0 auto; | |
padding: 40px 0; | |
font: 300 60px sans-serif; | |
color: black; | |
text-transform: uppercase; | |
letter-spacing: 6px; | |
} | |
.contact-wrapper { | |
display: flex; | |
flex-direction: row; | |
justify-content: space-between; | |
margin: 0 auto; | |
padding: 20px; | |
position: relative; | |
max-width: 840px; | |
} | |
/* Left contact page */ | |
.form-horizontal { | |
/*float: left;*/ | |
max-width: 400px; | |
font-family: 'Lato'; | |
font-weight: 400; | |
} | |
.form-control, | |
textarea { | |
max-width: 400px; | |
background-color: #000; | |
color: #fff; | |
letter-spacing: 1px; | |
} | |
.send-button { | |
margin-top: 15px; | |
height: 34px; | |
width: 400px; | |
overflow: hidden; | |
transition: all .2s ease-in-out; | |
} | |
.alt-send-button { | |
width: 400px; | |
height: 34px; | |
transition: all .2s ease-in-out; | |
} | |
.send-text { | |
display: block; | |
margin-top: 10px; | |
font: 700 12px 'Lato', sans-serif; | |
letter-spacing: 2px; | |
} | |
.alt-send-button:hover { | |
transform: translate3d(0px, -29px, 0px); | |
} | |
/* Begin Right Contact Page */ | |
.direct-contact-container { | |
max-width: 400px; | |
} | |
/* Location, Phone, Email Section */ | |
.contact-list { | |
list-style-type: none; | |
margin-left: -30px; | |
padding-right: 20px; | |
} | |
.list-item { | |
line-height: 4; | |
color: #aaa; | |
} | |
.contact-text { | |
font: 300 18px 'Lato', sans-serif; | |
letter-spacing: 1.9px; | |
color: #000; | |
} | |
.place { | |
margin-left: 62px; | |
} | |
.phone { | |
margin-left: 56px; | |
} | |
.gmail { | |
margin-left: 53px; | |
} | |
.contact-text a { | |
color: #000; | |
text-decoration: none; | |
transition-duration: 0.2s; | |
} | |
.contact-text a:hover { | |
color: #333; | |
text-decoration: none; | |
} | |
/* Social Media Icons */ | |
.social-media-list { | |
position: relative; | |
font-size: 22px; | |
text-align: center; | |
width: 100%; | |
margin: 0 auto; | |
padding: 0; | |
} | |
.social-media-list li a { | |
color: #fff; | |
} | |
.social-media-list li { | |
position: relative; | |
display: inline-block; | |
height: 60px; | |
width: 60px; | |
margin: 10px 3px; | |
line-height: 60px; | |
border-radius: 50%; | |
color: #fff; | |
background-color: rgb(27,27,27); | |
cursor: pointer; | |
transition: all .2s ease-in-out; | |
} | |
.social-media-list li:after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 60px; | |
height: 60px; | |
line-height: 60px; | |
border-radius: 50%; | |
opacity: 0; | |
box-shadow: 0 0 0 1px #fff; | |
transition: all .2s ease-in-out; | |
} | |
.social-media-list li:hover { | |
background-color: white; | |
} | |
.social-media-list li:hover:after { | |
opacity: 1; | |
transform: scale(1.12); | |
transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65); | |
} | |
.social-media-list li:hover a { | |
color: #000; | |
} | |
.copyright { | |
font: 200 14px 'Oswald', sans-serif; | |
color: #555; | |
letter-spacing: 1px; | |
text-align: center; | |
} | |
hr { | |
border-color: rgba(255,255,255,.6); | |
} | |
/* Begin Media Queries*/ | |
@media screen and (max-width: 850px) { | |
.contact-wrapper { | |
display: flex; | |
flex-direction: column; | |
} | |
.direct-contact-container, .form-horizontal { | |
margin: 0 auto; | |
} | |
.direct-contact-container { | |
margin-top: 60px; | |
max-width: 300px; | |
} | |
.social-media-list li { | |
height: 60px; | |
width: 60px; | |
line-height: 60px; | |
} | |
.social-media-list li:after { | |
width: 60px; | |
height: 60px; | |
line-height: 60px; | |
} | |
} | |
@media screen and (max-width: 569px) { | |
.direct-contact-container, .form-wrapper { | |
float: none; | |
margin: 0 auto; | |
} | |
.form-control, textarea { | |
margin: 0 auto; | |
} | |
.name, .email, textarea { | |
width: 280px; | |
} | |
.direct-contact-container { | |
margin-top: 60px; | |
max-width: 280px; | |
} | |
.social-media-list { | |
left: 0; | |
} | |
.social-media-list li { | |
height: 55px; | |
width: 55px; | |
line-height: 55px; | |
font-size: 2rem; | |
} | |
.social-media-list li:after { | |
width: 55px; | |
height: 55px; | |
line-height: 55px; | |
} | |
} | |
@media screen and (max-width: 410px) { | |
.send-button { | |
width: 99%; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment