Live demo- (Here you go)
Black contact form for Blogger/websites
Preview-
Codes for copy-
<style>/*crawlist.net CSS starts*/
.ks-confor { width: 425px; text-align: left; padding:20px 20px; color:#ccc; background:#000000; border:1px solid #000; border-radius:5px;}
.ks-confor .inject { display: block; width: 400px; height: 24px; padding: 6px 10px; margin-bottom: 20px; font: 14px Calibri, Helvetica, Arial, sans-serif; color: #ccc; background: #444; border: 1px solid #222; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; behavior: url(PIE.htc); }
.ks-confor textarea.inject { width: 400px; height: 200px; overflow: auto; }
.ks-confor .inject:focus { border: 1px solid #7fbbf9; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #7fbbf9; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #7fbbf9; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #7fbbf9; }
.ks-confor .inject:-moz-ui-invalid { border: 1px solid #e00; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00;}
.ks-confor .inject.invalid { border: 1px solid #e00; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7), 0 0 3px #e00; }
.ks-confor .form-button { padding: 0 15px; height: 30px; font: bold 12px Calibri, Helvetica, Arial, sans-serif; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); cursor: pointer; border: 1px solid #0d3d6a; outline: none; position: relative; background-color: #1d83e2; background-image: -webkit-gradient(linear, left top, left bottom, from(#1d83e2), to(#0d3d6a)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #1d83e2, #0d3d6a); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #1d83e2, #0d3d6a); /* FF3.6 */ background-image: -ms-linear-gradient(top, #1d83e2, #0d3d6a); /* IE10 */ background-image: -o-linear-gradient(top, #1d83e2, #0d3d6a); /* Opera 11.10+ */ background-image: linear-gradient(top, #1d83e2, #0d3d6a); -pie-background: linear-gradient(top, #1d83e2, #0d3d6a); /* IE6-IE9 */ -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.7); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; behavior: url(PIE.htc); }
.ks-confor .form-button:active { border: 1px solid #1d83e2; background-color: #0d3d6a; background-image: -webkit-gradient(linear, left top, left bottom, from(#0d3d6a), to(#1d83e2)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #0d3d6a, #1d83e2); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #0d3d6a, #1d83e2); /* FF3.6 */ background-image: -ms-linear-gradient(top, #0d3d6a, #1d83e2); /* IE10 */ background-image: -o-linear-gradient(top, #0d3d6a, #1d83e2); /* Opera 11.10+ */ background-image: linear-gradient(top, #0d3d6a, #1d83e2); -pie-background: linear-gradient(top, #0d3d6a, #1d83e2); /* IE6-IE9 */ -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.1); }
.ks-confor input[type=submit]::-moz-focus-inner { border: 0; padding: 0;}
.ks-confor label { margin-bottom: 10px; display: block; width: 300px; color: #ccc; font-size: 14px; font-weight: bold; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;}
.ks-confor label span { font-size: 12px; color: #888; font-weight: normal; }/*crawlist.net CSS ends*/
</style>
<script>
// Replicate placeholder for input boxes and textarea in older browsers
$(function(){
$('input[placeholder], textarea[placeholder]').each(function(){
var $placeInput = $(this);
if( 'placeholder' in document.createElement('input') ) {
var placeholder = true;
}
else {
var placeholder = false;
$placeInput.val( $placeInput.attr('placeholder') );
}
if( !placeholder ) {
$placeInput.focusin(function(){
if( $placeInput.val() === $placeInput.attr('placeholder') ) {
$placeInput.val('');
}
})
.focusout(function(){
if( $placeInput.val() === '' ) {
$placeInput.val( $placeInput.attr('placeholder') );
}
});
}
});
});
</script>
<!-- crawlist.net contact form starts -->
<form action="mailto:you@email.com" class="ks-confor">
<label for="name">Name <span>(required)</span></label>
<input type="text" name="name" class="inject" required />
<label for="email">Email <span>(required)</span></label>
<input type="email" name="email" class="inject" required />
<label for="subject">Subject <span>(optional)</span></label>
<input type="text" name="subject" class="inject" />
<label for="message">Message <span>(required)</span></label>
<textarea name="message" class="inject" required></textarea>
<input class="form-button" type="submit" value="Send Message" />
</form>
<!-- crawlist.net contact form ends -->
White contact form for Blogger/websites
Preview-
Codes for copy-
<style>/*crawlist.net CSS starts*/
.ks-conforlight { width: 425px; text-align: left; padding:20px 20px; color:#FFF; background:#fff; border:1px solid #ccc; border-radius:5px;}
.ks-conforlight .inject { display: block; width: 400px; height: 24px; padding: 6px 10px; margin-bottom: 20px; font: 14px Calibri, Helvetica, Arial, sans-serif; color: #333; background: #fff; border: 1px solid #ccc; outline: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.5); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; behavior: url(PIE.htc); }
.ks-conforlight textarea.inject { width: 400px; height: 200px; overflow: auto; }
.ks-conforlight .inject:focus { border: 1px solid #7fbbf9; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #7fbbf9; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #7fbbf9; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #7fbbf9; }
.ks-conforlight .inject:-moz-ui-invalid { border: 1px solid #e00; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #e00; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #e00; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #e00;}
.ks-conforlight .inject.invalid { border: 1px solid #e00; -moz-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #e00; -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #e00; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3), 0 0 3px #e00; }
.ks-conforlight .form-buttonz { padding: 0 15px; height: 30px; font: bold 12px Calibri, Helvetica, Arial, sans-serif; text-align: center; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); cursor: pointer; border: 1px solid #1972c4; outline: none; position: relative; background-color: #1d83e2; background-image: -webkit-gradient(linear, left top, left bottom, from(#77b5ee), to(#1972c4)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #77b5ee, #1972c4); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #77b5ee, #1972c4); /* FF3.6 */ background-image: -ms-linear-gradient(top, #77b5ee, #1972c4); /* IE10 */ background-image: -o-linear-gradient(top, #77b5ee, #1972c4); /* Opera 11.10+ */ background-image: linear-gradient(top, #77b5ee, #1972c4); -pie-background: linear-gradient(top, #77b5ee, #1972c4); /* IE6-IE9 */ -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5); -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; behavior: url(PIE.htc); }
.ks-conforlight .form-buttonz:active { border: 1px solid #77b5ee; background-color: #1972c4; background-image: -webkit-gradient(linear, left top, left bottom, from(#1972c4), to(#77b5ee)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #1972c4, #77b5ee); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #1972c4, #77b5ee); /* FF3.6 */ background-image: -ms-linear-gradient(top, #1972c4, #77b5ee); /* IE10 */ background-image: -o-linear-gradient(top, #1972c4, #77b5ee); /* Opera 11.10+ */ background-image: linear-gradient(top, #1972c4, #77b5ee); -pie-background: linear-gradient(top, #1972c4, #77b5ee); /* IE6-IE9 */ -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5); }
.ks-conforlight input[type=submit]::-moz-focus-inner { border: 0; padding: 0;}
.ks-conforlight label { margin-bottom: 10px; display: block; width: 300px; color: #444; font-weight: bold; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
.ks-conforlight label span { font-size: 12px; font-weight: normal; color: #999; }/*crawlist.net CSS ends*/
</style>
<script>
// Replicate placeholder for input boxes and textarea in older browsers
$(function(){
$('input[placeholder], textarea[placeholder]').each(function(){
var $placeInput = $(this);
if( 'placeholder' in document.createElement('input') ) {
var placeholder = true;
}
else {
var placeholder = false;
$placeInput.val( $placeInput.attr('placeholder') );
}
if( !placeholder ) {
$placeInput.focusin(function(){
if( $placeInput.val() === $placeInput.attr('placeholder') ) {
$placeInput.val('');
}
})
.focusout(function(){
if( $placeInput.val() === '' ) {
$placeInput.val( $placeInput.attr('placeholder') );
}
});
}
});
});
</script>
<!-- crawlist.net contact form starts -->
<form action="mailto:you@email.com" class="ks-conforlight">
<label for="name">Name <span>(required)</span></label>
<input type="text" name="name" class="inject" required />
<label for="email">Email <span>(required)</span></label>
<input type="email" name="email" class="inject" required />
<label for="subject">Subject <span>(optional)</span></label>
<input type="text" name="subject" class="inject" />
<label for="message">Message <span>(required)</span></label>
<textarea name="message" class="inject" required></textarea>
<input class="form-buttonz" type="submit" value="Send Message" />
</form>
<!-- crawlist.net contact form ends -->
How to add in Blogger-
- First log into your Blogger account, select your blog,
- Go to 'Pages' tab and create a page name 'Contact us'
- Select 'edit page' top left of page editing (Compose/HTML) switch to (HTML) mode
- And paste codes in text area, and configure
How to add in websites-
- Go to your contact page's Stylesheet and paste following code and configure.
How to configure-
- "you@email.com" replace with your email what you intent to use as contact with you.
