This post contains a total of 11+ CSS Contact Form Examples with Source Code. All these Contact Forms are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Contact Form Examples
1. By Joanez Andrades
Made by Joanez Andrades. Contact Form with Google Maps. Source
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
@import 'https://fonts.googleapis.com/css?family=Libre+Franklin:400,700';
html,
body {
background: #FFFFFF;
font-family: "Libre Franklin", sans-serif;
}
.container {
background: #F8F8F8;
width: 900px;
height: 650px;
margin: 5% auto;
box-shadow: 0px 0px 10px #C8C7D9;
position: relative;
}
.container .map {
width: 45%;
float: left;
}
.container .contact-form {
width: 53%;
margin-left: 2%;
float: left;
}
.container .contact-form .title {
font-size: 2.5em;
font-family: "Libre Franklin", sans-serif;
font-weight: 700;
color: #242424;
margin: 5% 8%;
}
.container .contact-form .subtitle {
font-size: 1.2em;
font-weight: 400;
margin: 0 4% 5% 8%;
}
.container .contact-form input,
.container .contact-form textarea {
width: 330px;
padding: 3%;
margin: 2% 8%;
color: #242424;
border: 1px solid #B7B7B7;
}
.container .contact-form input::placeholder,
.container .contact-form textarea::placeholder {
color: #242424;
}
.container .contact-form .btn-send {
background: #A383C9;
width: 180px;
height: 60px;
color: #F8F8F8;
font-weight: 700;
margin: 2% 8%;
border: none;
}
</style>
</head>
<body>
<div class="container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d13249.247068040606!2d151.20960562674117!3d-33.8816236491114!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1spt-BR!2sbr!4v1468899355787" width="100%" height="650px" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="contact-form">
<h1 class="title">Contact Us</h1>
<h2 class="subtitle">We are here assist you.</h2>
<form action="">
<input type="text" name="name" placeholder="Your Name" />
<input type="email" name="e-mail" placeholder="Your E-mail Adress" />
<input type="tel" name="phone" placeholder="Your Phone Number"/>
<textarea name="text" id="" rows="8" placeholder="Your Message"></textarea>
<button class="btn-send">Get a Call Back</button>
</form>
</div>
</div>
</body>
</html>2. By Luis M Ruiz
Made by Luis M Ruiz. Transparent Contact Form made using CSS. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
body {
background:#2d3b36 url(http://www.luismruiz.com/img/blured.jpg)no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:100px;
}
form {
margin-left:auto;
margin-right:auto;
width: 343px;
height: 333px;
padding:30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
textarea{
background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px 16px;
width: 276px;
height: 110px;
border: 1px solid rgba(255,255,255,.6);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: 'Source Sans Pro', sans-serif;
font-size:18px;
color:#fff;
padding-left:45px;
padding-right:20px;
padding-top:12px;
margin-bottom:20px;
overflow:hidden;
}
input {
width: 276px;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display:block;
font-family: 'Source Sans Pro', sans-serif;
font-size:18px;
color:#fff;
padding-left:20px;
padding-right:20px;
margin-bottom:20px;
}
input[type=submit] {
cursor:pointer;
}
input.name {
background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_name.png) no-repeat scroll 16px 16px;
padding-left:45px;
}
input.email {
background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_email.png) no-repeat scroll 16px 20px;
padding-left:45px;
}
input.message {
background: rgba(255, 255, 255, 0.4) url(http://luismruiz.com/img/gemicon_message.png) no-repeat scroll 16px 16px;
padding-left:45px;
}
::-webkit-input-placeholder {
color: #fff;
}
:-moz-placeholder{
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
input:focus, textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
.btn {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
border: 1px solid #253737;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
.btn:hover {
border: 1px solid #253737;
text-shadow: #333333 0 1px 0;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}
.btn:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #253737;
background: #6da5a3;
background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
background: -webkit-linear-gradient(top, #416b68, #609391);
background: -moz-linear-gradient(top, #416b68, #6da5a3);
background: -ms-linear-gradient(top, #416b68, #6da5a3);
background: -o-linear-gradient(top, #416b68, #6da5a3);
background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
color: #fff;
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}
</style>
</head>
<body>
<form>
<input name="name" placeholder="What is your name?" class="name" required />
<input name="emailaddress" placeholder="What is your email?" class="email" type="email" required />
<textarea rows="4" cols="50" name="subject" placeholder="Please enter your message" class="message" required></textarea>
<input name="submit" class="btn" type="submit" value="Send" />
</form>
</body>
</html>
3. By Rachel Opperman
Made by Rachel Opperman. Responsive Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Yantramanav:100,300');
/* ------------- */
/* GLOBAL STYLES */
/* ------------- */
* {
box-sizing: border-box;
}
body {
background: #3952a3;
color: #485e74;
line-height: 1.6;
font-family: 'Yantramanav', sans-serif;
padding: 1em;
}
.container {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
ul {
list-style: none;
padding: 0;
}
.brand {
text-align: center;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.brand span {
color: #ffffff;
}
.wrapper {
box-shadow: 0 0 20px 0 rgba(57, 82, 163, 0.7);
}
.wrapper > * {
padding: 1em;
}
/* ------------------- */
/* COMPANY INFORMATION */
/* ------------------- */
.company-info {
background: #C3C9DD;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.company-info h3,
.company-info ul {
text-align: center;
margin: 0 0 1rem 0;
}
/* ------- */
/* CONTACT */
/* ------- */
.contact {
background: #dcdfea;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
/* ---- */
/* FORM */
/* ---- */
.contact form {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
.contact form label {
display: block;
}
.contact form p {
margin: 0;
}
.contact form .full {
grid-column: 1 / 3;
}
.contact form button,
.contact form input,
.contact form textarea {
width: 100%;
padding: 1em;
border: solid 1px #627EDC;
border-radius: 4px;
}
.contact form textarea {
resize: none;
}
.contact form button {
background: #627EDC;
border: 0;
color: #e4e4e4;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
.contact form button:hover,
.contact form button:focus {
background: #3952a3;
color: #ffffff;
outline: 0;
transition: background-color 2s ease-out;
}
/* ------------- */
/* MEDIA QUERIES */
/* ------------- */
@media only screen and (min-width: 700px) {
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
}
.wrapper > * {
padding: 2em;
}
.company-info {
border-radius: 4px 0 0 4px;
}
.contact {
border-radius: 0 4px 4px 0;
}
.company-info h3,
.company-info ul,
.brand {
text-align: left;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="brand"><span>Phoenix Web Design</span></h1>
<div class="wrapper">
<!-- COMPANY INFORMATION -->
<div class="company-info">
<h3>Phoenix Web Design</h3>
<ul>
<li><i class="fa fa-road"></i> 44 Main Street</li>
<li><i class="fa fa-phone"></i> (555) 555-5555</li>
<li><i class="fa fa-envelope"></i> <a href="#">[email protected]</a></li>
</ul>
</div>
<!-- End .company-info -->
<!-- CONTACT FORM -->
<div class="contact">
<h3>E-mail Us</h3>
<form id="contact-form">
<p>
<label>Name</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label>Company</label>
<input type="text" name="company" id="company">
</p>
<p>
<label>E-mail Address</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone" id="phone">
</p>
<p class="full">
<label>Message</label>
<textarea name="message" rows="5" id="message"></textarea>
</p>
<p class="full">
<button type="submit">Submit</button>
</p>
</form>
<!-- End #contact-form -->
</div>
<!-- End .contact -->
</div>
<!-- End .wrapper -->
</div>
<!-- End .container --></body>
</html>4. By David Fitas
Made by David Fitas. Contact form with Vintage Look. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
font-family: 'Montserrat', Arial, sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
background: #F2F3EB;
}
button {
overflow: visible;
}
button, select {
text-transform: none;
}
button, input, select, textarea {
color: #5A5A5A;
font: inherit;
margin: 0;
}
input {
line-height: normal;
}
textarea {
overflow: auto;
}
#container {
border: solid 3px #474544;
max-width: 768px;
margin: 60px auto;
position: relative;
}
form {
padding: 37.5px;
margin: 50px 0;
}
h1 {
color: #474544;
font-size: 32px;
font-weight: 700;
letter-spacing: 7px;
text-align: center;
text-transform: uppercase;
}
.underline {
border-bottom: solid 2px #474544;
margin: -0.512em auto;
width: 80px;
}
.icon_wrapper {
margin: 50px auto 0;
width: 100%;
}
.icon {
display: block;
fill: #474544;
height: 50px;
margin: 0 auto;
width: 50px;
}
.email {
float: right;
width: 45%;
}
input[type='text'], [type='email'], select, textarea {
background: none;
border: none;
border-bottom: solid 2px #474544;
color: #474544;
font-size: 1.000em;
font-weight: 400;
letter-spacing: 1px;
margin: 0em 0 1.875em 0;
padding: 0 0 0.875em 0;
text-transform: uppercase;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type='text']:focus, [type='email']:focus, textarea:focus {
outline: none;
padding: 0 0 0.875em 0;
}
.message {
float: none;
}
.name {
float: left;
width: 45%;
}
select {
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-32.png') no-repeat right;
outline: none;
-moz-appearance: none;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
.subject {
width: 100%;
}
.telephone {
width: 100%;
}
textarea {
line-height: 150%;
height: 150px;
resize: none;
width: 100%;
}
::-webkit-input-placeholder {
color: #474544;
}
:-moz-placeholder {
color: #474544;
opacity: 1;
}
::-moz-placeholder {
color: #474544;
opacity: 1;
}
:-ms-input-placeholder {
color: #474544;
}
#form_button {
background: none;
border: solid 2px #474544;
color: #474544;
cursor: pointer;
display: inline-block;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 0.875em;
font-weight: bold;
outline: none;
padding: 20px 35px;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#form_button:hover {
background: #474544;
color: #F2F3EB;
}
@media screen and (max-width: 768px) {
#container {
margin: 20px auto;
width: 95%;
}
}
@media screen and (max-width: 480px) {
h1 {
font-size: 26px;
}
.underline {
width: 68px;
}
#form_button {
padding: 15px 25px;
}
}
@media screen and (max-width: 420px) {
h1 {
font-size: 18px;
}
.icon {
height: 35px;
width: 35px;
}
.underline {
width: 53px;
}
input[type='text'], [type='email'], select, textarea {
font-size: 0.875em;
}
}
</style>
</head>
<body>
<div id="container">
<h1>• Keep in Touch •</h1>
<div class="underline">
</div>
<div class="icon_wrapper">
<svg class="icon" viewBox="0 0 145.192 145.192">
<path d="M126.82,32.694c-2.804,0-5.08,2.273-5.08,5.075v2.721c-1.462,0-2.646,1.185-2.646,2.647v1.995 c0,1.585,1.286,2.873,2.874,2.873h20.577c1.462,0,2.646-1.185,2.646-2.647v-3.041c0-1.009-0.816-1.825-1.823-1.825v-2.722 c0-2.802-2.276-5.075-5.079-5.075h-1.985v-3.829c0-3.816-3.095-6.912-6.913-6.912h-0.589h-20.45c0-2.67-2.164-4.835-4.833-4.835 H56.843c-2.67,0-4.835,2.165-4.835,4.835H34.356v-3.384h-9.563v3.384v1.178h-7.061v1.416c-2.67,0.27-10.17,1.424-13.882,5.972 c-1.773,2.17-2.44,4.791-1.983,7.793c0.463,3.043,1.271,6.346,2.128,9.841c2.354,9.616,5.024,20.515,0.549,28.077 C2.647,79.44-3.125,90.589,2.201,99.547c4.123,6.935,13.701,10.44,28.5,10.44c1.186,0,2.405-0.023,3.658-0.068v9.028h-0.296 c-2.516,0-4.558,2.039-4.558,4.558v4.566h100.04v-4.564c0-2.519-2.039-4.558-4.558-4.558h-0.297V84.631h0.297 c2.519,0,4.558-2.037,4.558-4.556v-0.009c0-2.516-2.039-4.556-4.556-4.556l-36.786-0.009V61.973c0-2.193-1.777-3.971-3.972-3.971 v-4.711h0.456c1.629,0,2.952-1.32,2.952-2.949h14.227V34.459h1.658c2.672,0,4.834-2.165,4.834-4.834h20.45v3.069H126.82z M34.06,75.511c-2.518,0-4.558,2.04-4.558,4.556v0.009c0,2.519,2.042,4.556,4.558,4.556h0.296v24.12l-0.042-1.168 c-15.994,0.574-26.122-2.523-30.106-9.229C-0.464,90.5,4.822,80.347,6.55,77.423c4.964-8.382,2.173-19.774-0.29-29.825 c-0.843-3.442-1.639-6.696-2.088-9.638c-0.354-2.35,0.129-4.3,1.484-5.958c3.029-3.714,9.509-4.805,12.076-5.1v1.233h7.061v1.49 v2.684c-2.403,1.114-4.153,2.997-4.676,5.237H18.15c-0.584,0-1.056,0.474-1.056,1.056v0.83c0,0.584,0.475,1.056,1.056,1.056h1.984 c0.561,2.18,2.304,3.999,4.658,5.092v0.029c0,0-2.282,20.823,16.479,22.099v1.102c0,1.177,0.955,2.133,2.133,2.133h3.297 c1.178,0,2.133-0.956,2.133-2.133V50.135c0-1.177-0.955-2.132-2.133-2.132h-3.297c-1.178,0-2.133,0.955-2.133,2.132 c-1.575-0.235-5.532-1.17-6.635-4.547c2.36-1.092,4.109-2.913,4.669-5.097h1.308c0.722,0,1.309-0.584,1.309-1.308v-0.578 c0-0.584-0.475-1.056-1.056-1.056h-1.539c-0.542-2.332-2.416-4.271-4.968-5.363v-2.559h17.651c0,2.67,2.166,4.835,4.836,4.835 h2.392v15.88h13.639c0,1.629,1.321,2.949,2.951,2.949h0.899v4.711c-2.194,0-3.972,1.778-3.972,3.971v13.529L34.06,75.511z M95.188,101.78c0,8.655-7.012,15.665-15.664,15.665c-8.653,0-15.667-7.01-15.667-15.665c0-8.647,7.014-15.664,15.667-15.664 C88.177,86.116,95.188,93.132,95.188,101.78z M97.189,45.669h-9.556c0-0.896-0.726-1.62-1.619-1.62H74.494 c-0.896,0-1.621,0.727-1.621,1.62h-8.967v-11.21h33.283V45.669z"></path>
<path d="M70.865,101.78c0,4.774,3.886,8.657,8.66,8.657c4.774,0,8.657-3.883,8.657-8.657c0-4.773-3.883-8.656-8.657-8.656 C74.751,93.124,70.865,97.006,70.865,101.78z"></path>
</svg>
</div>
<form action="#" method="post" id="contact_form">
<div class="name">
<label for="name"></label>
<input type="text" placeholder="My name is" name="name" id="name_input" required>
</div>
<div class="email">
<label for="email"></label>
<input type="email" placeholder="My e-mail is" name="email" id="email_input" required>
</div>
<div class="telephone">
<label for="name"></label>
<input type="text" placeholder="My number is" name="telephone" id="telephone_input" required>
</div>
<div class="subject">
<label for="subject"></label>
<select placeholder="Subject line" name="subject" id="subject_input" required>
<option disabled hidden selected>Subject line</option>
<option>I'd like to start a project</option>
<option>I'd like to ask a question</option>
<option>I'd like to make a proposal</option>
</select>
</div>
<div class="message">
<label for="message"></label>
<textarea name="message" placeholder="I'd like to chat about" id="message_input" cols="30" rows="5" required></textarea>
</div>
<div class="submit">
<input type="submit" value="Send Message" id="form_button" />
</div>
</form><!-- // End form -->
</div><!-- // End #container -->
</body>
</html>5. By Ricky Eckhardt
Made by Ricky Eckhardt. Pastel Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://kit.fontawesome.com/e2ac9cc532.js" crossorigin="anonymous"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Pretty Stuff */
.contact-form-container {
background: #F4F3F3;
font-family: "Lato", sans-serif;
}
.contact-us {
position: relative;
width: 250px;
background: #C3E0EC;
overflow: hidden;
}
.contact-us:before {
position: absolute;
content: "";
bottom: -50px;
left: -100px;
height: 250px;
width: 400px;
background: #F8B7D8;
transform: rotate(25deg);
}
.contact-us:after {
position: absolute;
content: "";
bottom: -80px;
right: -100px;
height: 270px;
width: 400px;
background: #9ED8EB;
transform: rotate(-25deg);
}
.contact-header {
color: white;
position: absolute;
transform: rotate(-90deg);
top: 120px;
left: -40px;
}
.contact-header h1 {
font-size: 1.5rem;
}
.social-bar {
position: absolute;
bottom: 20px;
left: 75px;
z-index: 1;
width: 100px;
}
.social-bar ul {
list-style-type: none;
}
.social-bar ul li {
display: inline-block;
color: white;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
margin-right: -4px;
font-size: 1.2rem;
}
.header {
text-align: center;
padding: 20px 0;
color: #444;
}
.header h1 {
font-weight: normal;
}
.header h2 {
margin-top: 10px;
font-weight: 300;
}
.address, .email, .phone {
text-align: center;
padding: 20px 0;
color: #444;
}
.address h3, .email h3, .phone h3 {
font-size: 1rem;
font-weight: 300;
}
.address i, .email i, .phone i {
color: #F8B7D8;
font-size: 1.7rem;
margin-bottom: 20px;
}
form {
position: relative;
width: 440px;
margin: 0 auto;
padding: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
background: white;
}
form input, form textarea {
background: white;
display: block;
margin: 20px auto;
width: 100%;
border: 0;
}
form input {
height: 40px;
line-height: 40px;
outline: 0;
border-bottom: 1px solid rgba(68, 68, 68, 0.3);
font-size: 1rem;
color: rgba(68, 68, 68, 0.8);
}
form textarea {
border-bottom: 1px solid rgba(68, 68, 68, 0.3);
resize: none;
outline: none;
font-size: 1rem;
font-family: lato;
color: rgba(68, 68, 68, 0.8);
}
form button {
position: absolute;
display: block;
height: 40px;
width: 250px;
left: 95px;
border: 0;
border-radius: 20px;
bottom: -20px;
background: #9ED8EB;
color: white;
font-size: 1.1rem;
font-weight: 300;
outline: none;
}
.contact-form {
padding-bottom: 40px;
}
/* Layout Stuff */
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2042508-jpeg.jpg");
height: 100vh;
width: 100vw;
position: relative;
background-size: cover;
background-repeat: no-repeat;
display: grid;
justify-items: center;
align-items: center;
}
.contact-form-container {
width: 800px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 0.5fr 0.5fr 2fr;
grid-template-areas: "contact-us header header header" "contact-us address phone email" "contact-us contact-form contact-form contact-form";
}
.contact-us {
grid-area: contact-us;
}
.header {
grid-area: header;
}
.address {
grid-area: address;
}
.phone {
grid-area: phone;
}
.email {
grid-area: email;
}
.contact-form {
grid-area: contact-form;
}
</style>
</head>
<body>
<div class="contact-form-container">
<div class="contact-us">
<div class="contact-header">
<h1>
⎯⎯⎯⎯ CONTACT US
</h1>
</div>
<div class="social-bar">
<ul>
<li>
<i class="fab fa-facebook-f"></i>
</li>
<li>
<i class="fab fa-twitter"></i>
</li>
<li>
<i class="fab fa-instagram"></i>
</li>
<li>
<i class="fab fa-dribbble"></i>
</li>
</ul>
</div>
</div>
<div class="header">
<h1>
Let's Get Started
</h1>
<h2>
Contact us to start your next project!
</h2>
</div>
<div class="address">
<i class="fas fa-map-marker-alt"></i>
<h3>
8266 Gygax
</h3>
<h3>
Norfolk, VA
</h3>
</div>
<div class="phone">
<i class="fas fa-phone-alt"></i>
<h3>
757 287 1608
</h3>
</div>
<div class="email">
<i class="fas fa-envelope"></i>
<h3>
<a href="#">Email</a>
</h3>
</div>
<div class="contact-form">
<form>
<input placeholder="Name" type="text" /><input placeholder="Email" type="email" /><textarea placeholder="Tell us about your project..." rows="4"></textarea><button type="button">SEND </button>
</form>
</div>
</div>
</body>
</html>6. By Matheus Marsiglio
Made by Matheus Marsiglio. Minimalistic CSS Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aca49c;
font-size: 0.875em;
}
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
color: #bbb5af;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #aca49c;
font-size: 0.875em;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
color: #bbb5af;
}
input::placeholder, textarea::placeholder {
color: #aca49c;
font-size: 0.875em;
}
input:focus::placeholder, textarea::focus:placeholder {
color: #bbb5af;
}
input::-ms-placeholder, textarea::-ms-placeholder {
color: #aca49c;
font-size: 0.875em;
}
input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {
color: #bbb5af;
}
/* on hover placeholder */
input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder {
color: #e2dedb;
font-size: 0.875em;
}
input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder {
color: #cbc6c1;
}
input:hover::-moz-placeholder, textarea:hover::-moz-placeholder {
color: #e2dedb;
font-size: 0.875em;
}
input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder {
color: #cbc6c1;
}
input:hover::placeholder, textarea:hover::placeholder {
color: #e2dedb;
font-size: 0.875em;
}
input:hover:focus::placeholder, textarea:hover:focus::placeholder {
color: #cbc6c1;
}
input:hover::placeholder, textarea:hover::placeholder {
color: #e2dedb;
font-size: 0.875em;
}
input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder {
color: #cbc6c1;
}
body {
font-family: 'Lato', sans-serif;
background: #e2dedb;
color: #b3aca7;
}
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
#form {
position: relative;
width: 500px;
margin: 50px auto 100px auto;
}
input {
font-family: 'Lato', sans-serif;
font-size: 0.875em;
width: 470px;
height: 50px;
padding: 0px 15px 0px 15px;
background: transparent;
outline: none;
color: #726659;
border: solid 1px #b3aca7;
border-bottom: none;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
input:hover {
background: #b3aca7;
color: #e2dedb;
}
textarea {
width: 470px;
max-width: 470px;
height: 110px;
max-height: 110px;
padding: 15px;
background: transparent;
outline: none;
color: #726659;
font-family: 'Lato', sans-serif;
font-size: 0.875em;
border: solid 1px #b3aca7;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
textarea:hover {
background: #b3aca7;
color: #e2dedb;
}
#submit {
width: 502px;
padding: 0;
margin: -5px 0px 0px 0px;
font-family: 'Lato', sans-serif;
font-size: 0.875em;
color: #b3aca7;
outline:none;
cursor: pointer;
border: solid 1px #b3aca7;
border-top: none;
}
#submit:hover {
color: #e2dedb;
}
</style>
</head>
<body>
<header>MINIMALISTIC FORM</header>
<form id="form" class="topBefore">
<input id="name" type="text" placeholder="NAME">
<input id="email" type="text" placeholder="E-MAIL">
<textarea id="message" type="text" placeholder="MESSAGE"></textarea>
<input id="submit" type="submit" value="GO!">
</form>
</body>
</html>7. By Mark Murray
Made by Mark Murray. Elegant Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Merriweather);
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
h1 {
text-align: center;
color: #a8a8a8;
text-shadow: 1px 1px 0 white;
}
form {
max-width: 600px;
text-align: center;
margin: 20px auto;
}
form input, form textarea {
border: 0;
outline: 0;
padding: 1em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
resize: none;
}
form input:focus, form textarea:focus {
-moz-box-shadow: 0 0px 2px #e74c3c !important;
-webkit-box-shadow: 0 0px 2px #e74c3c !important;
box-shadow: 0 0px 2px #e74c3c !important;
}
form #input-submit {
color: white;
background: #e74c3c;
cursor: pointer;
}
form #input-submit:hover {
-moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
-webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}
form textarea {
height: 126px;
}
.half {
float: left;
width: 48%;
margin-bottom: 1em;
}
.right {
width: 50%;
}
.left {
margin-right: 2%;
}
@media (max-width: 480px) {
.half {
width: 100%;
float: none;
margin-bottom: 0;
}
}
/* Clearfix */
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
</style>
</head>
<body>
<h1>Elegant Contact Form</h1>
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
</body>
</html>8. By nick haskell
Made by nick haskell. Clean Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
background-color: #e6e6e6;
font-size: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
div, textarea, input {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
max-width: 510px;
min-width: 324px;
margin: 50px auto 0px;
background-color: #fff;
border: 1px solid #cfcfcf;
border-bottom: 3px solid #ccc;
}
.row {
width: 100%;
margin: 0 0 1em 0;
padding: 0 2.5em;
}
.row.header {
padding: 1.5em 2.5em;
border-bottom: 1px solid #ccc;
background: url(https://images2.imgbox.com/a5/2e/m3lRbCCA_o.jpg) left -80px;
color: #fff;
}
.row.body {
padding: .5em 2.5em 1em;
}
.pull-right {
float: right;
}
h1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
display: inline-block;
font-weight: 100;
font-size: 2.8125em;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin: 0 0 0.1em 0;
padding: 0 0 0.4em 0;
}
h3 {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 1.25em;
margin: 1em 0 0.4em 0;
}
.btn {
font-size: 1.0625em;
display: inline-block;
padding: 0.74em 1.5em;
margin: 1.5em 0 0;
color: #fff;
border-width: 0 0 0 0;
border-bottom: 5px solid;
text-transform: uppercase;
background-color: #b3b3b3;
border-bottom-color: #8c8c8c;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
.btn:hover {
background-color: #bfbfbf;
}
.btn.btn-submit {
background-color: #4f6fad;
border-bottom-color: #374d78;
}
.btn.btn-submit:hover {
background-color: #5f7db6;
}
form {
max-width: 100%;
display: block;
}
form ul {
margin: 0;
padding: 0;
list-style: none;
}
form ul li {
margin: 0 0 0.25em 0;
clear: both;
display: inline-block;
width: 100%;
}
form ul li:last-child {
margin: 0;
}
form ul li p {
margin: 0;
padding: 0;
float: left;
}
form ul li p.right {
float: right;
}
form ul li .divider {
margin: 0.5em 0 0.5em 0;
border: 0;
height: 1px;
width: 100%;
display: block;
background-color: #4f6fad;
background-image: linear-gradient(to right, #ee9cb4, #4f6fad);
}
form ul li .req {
color: #ee9cb4;
}
form label {
display: block;
margin: 0 0 0.5em 0;
color: #4f6fad;
font-size: 1em;
}
form input {
margin: 0 0 0.5em 0;
border: 1px solid #ccc;
padding: 6px 10px;
color: #555;
font-size: 1em;
}
form textarea {
border: 1px solid #ccc;
padding: 6px 10px;
width: 100%;
color: #555;
}
form small {
color: #4f6fad;
margin: 0 0 0 0.5em;
}
@media only screen and (max-width: 480px) {
.pull-right {
float: none;
}
input {
width: 100%;
}
label {
width: 100%;
display: inline-block;
float: left;
clear: both;
}
li, p {
width: 100%;
}
input.btn {
margin: 1.5em 0 0.5em;
}
h1 {
font-size: 2.25em;
}
h3 {
font-size: 1.125em;
}
li small {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row header">
<h1>CONTACT US </h1>
<h3>Fill out the form below to learn more!</h3>
</div>
<div class="row body">
<form action="#">
<ul>
<li>
<p class="left">
<label for="first_name">first name</label>
<input type="text" name="first_name" placeholder="John" />
</p>
<p class="pull-right">
<label for="last_name">last name</label>
<input type="text" name="last_name" placeholder="Smith" />
</p>
</li>
<li>
<p>
<label for="email">email <span class="req">*</span></label>
<input type="email" name="email" placeholder="[email protected]" />
</p>
</li>
<li><div class="divider"></div></li>
<li>
<label for="comments">comments</label>
<textarea cols="46" rows="3" name="comments"></textarea>
</li>
<li>
<input class="btn btn-submit" type="submit" value="Submit" />
<small>or press <strong>enter</strong></small>
</li>
</ul>
</form>
</div>
</div>
</body>
</html>9. By Rex Kirby
Made by Rex Kirby. Flat Responsive Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html{
background:#3498db;
}
#feedback-page{
text-align:center;
}
#text-feedback{
width: 80%;
padding-left: 10%;
padding-right: 10%;
background-color:white;
text-align:center;
}
#form-main{
width:100%;
float:left;
padding-top:30px;
}
#form-div {
background-color:#3c3c3c;
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 450px;
float: left;
left: 50%;
position: absolute;
margin-left: -260px;
}
.feedback-input {
opacity:0.9;
color:#0493bd;
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
font-weight:400;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
border: 3px solid #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
/* Icons ---------------------------------- */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
textarea {
width: 100%;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
border-top:3px #3c3c3c solid;
width: 0px;
height: 76px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
@media only screen and (max-width: 580px) {
#form-div{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
</style>
</head>
<body>
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
</div>
</body>
</html>
10. By ssbalakumar
Made by ssbalakumar. HTML5 Contact Form with CSS Styling. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
* {
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font-family:"Open Sans", Helvetica, Arial, sans-serif;
font-weight:300;
font-size: 12px;
line-height:30px;
color:#777;
background:#0CF;
}
.container {
max-width:400px;
width:100%;
margin:0 auto;
position:relative;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#F9F9F9;
padding:25px;
margin:50px 0;
}
#contact h3 {
color: #F96;
display: block;
font-size: 30px;
font-weight: 400;
}
#contact h4 {
margin:5px 0 15px;
display:block;
font-size:13px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:100px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#0CF;
color:#FFF;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#contact button[type="submit"]:hover {
background:#09C;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
</style>
</head>
<body>
<div class="container">
<form id="contact" action="" method="post">
<h3>Quick Contact</h3>
<h4>Contact us today, and get reply with in 24 hours!</h4>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here...." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</body>
</html>11. By Zach Saucier
Made by Zach Saucier. Simple, flat contact form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body { background:rgb(30,30,40); }
form { max-width:420px; margin:50px auto; }
.feedback-input {
color:white;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 5px;
line-height: 22px;
background-color: transparent;
border:2px solid #CC6666;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #CC4949; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 100%;
background:#CC6666;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
[type="submit"]:hover { background:#CC4949; }
</style>
</head>
<body>
<form>
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>12. By Lisa Wagner
Made by Lisa Wangner. Simple Responsive Contact Form. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* General Styles */
html{
background:url(https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height:100%;
background-color: #000;
}
* {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
color: #C0C0C0;
font-family: Arial, san-serif;
}
/* Contact Form Styles */
h1 {
margin: 10px 0 0 0;
}
h4{
margin: 0 0 20px 0;
}
#contact-form {
background-color:rgba(72,72,72,0.9);
padding: 10px 20px 30px 20px;
max-width:100%;
float: left;
left: 50%;
position: absolute;
margin-top:30px;
margin-left: -260px;
border-radius:7px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
font-size: 15px;
margin-bottom: 2px;
font-family: Arial, san-serif;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
width:100%;
background: #fff;
border: 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-bottom: 25px;
padding: 5px;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
background-color: #E5E6E7;
}
#contact-form textarea {
width:100%;
height: 150px;
}
#contact-form button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#991D57;
background-image:linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
background-image:-moz-linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
background-image:-webkit-linear-gradient(bottom, #8C1C50 0%, #991D57 52%);
color:#FFF;
margin:0 0 5px;
padding:10px;
border-radius:5px;
}
#contact-form button[type="submit"]:hover {
background-image:linear-gradient(bottom, #9C215A 0%, #A82767 52%);
background-image:-moz-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
background-image:-webkit-linear-gradient(bottom, #9C215A 0%, #A82767 52%);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact-form button[type="submit"]:active {
box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
input:required, textarea:required {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
-o-box-shadow: none;
}
#contact-form .required {
font-weight:bold;
color: #E5E6E7;
}
/* Hide success/failure message
(especially since the php is missing) */
#failure, #success {
color: #6EA070;
display:none;
}
/* Make form look nice on smaller screens */
@media only screen and (max-width: 580px) {
#contact-form{
left: 3%;
margin-right: 3%;
width: 88%;
margin-left: 0;
padding-left: 3%;
padding-right: 3%;
}
}
</style>
</head>
<body>
<div id="contact-form">
<div>
<h1>Nice to Meet You!</h1>
<h4>Have a question or just want to get in touch? Let's chat.</h4>
</div>
<p id="failure">Oopsie...message not sent.</p>
<p id="success">Your message was sent successfully. Thank you!</p>
<form method="post" action="/">
<div>
<label for="name">
<span class="required">Name: *</span>
<input type="text" id="name" name="name" value="" placeholder="Your Name" required="required" tabindex="1" autofocus="autofocus" />
</label>
</div>
<div>
<label for="email">
<span class="required">Email: *</span>
<input type="email" id="email" name="email" value="" placeholder="Your Email" tabindex="2" required="required" />
</label>
</div>
<div>
<label for="subject">
<span>Subject: </span>
<select id="subject" name="subject" tabindex="4">
<option value="hello">Product Price Question</option>
<option value="quote">Where are my dragons?!</option>
<option value="general">- Valar Morghulis - </option>
</select>
</label>
</div>
<div>
<label for="message">
<span class="required">Message: *</span>
<textarea id="message" name="message" placeholder="Please write your message here." tabindex="5" required="required"></textarea>
</label>
</div>
<div>
<button name="submit" type="submit" id="submit" >SEND</button>
</div>
</form>
</div>
</body>
</html>