Main Content
Contact Form Styles
Standard Wireframing Elements
Contact Form Style 1
Close
HTML
<section class="aios-contact-form-style-1">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-1{
margin: 20px 0;
}
.aios-contact-form-style-1 .cf-form{
width: 100%;
height: auto;
background-color: #d7d7d7;
font-size: 0;
padding: 43px 0;
}
.aios-contact-form-style-1 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 19px;
color: #fff;
width: 25.5%;
text-align: center;
padding: 10px 0;
text-transform: uppercase;
}
.aios-contact-form-style-1 .cf-form form{
display: inline-block;
vertical-align: top;
width: 74.5%;
}
.aios-contact-form-style-1 .cf-form form input{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 10px;
margin-left: 0.5%;
width: 19.6%;
display: inline-block;
vertical-align: top;
font-family: arial
}
.aios-contact-form-style-1 .cf-form form textarea{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 15px 14px 0;
margin-left: 0.5%;
width: 35.2%;
display: inline-block;
vertical-align: top;
resize: none;
font-family: arial
}
.aios-contact-form-style-1 .cf-form input[type="submit"]{
height: 45px;
border: none;
background: #009bbb;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 16%;
margin-left: 4%;
cursor: pointer;
font-weight: bold;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.aios-contact-form-style-1 .cf-form h2{
width: 100%;
text-align: center;
}
.aios-contact-form-style-1 .cf-form form{
width: 100%;
padding: 0 6%;
}
.aios-contact-form-style-1 .cf-form form input{
width: 100%;
margin-bottom: 2px;
}
.aios-contact-form-style-1 .cf-form form textarea{
width: 100%;
height: 105px;
}
.aios-contact-form-style-1 .cf-form input[type="submit"]{
display: block;
margin: 0 auto;
width: 50%;
margin-top: 10px;
}
}
Javascript
Got Questions? Ask Us!
Contact Form Style 2
Close
HTML
<section class="aios-contact-form-style-2">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-2{
margin: 20px 0;
background-color: #d7d7d7;
}
.aios-contact-form-style-2 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 43px 0;
}
.aios-contact-form-style-2 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 19px;
color: #fff;
width: 25.5%;
text-align: center;
padding: 9px 0;
text-transform: uppercase;
}
.aios-contact-form-style-2 .cf-form form{
display: inline-block;
vertical-align: top;
width: 74.5%;
}
.aios-contact-form-style-2 .cf-form form input{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 10px;
margin-left: 0.5%;
width: 19.6%;
display: inline-block;
vertical-align: top;
font-family: arial;
}
.aios-contact-form-style-2 .cf-form form textarea{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 15px 14px 0;
margin-left: 0.5%;
width: 35.2%;
display: inline-block;
vertical-align: top;
resize: none;
font-family: arial;
}
.aios-contact-form-style-2 .cf-form input[type="submit"]{
height: 45px;
border: none;
background: #009bbb;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 16%;
cursor: pointer;
margin-left: 4%;
font-weight: bold;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.aios-contact-form-style-2 .cf-form h2{
width: 100%;
text-align: center;
}
.aios-contact-form-style-2 .cf-form form{
width: 100%;
padding: 0 6%;
}
.aios-contact-form-style-2 .cf-form form input{
width: 100%;
margin-bottom: 2px;
}
.aios-contact-form-style-2 .cf-form form textarea{
width: 100%;
height: 105px;
}
.aios-contact-form-style-2 .cf-form input[type="submit"]{
display: block;
margin: 0 auto;
width: 50%;
margin-top: 10px;
}
}
Javascript
Got Questions? Ask Us!
Contact Form Style 3
Close
HTML
<section class="aios-contact-form-style-3">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<div class="cf-wrap">
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</div>
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-3{
margin: 20px 0;
}
.aios-contact-form-style-3 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 32px;
background-color: #d7d7d7;
max-width: 556px;
margin: 0 auto;
}
.aios-contact-form-style-3 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 24px;
color: #fff;
width: 100%;
text-align: center;
padding: 14px 0 27px;
text-transform: uppercase;
}
.aios-contact-form-style-3 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-3 .cf-form form input{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 10px;
margin-left: 0.5%;
width: 49.7%;
display: inline-block;
vertical-align: top;
}
.aios-contact-form-style-3 .cf-form form input:first-child{
margin-left: 0;
}
.aios-contact-form-style-3 .cf-form .cf-wrap{
width: 99.9%;
position: relative;
}
.aios-contact-form-style-3 .cf-form form textarea{
height: 105px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 17px 152px 0 14px;
width: 100%;
display: block;
resize: none;
margin-top: 2px;
}
.aios-contact-form-style-3 .cf-form input[type="submit"]{
border: none;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 135px;
position: absolute;
right: 2%;
top: 8%;
height: 85px;
background: #009bbb;
cursor: pointer;
font-weight: bold;
}
CSS Mobile
Javascript
Got Questions? Ask Us!
Contact Form Style 4
Close
HTML
<section class="aios-contact-form-style-4">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-4{
margin: 20px 0;
}
.aios-contact-form-style-4 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 32px;
background-color: #d7d7d7;
max-width: 361px;
margin: 0 auto;
}
.aios-contact-form-style-4 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 22px;
color: #fff;
width: 100%;
text-align: center;
padding: 14px 0 27px;
text-transform: uppercase;
}
.aios-contact-form-style-4 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-4 .cf-form form input{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 10px;
width: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
}
.aios-contact-form-style-4 .cf-form form textarea{
height: 105px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 17px 14px 0;
width: 100%;
display: block;
resize: none;
}
.aios-contact-form-style-4 .cf-form input[type="submit"]{
border: none;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 100%;
height: 45px;
background-color: #009bbb;
cursor: pointer;
margin-top: 11px;
font-weight: bold;
}
CSS Mobile
Javascript
Got Questions? Ask Us!
Contact Form Style 5
Close
HTML
<section class="aios-contact-form-style-5">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message..."></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-5{
margin: 20px 0;
}
.aios-contact-form-style-5 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 32px 95px;
border: 1px solid #b1b1b1;
max-width: 750px;
margin: 0 auto;
background: #fff;
}
.aios-contact-form-style-5 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 24px;
color: #636363;
width: 100%;
text-align: center;
padding: 14px 0 27px;
text-transform: uppercase;
}
.aios-contact-form-style-5 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-5 .cf-form form input{
height: 45px;
background: transparent;
border: none;
border-bottom: 1px solid #bebebe;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
outline: none;
padding: 10px;
width: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
}
.aios-contact-form-style-5 .cf-form form textarea{
height: 105px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
border-bottom: 1px solid #bebebe;
outline: none;
padding: 17px 14px 0;
width: 100%;
display: block;
resize: none;
}
.aios-contact-form-style-5 .cf-form input[type="submit"]{
border: none;
color: #636363;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 100%;
max-width: 299px;
height: 45px;
border: solid 1px #b1b1b1;
cursor: pointer;
display: block;
margin: 27px auto;
background: transparent;
font-weight: bold;
}
CSS Mobile
@media only screen and (max-width: 992px) {
.aios-contact-form-style-5 .cf-form{
padding: 32px 30px;
}
}
Javascript
Got Questions? Ask Us!
Contact Form Style 6
Close
HTML
<section class="aios-contact-form-style-6">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-6{
margin: 20px 0;
}
.aios-contact-form-style-6 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 30px;
background-color: #d7d7d7;
}
.aios-contact-form-style-6 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 23px;
color: #fff;
width: 100%;
text-align: center;
padding: 0 0 20px;
text-transform: uppercase;
}
.aios-contact-form-style-6 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-6 .cf-form form input{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 10px;
margin-left: 0.5%;
width: 23%;
display: inline-block;
vertical-align: top;
font-family: arial;
}
.aios-contact-form-style-6 .cf-form form textarea{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 13px;
margin-left: 0.5%;
width: 35.2%;
display: inline-block;
vertical-align: top;
resize: none;
font-family: arial;
}
.aios-contact-form-style-6 .cf-form input[type="submit"]{
height: 45px;
border: none;
background: #009bbb;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 16%;
cursor: pointer;
font-weight: bold;
margin-left: 1%;
}
CSS Mobile
Javascript
Got Questions? Ask Us!
Contact Form Style 7
Close
HTML
<section class="aios-contact-form-style-7">
<div class="container">
<div class="cf-form">
<h2>Got Questions? Ask Us!</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-7{
margin: 20px 0;
padding: 30px;
background-color: #d7d7d7;
}
.aios-contact-form-style-7 .cf-form{
width: 100%;
height: auto;
font-size: 0;
}
.aios-contact-form-style-7 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 23px;
color: #fff;
width: 100%;
text-align: center;
padding: 0 0 20px;
text-transform: uppercase;
}
.aios-contact-form-style-7 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-7 .cf-form form input{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 10px;
margin-left: 0.5%;
width: 23%;
display: inline-block;
vertical-align: top;
font-family: arial;
}
.aios-contact-form-style-7 .cf-form form textarea{
height: 45px;
background: #fff;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: none;
outline: none;
padding: 13px;
margin-left: 0.5%;
width: 35.2%;
display: inline-block;
vertical-align: top;
resize: none;
font-family: arial;
}
.aios-contact-form-style-7 .cf-form input[type="submit"]{
height: 45px;
border: none;
background: #009bbb;
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 16%;
cursor: pointer;
margin-left: 1%;
font-weight: bold;
}
CSS Mobile
Javascript
Got Questions? Ask Us!
Contact Form Style 8
Close
HTML
<section class="aios-contact-form-style-8">
<div class="container">
<div class="cf-form">
<h2>send a message</h2>
<form action="#" method="get">
<input type="text" placeholder="Name">
<input type="email" placeholder="Email Address">
<textarea placeholder="Message..."></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-8{
margin: 20px 0;
}
.aios-contact-form-style-8 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 32px 95px;
border: 1px solid #b1b1b1;
max-width: 750px;
margin: 0 auto;
}
.aios-contact-form-style-8 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 24px;
color: #636363;
width: 100%;
text-align: center;
padding: 14px 0 27px;
text-transform: uppercase;
}
.aios-contact-form-style-8 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-8 .cf-form form input{
height: 45px;
background: transparent;
border: solid 1px #b1b1b1;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
outline: none;
padding: 10px;
width: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
background: transparent;
}
.aios-contact-form-style-8 .cf-form form textarea{
height: 105px;
background: transparent;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: solid 1px #b1b1b1;
outline: none;
padding: 17px 14px 0;
width: 100%;
display: block;
resize: none;
}
.aios-contact-form-style-8 .cf-form input[type="submit"]{
border: none;
color: #636363;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 100%;
max-width: 299px;
height: 45px;
border: transparent;
cursor: pointer;
display: block;
margin: 27px auto;
color: #fff;
background-color: #009bbb;
font-weight: bold;
}
.aios-contact-form-style-8 .cf-form input[type="submit"]:hover{
background: #06bbe0;
}
CSS Mobile
Javascript
send a message
Contact Form Style 9
Close
HTML
<section class="aios-contact-form-style-9">
<div class="container">
<div class="cf-form">
<h2>send a message</h2>
<form action="#" method="get">
<div class="form-col">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
</div>
<div class="form-col">
<input type="email" placeholder="Email Address">
<input type="tel" placeholder="Phone Number">
</div>
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>CSS
.aios-contact-form-style-9{
margin: 20px 0;
}
.aios-contact-form-style-9 .cf-form{
width: 100%;
height: auto;
font-size: 0;
padding: 32px 95px;
border: 1px solid #b1b1b1;
max-width: 750px;
margin: 0 auto;
}
.aios-contact-form-style-9 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 24px;
color: #636363;
width: 100%;
text-align: center;
padding: 14px 0 27px;
text-transform: uppercase;
}
.aios-contact-form-style-9 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-9 .cf-form form input{
height: 45px;
background: transparent;
border: solid 1px #b1b1b1;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
outline: none;
padding: 10px;
width: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
background: transparent;
}
.aios-contact-form-style-9 .cf-form form .form-col input{
width: 49.5%;
display: inline-block;
vertical-align: top;
margin-left: 1%;
}
.aios-contact-form-style-9 .cf-form form .form-col input:first-child{
margin-left: 0;
}
.aios-contact-form-style-9 .cf-form form textarea{
height: 105px;
background: transparent;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: solid 1px #b1b1b1;
outline: none;
padding: 17px 14px 0;
width: 100%;
display: block;
resize: none;
}
.aios-contact-form-style-9 .cf-form input[type="submit"]{
border: none;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 100%;
max-width: 299px;
height: 45px;
border: transparent;
cursor: pointer;
display: block;
margin: 27px auto;
color: #fff;
background-color: #009bbb;
font-weight: bold;
}
.aios-contact-form-style-9 .cf-form input[type="submit"]:hover{
background: #06bbe0;
}
CSS Mobile
Javascript
send a message
Contact Form Style 10
Close
HTML
<section class="aios-contact-form-style-10">
<div class="container">
<div class="cf-form">
<h2>send a message</h2>
<form action="#" method="get">
<div class="form-col">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
</div>
<div class="form-col">
<input type="email" placeholder="Email Address">
<input type="tel" placeholder="Phone Number">
</div>
<textarea placeholder="Message / Inquiry"></textarea>
<input type="submit" value="Send">
</form>
</div>
<div class="cf-image">
<canvas width="446" height="338" style="background-image: url(http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/contact-form-image.jpg);"></canvas>
</div>
</div>
</section>CSS
.aios-contact-form-style-10{
margin: 20px 0;
}
.aios-contact-form-style-10 .container{
border: 1px solid #b1b1b1;
padding-top: 40px;
padding-bottom: 40px;
}
.aios-contact-form-style-10 .cf-form{
width: 50%;
float: left;
margin-left: 3%;
}
.aios-contact-form-style-10 .cf-form h2{
display: inline-block;
vertical-align: top;
font-size: 24px;
color: #636363;
width: 100%;
text-align: center;
padding: 14px 0 27px;
text-transform: uppercase;
}
.aios-contact-form-style-10 .cf-form form{
display: inline-block;
vertical-align: top;
width: 100%;
}
.aios-contact-form-style-10 .cf-form form .form-col input{
width: 49.1%;
display: inline-block;
vertical-align: top;
margin-left: 1%;
}
.aios-contact-form-style-10 .cf-form form input{
height: 45px;
background: transparent;
border: solid 1px #b1b1b1;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
outline: none;
padding: 10px;
width: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
background: transparent;
}
.aios-contact-form-style-10 .cf-form form .form-col input:first-child{
margin-left: 0;
}
.aios-contact-form-style-10 .cf-form form textarea{
height: 105px;
background: transparent;
font-weight: normal;
font-size: 13px;
color: #a9a9a9;
border: solid 1px #b1b1b1;
outline: none;
padding: 17px 14px 0;
width: 100%;
display: block;
resize: none;
}
.aios-contact-form-style-10 .cf-form input[type="submit"]{
border: none;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
width: 100%;
max-width: 299px;
height: 45px;
border: transparent;
cursor: pointer;
display: block;
margin: 27px auto;
color: #fff;
background-color: #009bbb;
font-weight: bold;
}
.aios-contact-form-style-10 .cf-form input[type="submit"]:hover{
background: #06bbe0;
}
.aios-contact-form-style-10 .cf-image{
width: 38%;
float: left;
margin-left: 6%;
margin-top: 2%;
}
.aios-contact-form-style-10 .cf-image canvas{
display: block;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}CSS Mobile
@media only screen and (max-width: 992px){
.aios-contact-form-style-10 .cf-form{
width: 100%;
}
.aios-contact-form-style-10 .cf-image{
width: 100%;
margin-left: 0;
}
}Javascript