Skip to content

Instantly share code, notes, and snippets.

@himynameisdave

himynameisdave/Ultra-Clean-UI-Contact-Us-Form.markdown

Created December 14, 2014 00:51
Show Gist options
  • Save himynameisdave/5d8ba4047551c2dee765 to your computer and use it in GitHub Desktop.
Save himynameisdave/5d8ba4047551c2dee765 to your computer and use it in GitHub Desktop.
Download ZIP
Ultra-Clean UI 'Contact Us' Form
Raw
index.html
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<form action="" class="contact-form">
<span>Contact Us!</span>
<ul>
<li>
<i class="fa fa-user form-icon"></i>
<input type="text" placeholder="Name" />
</li>
<li>
<i class="fa fa-at form-icon"></i>
<input type="text" placeholder="Email" />
</li>
<li>
<i class="fa fa-university form-icon"></i>
<input type="text" placeholder="Organization/Academic Institution" />
</li>
<li>
<i class="fa fa-phone form-icon"></i>
<input type="text" placeholder="Phone" />
</li>
<li>
<i class="fa fa-paper-plane form-icon"></i>
<input type="text" placeholder="Subject" />
</li>
<li>
<i class="fa fa-envelope form-icon"></i>
<textarea placeholder="Message" rows="2"></textarea>
</li>
<li>
<input type="submit" placeholder="Submit" />
</li>
</ul>
</form>
Raw
style.less
//Created by Dave Lunny in the beautiful year of 2014
//////////////////////////////////////
// Import(ant) Imports //
//////////////////////////////////////
// Grab Roboto (Shutup I like it, you can change it if you like)
@import url(http://fonts.googleapis.com/css?family=Roboto:100);
// Grab Font-Awesome, which is actually better to grab from the HTML so imma do that
// @import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
/////////////////////////////////////
//////////////////////////////////////
// CONFIG //
////////////////////////////////////
// Pick a primary color
@primary-color: #f1a6f3;
// Set the color of the icons
@icon-color: #aaa;
// For whatever reason the placeholder color is a variable so you can change it here
@pholder-color: #ccc;
// Dope colors (not required):
@blue: #0ac; @red: #f66; @amber: #ffc107; @blueGrey: #607d8b; @lightGreen: #8bc34a; @offBlack: #333;
// Font Stack (mmm Roboto)
@font: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
// The width of the form (takes on 100% this is just the max width)
@form-width: 380px;
// WOW this is the scale of the inner elements
@base: 15.5px;
// Standard ratio:
// 22.5 : 15
// (@form-width : @base)
/////////////////////////////////////
////////////////////////////////////
// CSS TRANSITION MIXIN //
// (super overdone but dope!) //
/////////////////////////////////
.trans(@prop, @speed){
-webkit-transition: @prop @speed ease;
-moz-transition: @prop @speed ease;
-o-transition: @prop @speed ease;
transition: @prop @speed ease;
}
/////////////////////////////////////
form.contact-form {
width: 100%;
max-width: @form-width;
margin: 10px auto;
font-size: @base;
font-family: @font;
font-weight: 100;
line-height: @base * 1.618;
letter-spacing: -0.5px;
.trans(box-shadow,0.4s);
box-shadow: 0px 2px 10px #eee;
&:hover {
box-shadow: 0px 4px 14px #ddd,
0px 0px 6px lighten(@primary-color, 25%);
}
span {
text-align: center;
display: block;
color: #333;
padding: (@base * 1.25) (@base * 1.25) (@base * 0.5);
font: inherit;
font-size: @base * 1.618;
}
ul {
margin: 0; padding: 0; list-style: none;
li{
padding: 0;
border-bottom: 1px solid #ddd;
margin: 0;
text-align: center;
width: 100%;
i.form-icon {
display: inline-block;
vertical-align: middle;
width: 2%;
text-align: center;
margin: 0 0.5% 0 1%;
padding: 0;
font-size: @base * 1.05;
color: #aaa;
}
input[type="text"] {
width: 90%;
background: none;
margin: 0;
padding: (@base * 0.6666667) 2%;
border: 0;
border-bottom: 3px solid rgba(0,0,0,0);
text-align: left;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
.trans(border-bottom,0.35s);
&:focus{
outline: none;
border-bottom: 3px solid @primary-color;
}
&::-webkit-input-placeholder { .trans(color,0.35s); color: @pholder-color; }
&:-moz-placeholder { .trans(color,0.35s);color: @pholder-color; }
&::-moz-placeholder { .trans(color,0.35s); color: @pholder-color; }
&:-ms-input-placeholder { .trans(color,0.35s); color: @pholder-color; }
&:focus::-webkit-input-placeholder { color: @primary-color; }
&:focus:-moz-placeholder { color: @primary-color; }
&:focus::-moz-placeholder { color: @primary-color; }
&:focus:-ms-input-placeholder { color: @primary-color; }
}
textarea {
display: inline-block;
vertical-align: top;
width: 88%;
background: none;
padding: (@base * 0.6666667) 2%;
resize: none;
border: 0;
border-bottom: 3px solid rgba(0,0,0,0);
text-align: left;
height: auto;
min-height: @form-width * 0.35;
margin: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;font-family: inherit;
.trans(border-bottom,0.35s);
&:focus{
outline: none;
border-bottom: 3px solid @primary-color;
}
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background: lighten(@primary-color, 20%);
border-radius: 2px;
}
&::-webkit-input-placeholder { .trans(color,0.35s); color: @pholder-color; }
&:-moz-placeholder { .trans(color,0.35s);color: @pholder-color; }
&::-moz-placeholder {.trans(color,0.35s); color: @pholder-color; }
&:-ms-input-placeholder {.trans(color,0.35s); color: @pholder-color; }
&:focus::-webkit-input-placeholder { color: @primary-color; }
&:focus:-moz-placeholder { color: @primary-color; }
&:focus::-moz-placeholder { color: @primary-color; }
&:focus:-ms-input-placeholder { color: @primary-color; }
}
input[type="submit"] {
margin: 15px auto 15px;
padding: (@base * 0.6666667) (@base * 1.25);
border: 1px solid darken(#ddd, 5%);
display: inline-block;
border-radius: 6px;
background: rgba(255, 255, 255, 0);
font-weight: inherit;
font-family: inherit;
font-size: inherit;
.trans(background border,0.35s);
&:focus{
outline: none;
border: 1px solid @primary-color;
}
&:hover {
background: lighten(#ddd, 5%);
border: 1px solid @primary-color;
}
&:active {
background: darken(#ddd, 5%);
}
}
}
}
}
Raw
Ultra-Clean-UI-Contact-Us-Form.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment