CSS Forms Templates
Saturday 22th, Sep, 2018 | #CSS #HTML 5 #PHP #UI
CSS forms are an important part of any website, a good form will allow our website to have a high conversion rate. Today shared with you, this best CSS Forms templates for use in you site. Only press EDIT button to view HTML and CSS source CODE
Contact Form
Beautifull CSS3 Contact Form
/* generic */
body {
color: #3F3F3F;
font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
font-size:16px;
background:#3F3F3F;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
h1 {
font-family:'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}
/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content:'&';
text-align:center;
display:block;
width:100%;
font-family:'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}
/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content:' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(42%, rgba(182, 180, 180, 0.7)), color-stop(43%, rgba(180, 178, 178, 0)), color-stop(50%, rgba(168, 166, 166, 0)), color-stop(57%, rgba(180, 178, 178, 0)), color-stop(58%, rgba(182, 180, 180, 0.7)), color-stop(90%, rgba(238, 237, 237, 0.3)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(182, 180, 180, 0.7) 42%, rgba(180, 178, 178, 0) 43%, rgba(168, 166, 166, 0) 50%, rgba(180, 178, 178, 0) 57%, rgba(182, 180, 180, 0.7) 58%, rgba(238, 237, 237, 0.3) 90%, rgba(255, 255, 255, 0) 100%);
/* W3C */
}
/* Here comes to good stuff : content styling */
#content {
position:relative;
margin:50px auto;
width:400px;
min-height:200px;
z-index:100;
padding:30px;
border:1px solid #383838;
/* My stipped background */
background: #D1D1D1;
/* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
background: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
background: repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
/* FF3.6+ */
/*border-radius*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 6px #3F3F3F;
-moz-box-shadow:0px 1px 6px #3F3F3F;
box-shadow:0px 1px 6px #3F3F3F;
}
/** my "fake" background that will hover the stripes **/
#content:after {
background:#F9F9F9;
margin:10px;
position: absolute;
content :" ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border:1px #E5E5E5 solid;
/*border-radius*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
}
/*** form styling **/
/** we remove the red glow around required fields since we are already using the red star */
input:required, textarea:required {
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
box-shadow:none;
}
/** inputs and textarea**/
input:not([type="submit"]), textarea {
outline:none;
display:block;
width:380px;
padding:4px 8px;
border:1px dashed #DBDBDB;
color:#3F3F3F;
font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
font-size:14px;
/*border-radius*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/*transition*/
-webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
-moz-transition:background 0.2s linear, box-shadow 0.6s linear;
-o-transition:background 0.2s linear, box-shadow 0.6s linear;
transition:background 0.2s linear, box-shadow 0.6s linear;
}
input:not([type="submit"]):active, textarea:active, input:not([type="submit"]):focus, textarea:focus {
background:#F7F7F7;
border:dashed 1px #969696;
/*box-shadow*/
-webkit-box-shadow:2px 2px 7px #E8E8E8 inset;
-moz-box-shadow:2px 2px 7px #E8E8E8 inset;
box-shadow:2px 2px 7px #E8E8E8 inset;
}
input:not([type="submit"]) {
height: 20px;
}
/* placeholder */
::-webkit-input-placeholder {
color:#BABABA;
font-style:italic;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#BABABA;
font-style:italic;
}
textarea {
min-height:150px;
resize:vertical
}
/** labels**/
/** adding our icon font !! */
.iconic:before {
font-size:25px;
font-family:'Alice', Verdana, serif;
}
.iconic.link:before {
content:'/';
}
.iconic.quote-alt:before {
content:"'";
}
.iconic.comment:before {
content:"q";
}
.iconic.user:before {
content:"u";
}
.iconic.mail-alt:before {
content:"M";
}
label {
color:#7F7E7E;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
label:hover {
color:#191919;
}
label:before {
color:#C1BFBD;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
label:hover:before {
color:#969696;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
p {
margin-bottom:20px;
}
.indication {
color:#878787;
font-size:12px;
font-style:italic;
text-align:right;
padding-right:10px;
}
.required {
color:#E5224C;
}
/** Styling the send button **/
input[type=submit] {
margin-left:235px;
cursor:pointer;
background:none;
border:none;
font-family:'Alice', serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px 1px #E8E8E8;
background: rgb(247, 247, 247);
background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
/*transition*/
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
input[type=submit]:hover {
color:#686868;
border-color: #CECECE;
background: rgb(244, 244, 244);
background: -moz-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
position:relative;
top:1px;
color:#515151;
background: rgb(234, 234, 234);
background: -moz-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(100%, rgba(242, 242, 242, 1)));
background: -webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -o-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: -ms-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
background: linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
<link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet' type='text/css'>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
<div id="content">
<h1>Contact</h1>
<form action=" " method="post" autocomplete="on">
<p>
<label for="username" class="icon-user"> Name
<span class="required">*</span>
</label>
<input type="text" name="username" id="username" required="required" placeholder="Your Name" />
</p>
<p>
<label for="usermail" class="icon-envelope"> E-mail address
<span class="required">*</span>
</label>
<input type="email" name="usermail" id="usermail" placeholder="I promise I hate spam too!" required="required" />
</p>
<p>
<label for="usersite" class="icon-link"> Website</label>
<input type="url" name="usersite" id="usersite" placeholder="eg: http://www.example.com" />
</p>
<p>
<label for="subject" class="icon-bullhorn"> Subject</label>
<input type="text" name="subject" id="subject" placeholder="What would you like to talk about?" />
</p>
<p>
<label for="message" class="icon-comment"> Message
<span class="required">*</span>
</label>
<textarea placeholder="Your message here and I'll answer as soon as possible " required="required"></textarea>
</p>
<p class="indication">Fields with
<span class="required"> * </span>are required</p>
<input type="submit" value=" Send this mail ! " />
</form>
</div>
Responsive Contact Form
@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;
}
}
<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="john.smith@gmail.com" />
</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>
Under Water Contact Form
@import url(https://fonts.googleapis.com/css?family=Sniglet|Raleway:900);
body, html{
height: 100%;
padding: 0;
margin: 0;
font-family: 'Sniglet', cursive;
}
h1{
font-weight: normal;
font-size: 4em;
font-family: 'Raleway', sans-serif;
margin: 0 auto;
margin-top: 30px;
width: 500px;
color: #F90;
text-align: center;
}
/* Animation webkit */
@-webkit-keyframes myfirst
{
0% {margin-left: -235px}
90% {margin-left: 100%;}
100% {margin-left: 100%;}
}
/* Animation */
@keyframes myfirst
{
0% {margin-left: -235px}
70% {margin-left: 100%;}
100% {margin-left: 100%;}
}
.fish{
background-image: url('http://www.geertjanhendriks.nl/codepen/form/fish.png');
width: 235px;
height: 104px;
margin-left: -235px;
position: absolute;
animation: myfirst 24s;
-webkit-animation: myfirst 24s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
#fish{
top: 120px;
}
#fish2{
top: 260px;
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
header{
height: 160px;
background: url('http://www.geertjanhendriks.nl/codepen/form/golf.png') repeat-x bottom;
}
#form{
height: 100%;
background-color: #98d4f3;
overflow: hidden;
position: relative;
}
form{
margin: 0 auto;
width: 500px;
padding-top: 40px;
color: white;
position: relative;
}
label, input, textarea{
display: block;
}
input, textarea{
width: 500px;
border: none;
border-radius: 20px;
outline: none;
padding: 10px;
font-family: 'Sniglet', cursive;
font-size: 1em;
color: #676767;
transition: border 0.5s;
-webkit-transition: border 0.5s;
-moz-transition: border 0.5s;
-o-transition: border 0.5s;
border: solid 3px #98d4f3;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
input:focus, textarea:focus{
border: solid 3px #77bde0;
}
textarea{
height: 100px;
resize: none;
overflow: auto;
}
input[type="submit"]{
background-color: #F90;
color: white;
height: 50px;
cursor: pointer;
margin-top: 30px;
font-size: 1.29em;
font-family: 'Sniglet', cursive;
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
transition: background-color 0.5s;
}
input[type="submit"]:hover{
background-color: #e58f0e;
}
label{
font-size: 1.5em;
margin-top: 20px;
padding-left: 20px;
}
.formgroup, .formgroup-active, .formgroup-error{
background-repeat: no-repeat;
background-position: right bottom;
background-size: 10.5%;
transition: background-image 0.7s;
-webkit-transition: background-image 0.7s;
-moz-transition: background-image 0.7s;
-o-transition: background-image 0.7s;
width: 566px;
padding-top: 2px;
}
.formgroup{
background-image: url('http://www.geertjanhendriks.nl/codepen/form/pixel.gif');
}
.formgroup-active{
background-image: url('http://www.geertjanhendriks.nl/codepen/form/octo.png');
}
.formgroup-error{
background-image: url('http://www.geertjanhendriks.nl/codepen/form/octo-error.png');
color: red;
}
<header>
<h1>Contact us</h1>
</header>
<div id="form">
<div class="fish" id="fish"></div>
<div class="fish" id="fish2"></div>
<form id="waterform" method="post">
<div class="formgroup" id="name-form">
<label for="name">Your name*</label>
<input type="text" id="name" name="name" />
</div>
<div class="formgroup" id="email-form">
<label for="email">Your e-mail*</label>
<input type="email" id="email" name="email" />
</div>
<div class="formgroup" id="message-form">
<label for="message">Your message</label>
<textarea id="message" name="message"></textarea>
</div>
<input type="submit" value="Send your message!" />
</form>
</div>
Payment Form
Credit Card
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
body {
font-family: 'Open Sans', sans-serif;
color: #1a1a1a;
background-color: #f0f0f0; }
h1,
h2,
h3,
h4,
h5 {
margin: 0;
font-weight: 600; }
.button {
color: #ffffff;
background-color: #24cf5f;
padding: 12px 25px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
border: 0;
border-radius: 2px;
outline: 0;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2);
transition: all .2s; }
.button:hover, .button:active, .button:focus {
-ms-transform: scale(1.1);
transform: scale(1.1); }
.button--transparent {
background: transparent;
border: 0;
outline: 0; }
.button--close {
position: absolute;
top: 10px;
left: 10px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center;
width: 30px;
height: 30px;
color: #ffffff;
border-radius: 50%;
transition: all .25s;
z-index: 10; }
.button--close svg {
width: 20px;
height: 20px; }
.button--close svg * {
fill: currentColor; }
.button--close:hover, .button--close:active, .button--close:focus {
color: #fbcf34;
background-color: #ffffff;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); }
.button--info {
position: absolute;
top: 0;
right: 0; }
input {
width: calc(100% - 10px);
min-height: 30px;
padding-left: 5px;
padding-right: 5px;
letter-spacing: .5px;
border: 0;
border-bottom: 2px solid #f0f0f0; }
input:valid {
border-color: #24cf5f; }
input:focus {
outline: none;
border-color: #fbcf34; }
.form-list {
padding-left: 0;
list-style: none; }
.form-list__row {
margin-bottom: 25px; }
.form-list__row label {
position: relative;
display: block;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
letter-spacing: .5px;
color: #939393; }
.form-list__row--inline {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between; }
.form-list__row--inline > :first-child {
-ms-flex: 2;
flex: 2;
padding-right: 20px; }
.form-list__row--inline > :nth-child(2n) {
-ms-flex: 1;
flex: 1; }
.form-list__input-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between; }
.form-list__input-inline > * {
width: calc(50% - 10px - 10px); }
.form-list__row--agree {
margin-top: 30px;
margin-bottom: 30px;
font-size: 12px; }
.form-list__row--agree label {
font-weight: 400;
text-transform: none;
color: #676767; }
.form-list__row--agree input {
width: auto;
margin-right: 5px; }
#input--cc {
position: relative;
padding-top: 6px; }
#input--cc input {
padding-left: 46px;
width: calc(100% - 46px); }
#input--cc:before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 36px;
height: 45px;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22nc-icon%20glyph%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%3E%20%3Cpath%20data-color%3D%22color-2%22%20fill%3D%22%238c8c8c%22%20d%3D%22M47%2C16V9c0-1.105-0.895-2-2-2H3C1.895%2C7%2C1%2C7.895%2C1%2C9v7H47z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%238c8c8c%22%20d%3D%22M1%2C22v17c0%2C1.105%2C0.895%2C2%2C2%2C2h42c1.105%2C0%2C2-0.895%2C2-2V22H1z%20M18%2C33H8c-0.552%2C0-1-0.448-1-1s0.448-1%2C1-1h10%20c0.552%2C0%2C1%2C0.448%2C1%2C1S18.552%2C33%2C18%2C33z%20M40%2C33h-5c-0.552%2C0-1-0.448-1-1s0.448-1%2C1-1h5c0.552%2C0%2C1%2C0.448%2C1%2C1S40.552%2C33%2C40%2C33z%22%3E%3C/path%3E%20%3C/g%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 36px;
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
#input--cc.creditcard-icon--visa:before {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22nc-icon%20colored%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%3E%3Crect%20x%3D%221%22%20y%3D%2214%22%20fill%3D%22%23E6E6E6%22%20width%3D%2246%22%20height%3D%2219%22%3E%3C/rect%3E%20%3Cpath%20fill%3D%22%23E79800%22%20d%3D%22M4%2C41h40c1.657%2C0%2C3-1.343%2C3-3v-5H1v5C1%2C39.657%2C2.343%2C41%2C4%2C41z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%231A1876%22%20d%3D%22M44%2C7H4c-1.657%2C0-3%2C1.343-3%2C3v5h46v-5C47%2C8.343%2C45.657%2C7%2C44%2C7z%22%3E%3C/path%3E%20%3Cpolygon%20fill%3D%22%231A1876%22%20points%3D%2219.238%2C28.8%2021.847%2C28.8%2023.48%2C19.224%2020.87%2C19.224%20%22%3E%3C/polygon%3E%20%3Cpath%20fill%3D%22%231A1876%22%20d%3D%22M28.743%2C23.069c-0.912-0.443-1.471-0.739-1.465-1.187c0-0.398%2C0.473-0.824%2C1.495-0.824%20c0.836-0.013%2C1.51%2C0.157%2C2.188%2C0.477l0.354-2.076c-0.517-0.194-1.327-0.402-2.339-0.402c-2.579%2C0-4.396%2C1.299-4.411%2C3.16%20c-0.015%2C1.376%2C1.297%2C2.144%2C2.287%2C2.602c1.016%2C0.469%2C1.358%2C0.769%2C1.353%2C1.188c-0.006%2C0.642-0.811%2C0.935-1.562%2C0.935%20c-1.158%2C0-1.742-0.179-2.793-0.655l-0.366%2C2.144c0.61%2C0.267%2C1.737%2C0.499%2C2.908%2C0.511c2.744%2C0%2C4.525-1.284%2C4.545-3.272%20C30.944%2C24.581%2C30.249%2C23.752%2C28.743%2C23.069z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%231A1876%22%20d%3D%22M38.007%2C19.233H35.99c-0.625%2C0-1.092%2C0.171-1.367%2C0.794l-3.876%2C8.776h2.741c0%2C0%2C0.448-1.18%2C0.55-1.439%20c0.3%2C0%2C2.962%2C0.004%2C3.343%2C0.004c0.078%2C0.335%2C0.318%2C1.435%2C0.318%2C1.435h2.422L38.007%2C19.233z%20M34.789%2C25.406%20c0.108-0.276%2C1.173-3.011%2C1.386-3.591c0.353%2C1.651%2C0.009%2C0.049%2C0.781%2C3.591H34.789z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%231A1876%22%20d%3D%22M17.049%2C19.231l-2.556%2C6.53l-0.272-1.327l-0.915-4.401c-0.158-0.606-0.616-0.787-1.183-0.808H7.913%20L7.88%2C19.424c1.024%2C0.248%2C1.939%2C0.606%2C2.742%2C1.05l2.321%2C8.317l2.762-0.003l4.109-9.558H17.049z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
#input--cc.creditcard-icon--master-card:before {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22nc-icon%20colored%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%3E%3Cpath%20fill%3D%22%23003564%22%20d%3D%22M44%2C7H4c-1.657%2C0-3%2C1.343-3%2C3v28c0%2C1.657%2C1.343%2C3%2C3%2C3h40c1.657%2C0%2C3-1.343%2C3-3V10C47%2C8.343%2C45.657%2C7%2C44%2C7z%22%3E%3C/path%3E%20%3Ccircle%20fill%3D%22%23F01524%22%20cx%3D%2219%22%20cy%3D%2224%22%20r%3D%228%22%3E%3C/circle%3E%20%3Cpath%20fill%3D%22%23376BD1%22%20d%3D%22M24%2C30.24c0.093-0.075%2C0.177-0.161%2C0.267-0.24h-0.535C23.823%2C30.079%2C23.907%2C30.165%2C24%2C30.24z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23FEB415%22%20d%3D%22M29%2C16c-2.525%2C0-4.773%2C1.173-6.24%2C3h2.48c0.251%2C0.313%2C0.47%2C0.651%2C0.673%2C1h-3.827h-0.008%20c-0.186%2C0.321-0.352%2C0.653-0.492%2C1h0.009h4.809c0.132%2C0.324%2C0.246%2C0.656%2C0.335%2C1h-5.477c-0.084%2C0.326-0.151%2C0.659-0.193%2C1h5.865%20C26.975%2C23.328%2C27%2C23.661%2C27%2C24h-6c0%2C0.339%2C0.028%2C0.672%2C0.069%2C1h5.865c-0.043%2C0.341-0.111%2C0.674-0.195%2C1h-5.477%20c0.088%2C0.342%2C0.194%2C0.677%2C0.325%2C1h0.009h4.809c-0.141%2C0.346-0.305%2C0.68-0.491%2C1h-3.827h-0.008c0.203%2C0.351%2C0.429%2C0.686%2C0.681%2C1h2.48%20c-0.292%2C0.363-0.623%2C0.693-0.973%2C1h-0.535h-0.012c1.409%2C1.241%2C3.254%2C2%2C5.279%2C2c4.418%2C0%2C8-3.582%2C8-8S33.418%2C16%2C29%2C16z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
#input--cc.creditcard-icon--american-express:before {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22nc-icon%20colored%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%3E%3Cpath%20fill%3D%22%23007AC6%22%20d%3D%22M44%2C7H4c-1.657%2C0-3%2C1.343-3%2C3v28c0%2C1.657%2C1.343%2C3%2C3%2C3h40c1.657%2C0%2C3-1.343%2C3-3V10C47%2C8.343%2C45.657%2C7%2C44%2C7z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M10.533%2C24.429h2.33l-1.165-2.857L10.533%2C24.429z%20M43%2C19h-5.969l-1.456%2C1.571L34.264%2C19H21.598l-1.165%2C2.571%20L19.268%2C19h-5.096v1.143L13.59%2C19H9.222L5%2C29h5.096l0.582-1.571h1.456L12.716%2C29h5.678v-1.143L18.831%2C29h2.912l0.437-1.286V29%20h11.648l1.456-1.571L36.594%2C29h5.969l-3.785-5L43%2C19z%20M25.383%2C27.571h-1.602V22l-2.475%2C5.571h-1.456L17.375%2C22v5.571h-3.349%20L13.444%2C26H9.95l-0.582%2C1.571H7.475l3.057-7.143h2.475l2.766%2C6.714v-6.714h2.766l2.184%2C4.857l2.038-4.857h2.766v7.143H25.383z%20M39.797%2C27.571h-2.184l-1.893-2.429l-2.184%2C2.429h-6.552v-7.143h6.697l2.038%2C2.286l2.184-2.286h2.038L36.739%2C24L39.797%2C27.571z%20M28.586%2C21.857v1.286h3.64v1.429h-3.64V26h4.077l1.893-2.143l-1.747-2H28.586z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
#input--cc.creditcard-icon--discover:before {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20class%3D%22nc-icon%20colored%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2248px%22%20height%3D%2248px%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%3E%3Cpath%20fill%3D%22%23E6E6E6%22%20d%3D%22M47%2C23.807V10c0-1.657-1.343-3-3-3H4c-1.657%2C0-3%2C1.343-3%2C3v28c0%2C1.657%2C1.343%2C3%2C3%2C3h10.589%20C30.229%2C38.811%2C43.003%2C30.094%2C47%2C23.807z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23E6E6E6%22%20d%3D%22M47%2C38V23.807C43.003%2C30.094%2C30.229%2C38.811%2C14.589%2C41H44C45.657%2C41%2C47%2C39.657%2C47%2C38z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23FA7000%22%20d%3D%22M47%2C38V23.807C43.003%2C30.094%2C30.229%2C38.811%2C14.589%2C41H44C45.657%2C41%2C47%2C39.657%2C47%2C38z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23FA7000%22%20d%3D%22M25.029%2C21.013c-1.69%2C0-3.062%2C1.32-3.062%2C2.951c0%2C1.734%2C1.312%2C3.028%2C3.062%2C3.028%20c1.708%2C0%2C3.054-1.313%2C3.054-2.995C28.084%2C22.325%2C26.747%2C21.013%2C25.029%2C21.013z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23444444%22%20d%3D%22M7.646%2C21.121H6v5.743h1.636c0.871%2C0%2C1.499-0.207%2C2.05-0.664c0.654-0.541%2C1.043-1.359%2C1.043-2.206%20C10.728%2C22.298%2C9.462%2C21.121%2C7.646%2C21.121z%20M8.956%2C25.434c-0.356%2C0.318-0.81%2C0.457-1.535%2C0.457H7.121v-3.798h0.301%20c0.725%2C0%2C1.161%2C0.13%2C1.535%2C0.464c0.385%2C0.345%2C0.617%2C0.878%2C0.617%2C1.429C9.573%2C24.539%2C9.342%2C25.091%2C8.956%2C25.434z%22%3E%3C/path%3E%20%3Crect%20x%3D%2211.245%22%20y%3D%2221.121%22%20fill%3D%22%23444444%22%20width%3D%221.116%22%20height%3D%225.743%22%3E%3C/rect%3E%20%3Cpath%20fill%3D%22%23444444%22%20d%3D%22M15.102%2C23.322c-0.674-0.247-0.871-0.412-0.871-0.722c0-0.361%2C0.352-0.635%2C0.836-0.635%20c0.335%2C0%2C0.612%2C0.134%2C0.906%2C0.462l0.583-0.764c-0.481-0.424-1.058-0.638-1.686-0.638c-1.016%2C0-1.791%2C0.707-1.791%2C1.642%20c0%2C0.794%2C0.36%2C1.197%2C1.411%2C1.579c0.439%2C0.153%2C0.662%2C0.257%2C0.776%2C0.328c0.224%2C0.145%2C0.335%2C0.352%2C0.335%2C0.592%20c0%2C0.467-0.37%2C0.811-0.871%2C0.811c-0.533%2C0-0.964-0.267-1.222-0.768l-0.722%2C0.7c0.516%2C0.756%2C1.135%2C1.094%2C1.988%2C1.094%20c1.163%2C0%2C1.982-0.778%2C1.982-1.887C16.757%2C24.202%2C16.377%2C23.788%2C15.102%2C23.322z%22%3E%3C/path%3E%20%3Cpath%20fill%3D%22%23444444%22%20d%3D%22M17.108%2C23.994c0%2C1.689%2C1.326%2C2.998%2C3.032%2C2.998c0.481%2C0%2C0.894-0.095%2C1.402-0.335v-1.32%20c-0.449%2C0.451-0.843%2C0.629-1.353%2C0.629c-1.128%2C0-1.927-0.816-1.927-1.98c0-1.1%2C0.825-1.972%2C1.877-1.972%20c0.531%2C0%2C0.937%2C0.188%2C1.402%2C0.646v-1.318c-0.491-0.248-0.894-0.351-1.379-0.351C18.467%2C20.991%2C17.108%2C22.325%2C17.108%2C23.994z%22%3E%3C/path%3E%20%3Cpolygon%20fill%3D%22%23444444%22%20points%3D%2230.617%2C24.977%2029.086%2C21.121%2027.864%2C21.121%2030.299%2C27.009%2030.9%2C27.009%2033.382%2C21.121%2032.17%2C21.121%20%22%3E%3C/polygon%3E%20%3Cpolygon%20fill%3D%22%23444444%22%20points%3D%2233.89%2C26.864%2037.066%2C26.864%2037.066%2C25.891%2035.011%2C25.891%2035.011%2C24.341%2036.988%2C24.341%2036.988%2C23.368%2035.011%2C23.368%2035.011%2C22.093%2037.066%2C22.093%2037.066%2C21.121%2033.89%2C21.121%20%22%3E%3C/polygon%3E%20%3Cpath%20fill%3D%22%23444444%22%20d%3D%22M41.5%2C22.815c0-1.076-0.738-1.695-2.031-1.695h-1.664v5.743h1.123v-2.309h0.146l1.547%2C2.309H42l-1.807-2.421%20C41.037%2C24.271%2C41.5%2C23.694%2C41.5%2C22.815z%20M39.254%2C23.762h-0.325v-1.737h0.343c0.7%2C0%2C1.075%2C0.294%2C1.075%2C0.853%20C40.347%2C23.452%2C39.972%2C23.762%2C39.254%2C23.762z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); }
.modal {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
height: 100vh;
width: 100vw;
padding-top: 200px;
z-index: 100;
overflow-y: auto;
}
.modal__container {
display: -ms-flexbox;
display: flex;
max-width: 675px;
min-height: 400px;
margin-bottom: 125px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); }
.modal__featured {
position: relative;
-ms-flex: 1;
flex: 1;
min-width: 230px;
padding: 20px;
overflow: hidden;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
.modal__circle {
position: absolute;
top: 0;
left: 0;
height: 200%;
width: 200%;
background-color: #fbcf34;
border-radius: 50%;
-ms-transform: translateX(-50%) translateY(-25%);
transform: translateX(-50%) translateY(-25%); }
.modal__product {
position: absolute;
top: 0;
left: 50%;
max-width: 85%;
-ms-transform: translateX(calc(-50% - 10px));
transform: translateX(calc(-50% - 10px)); }
.modal__content {
-ms-flex: 3;
flex: 3;
padding: 40px 30px; }
<div class="modal">
<div class="modal__container">
<div class="modal__featured">
<button type="button" class="button--transparent button--close">
<svg class="nc-icon glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32">
<g><path fill="#ffffff" d="M1.293,15.293L11,5.586L12.414,7l-8,8H31v2H4.414l8,8L11,26.414l-9.707-9.707 C0.902,16.316,0.902,15.684,1.293,15.293z"></path> </g></svg>
<span class="visuallyhidden">Return to Product Page</span>
</button>
<div class="modal__circle"></div>
<img src="https://cloud.githubusercontent.com/assets/3484527/19622568/9c972d44-987a-11e6-9dcc-93d496ef408f.png" class="modal__product" />
</div>
<div class="modal__content">
<h2>Your payment details</h2>
<form>
<ul class="form-list">
<li class="form-list__row">
<label>Name</label>
<input type="text" name="" required="" />
</li>
<li class="form-list__row">
<label>Card Number</label>
<div id="input--cc" class="creditcard-icon">
<input type="text" name="cc_number" required="" />
</div>
</li>
<li class="form-list__row form-list__row--inline">
<div>
<label>Expiration Date</label>
<div class="form-list__input-inline">
<input type="text" name="cc_month" placeholder="MM" pattern="\\d*" minlength="2" maxlength="2" required="" />
<input type="text" name="cc_year" placeholder="YY" pattern="\\d*" minlength="2" maxlength="2" required="" />
</div>
</div>
<div>
<label>
CVC
<a href="#cvv-modal" class="button--transparent modal-open button--info">
<svg class="nc-icon glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16"><g> <path fill="#35a4fb" d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,13c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1s1,0.4,1,1 C9,12.6,8.6,13,8,13z M9.5,8.4C9,8.7,9,8.8,9,9v1H7V9c0-1.3,0.8-1.9,1.4-2.3C8.9,6.4,9,6.3,9,6c0-0.6-0.4-1-1-1 C7.6,5,7.3,5.2,7.1,5.5L6.6,6.4l-1.7-1l0.5-0.9C5.9,3.6,6.9,3,8,3c1.7,0,3,1.3,3,3C11,7.4,10.1,8,9.5,8.4z"></path> </g></svg>
<span class="visuallyhidden">What is CVV?</span>
</a>
</label>
<input type="text" name="cc_cvc" placeholder="123" pattern="\\d*" minlength="3" maxlength="4" required="" />
</div>
</li>
<li class="form-list__row form-list__row--agree">
<label>
<input type="checkbox" name="save_cc" checked="checked">
Save my card for future purchases
</label>
</li>
<li>
<button type="submit" class="button">Pay Now</button>
</li>
</ul>
</form>
</div> <!-- END: .modal__content -->
</div> <!-- END: .modal__container -->
</div> <!-- END: .modal -->
