<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form class="contact_form" action="" method="post" name="contact_form">
<li>
<h2> Support Ticket</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" />
<span class="form_hint">required</span>
</li>
<li>
<label for="email">Email:</label>
<input type="text" name="email" />
<span class="form_hint">Proper format "name@something.com"</span>
</li>
<li>
<label for="Phone">Phone:</label>
<input type="text" name="Phone" />
<span class="form_hint">Not required</span>
</li>
<li>
<label for="proirty">Prority:</label>
<select name="dropdown" class="dropdown">
<option>Proirty...</option>
<option>Cretical</option>
<option>High</option>
<option>Medium</option>
<option>Low</option>
</select>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" >
:-moz-placeholder {
color: blue;
}
::-webkit-input-placeholder {
color: blue;
}
*:focus {outline: none;}
body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
.contact_form ul {
width:750px;
list-style-type:none;
list-style-position:outside;
margin:0px;
padding:0px;
}
.contact_form li{
padding:12px;
border-bottom:1px solid #eee;
position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
border-bottom:1px solid #777;
}
.contact_form h2 {
margin:0;
display: inline;
}
.required_notification {
color:#d45252;
margin:5px 0 0 0;
display:inline;
float:right;
}
.contact_form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.contact_form input {
height:20px;
width:220px;
padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}
.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border:1px solid #555;
box-shadow: 0 0 3px #aaa;
}
/* Button Style */
.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
padding-right:70px;
}
.contact_form input, .contact_form textarea { /* add this to the already existing style */
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input, .contact_form textarea {
padding-right:30px;
}
input:required, textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
::-webkit-validation-bubble-message {
padding: 1em;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}
.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
.form_hint::before {
content: "\25C0"; /* left point triangle in escaped unicode */
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color:#28921f;} /* change form hint arrow color when valid */
dropdown = [
'<div class="dk_container" id="dk_container_{{ id }}" tabindex="{{ tabindex }}">',
'<a class="dk_toggle">',
'<span class="dk_label">{{ label }}</span>',
'</a>',
'<div class="dk_options">',
'<ul class="dk_options_inner">',
'</ul>',
'</div>',
'</div>'
].join(''),
