Showing posts with label Form. Show all posts
Showing posts with label Form. Show all posts

Thursday 27 February 2014

Adding Floating Contact Form To Blogger



Just a quick news before I start the stuff. Google Code has suspended my code account & all repositories I hosted there, so all my code that I use in this website & in tutorials in no longer controlled by me. That's it!

If you're not satisfied with adding Blogger's contact form widget to a specific page of your blog, you can also use it as a floating widget.

BloggerItems has created a cool floating contact form widget for Blogger. First, add Blogger's official contact form widget to your blog.

  • Go To Blogger > Template > Edit HTML
  • Search and paste this code just about ]]></b:skin>:
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}
Then paste the below code before </body> tag in your template:

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

That's IT!

Sunday 26 May 2013

Three Stylish Customized Blogger Contact Forms


Yesterday, I posted a couple of articles about Blogger's new contact form widgets. First, I showed you how to add this widget to your Blog's sidebar, then I showed you how to add this form to a specific page of your blog.

It's time for me to share three stylish customized designs for Blogger's new contact form widget. All three designs are coded with some really simple CSS, and they look really great on your blog's sidebar and pages.

First, I'll showcase three stylish designs with their CSS, then I'll show how to add them on your blog.

Design #1:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
background: #FFFFFF;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

#ContactForm1_contact-form-email-message {
width: 245px;
height: 150px;
line-height: 150%;
}

#ContactForm1_contact-form-submit:hover, textarea:hover,
#ContactForm1_contact-form-submit:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}

#ContactForm1_contact-form-submit{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
height:40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

Design #2:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HpAaUCELV4K1-7UCQ99iut8yGa4FWQqg0o0rvFy1V8oigUlb1M1hmQfHy6NucIioVp1bKrkkeCASvBPso0OaFtCZwb3ZYpQmDb2n7496SULzX1SRMyC-WNQOMoMhplo882X6MnPdtAI/s1600/form_name.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8stcNavSUoBqa4LbJ4IehqTQeMHV0OCGKDdwydT6mcXss8MDOtFHJP_tLmYS23kM7NxA7Ujx2BOY6PRSRi9YkKqxWij13sDB_bWL9H-niqt0ya00VYsq_tqSq4ov6qVdq2HTbhxTM3F0/s1600/form_email.gif") no-repeat scroll 5px 50% rgb(255, 255, 255);
}

#ContactForm1_contact-form-email-message {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVDUB3LPRdSw2-jYwvT1cBiIEjmYq9N71BQFMMk2lj0UoPUHOR_6ZLqWgUBcNVWtSTUK7EDd3iOgI-3nj8ylkt9hRgRw3uE_RSa11F5SJRba-k0jkkFBgwcEZTE1SHIcBcdbw6D-SK_A/s1600/form_note.gif") no-repeat scroll 5px 6px rgb(255, 255, 255);
}

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email, #ContactForm1_contact-form-email-message {
margin: 0px;
width: 250px;
border: 1px solid rgb(221, 221, 221);
padding: 3px 5px 3px 25px;
}

#ContactForm1_contact-form-submit {
margin-top: 5px;
padding: 5px;
width: 100px;
background-color: rgb(225, 77, 77);
background-image:none;
border: 1px solid rgb(57, 21, 21);
border-radius: 5px 5px 5px 5px;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
line-height: 48px;
text-transform: uppercase;
text-shadow: 0px 1px 0px rgb(0, 0, 0);
}

Design #3:


/*---- Custom Blogger Contact Form Style By BWidgets.com -----*/

#ContactForm1_contact-form-name,#ContactForm1_contact-form-email {
border-color: rgb(0, 0, 0);
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
line-height: normal;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-email-message {
border-color: rgb(0, 0, 0);
padding-right: 5px;
min-height: 100px;
width:265px;
border: 1px solid rgb(186, 186, 186);
padding: 4px 6px 6px 5px;
background-color: rgb(255, 255, 255);
outline: 0px none;
margin-right: 32px;
min-height: 32px;
position: relative;
-moz-box-sizing: border-box;
overflow: auto;
vertical-align: top;
font-size: 100%;
margin: 0px;
vertical-align: baseline;
font-family: sans-serif;
}

#ContactForm1_contact-form-submit {
background-image:none;
background-color: rgb(0, 130, 135);
color: rgb(255, 255, 255);
font-family: 'Segoe UI','Open Sans',Verdana,Arial,Helvetica,sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
vertical-align: middle !important;
min-width: 90px;
min-height: 32px;
height: 32px;
border: 1px solid transparent;
color: white;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
text-align: center;
cursor: pointer;
padding: 4px 10px;
position: relative;
outline: medium none;
border-radius: 0px 0px 0px 0px;
}

How To Add Custom Style To Contact Form:

Adding these custom CSS codes into your blog is pretty simple. Some of you are just going to leave this part, since they know how easy it really is. For those who don't know, here you go:

  • Go To Blogger > Template > Edit HTML
  • Search for ]]></b:skin>:
  • Add your favorite form's CSS above ]]></b:skin>
  • Save your template...That's IT!

That was pretty easy! If you're using one of these styles, then please let me know you favorite for future styles. You guys are free to share these styles with your friends and fans, just don't forget to give us credits for our hard work. You can also share your custom styles in the comment section below...

Saturday 25 May 2013

Adding Blogger Contact Form Into Static Page


Earlier today, I posted an article about Blogger's official Contact Form gadget at this link. This contact form is amazingly customizable. You can also add this form into your blog's static page or post with some simple steps. It's a great way to get rid of some extra forms in your drive. You can check this Contact Form in action by clicking here.

I'm going to finish this tutorial really quick, since I'm posting it second time. First post was not save due to an error. It was a huge post, so I'm not going to write it again :'(

Add Contact Form To Your Blog:

You can add this contact form into your blog's sidebar by reading this tutorial. Note: You must have this gadget on your sidebar to add this to your static page.

Hiding Contact Form From Your Sidebar:

Now you must hide this gadget from your site, so it'll only be available on your site's contact page. Here we go:

  • Go To Blogger > Template > Edit HTML
  • Search and paste this code just about ]]></b:skin>:

#ContactForm1{
display: none ! important;
}

Save your template. Now time for final step:

Adding Contact Form To A Static Page:

I'm going to finish this real quick, here we go:

  • Go To Blogger > Posts
  • Click on New Page and select Blank Page
  • Now in your blank page, click on HTML option to switch to html editor mode
  • Now paste following code and publish or update your page:

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

That's it! Don't forget to comment. You all are free to share this post on your blog, but don't forget to give us credits for out work.

Adding Contact Form Widget To Blogger

Blogger has launched a new amazing contact form widget for all of us. I'm using Google Drive contact form to receive all messages, but I'll use this widget soon on my blog. It's a great and must use widget for all blogs.

This widget was first discovered in Blogger's stylesheet by our friend at Stylify Your Blog. This new gadget release comes with the recent updates announced Google I/O 2013 and it looks like Blogger is still a integral part of the Google's Product line.

Features Of Blogger Contact Form:

  • Stylish AJAX form with Google UI.
  • Sending simple text messages.
  • Custom CSS supported. 
  • Message will be delivered right into your inbox.
  • No need of any third-party service.
  • Plain text messages without any attachments.

Adding Contact Form To Blogger:

  • Go To Blogger > Layout > Add A Gadget > More Gadgets


  • Choose Contact Form gadget
Give it a suitable name, and click on save to add this gadget. That's IT!!!

This widget is awesome. However, Google Docs form has more features - like, drop down list, additional fields, select field, more.

In future, I'll tell you how to use this widget on your pages, and also how to customize this widget with some magical CSS.

Friday 10 May 2013

Add Login Form To WordPress Sidebar


Adding a login form in your site's sidebar will surely attract your readers to login or register. It's less painful than visiting your WP's login page to login.

Mike Jolley created a great ajax-enhanced login plugin for WordPress, which is available to download at this link. This widget adds a useful login widget which you can use to login from in the sidebar of your WordPress.

How To Install:

  • Click here and download this plugin. Visit your WordPress' plugin page and install this plugin.
  • You can also install this plugin from your WP's plugin directory.

Usage:

  • Simply go to Appearance > Widgets and drag "sidebar login" to the sidebar of your choice.

After login it redirects them back to the page they logged in from. You can contribute to this awesome plugin on GitHub at this link. You can also use this widget on your WP's template with the the_widget() function.

As of writing, you can check a live demo of this widget on my wordpress site at this link. Don't forget to leave a comment.

In next few months, I'll focus on WordPress plugins and tricks. Also, #NowPlaying Started from the bottom by Drake.

Monday 25 February 2013

3D Subscription Box Widget For Blogger


I created this subscription widget using CSS Facebook login form, which is available to preview or download here. It look's great and sleek. You can also use this widget on your wordpress blog or on a static HTML page.

It's coded with pure CSS, no images were harmed during creation process. Don't remove credits, and you're free to use or share this widget.

Add This Widget To Blogger:

  • Go To Blogger > Layout > Add A Gadget > HTML/JavaScript
  • Paste following code:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login">
 <h1>Subscribe To Us</h1>
 <input type="hidden" value="YOURFEEDID" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Subscribe" class="login-submit">
 <p class="login-help"><a href="http://www.bwidgets.com?src=fbform" rel="nofollow">Powered By: BWidgets</a></p>
</form>

<style>
::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:-moz-placeholder {
  color: #bcc0c8 !important;
}

::-webkit-input-placeholder {
  color: #bcc0c8;
}

:-ms-input-placeholder {
  color: #bcc0c8 !important;
}

.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}

.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.login {
  padding: 18px 20px;
  width: 200px;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}

.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}

.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>

Customizations:

In above code replace YOURFEEDID with your FeedBurner feed id. Also, you can change width of this widget by changing width: 200px; with your preferred width.

Don't forget to leave your comments.....

Wednesday 19 December 2012

How To Customize Google Drive Form


First of all this article is from Immersion Media. It's a very useful article and don't forget to visit their site. Before trying this you need some basic html and css knowledge so first get some lessons then come here.

If you're wondering how to create forms using Google Drive/Docs then you can learn it by clicking here.

Now let's get to our topic. It's very useful and i hope you'll use it in good way.

After creating your form visit your form and Right click on page and select view source from menu. Copy form code by selecting everything between the <form>…</form>tags. See example below. You can also include the JavaScript at the end. This will be the form field validation.


Paste code in a new page/document.

This step is optional, but since you’ve taken the time to stylizing your form, you might as well create a nice confirmation page. After creating a confirmation page, replace the <form> tag of your form page and replace it with the JavaScript listed below.

Find and Replace this:

<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="POST">

With this:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://CONFIRMATION-PAGE.html';}"></iframe>
<form action="YOUR-GOOGLE-SPREADSHEET-LINK" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Even though the form is no longer hosted on Google, form submissions will continue to be posted to your Google Drive/Docs account.  Hope this will help you.....

Monday 26 November 2012

CSS3 Credit Card Form


Earlier today i found this amazing CSS3 Credit Card Form. This form has been developed purely in CSS3 and does not include any images. In this article i'am sharing one Visa style form with you but there are more credit card forms and they all can be found here.

Let's get started with HTML:

<section class="credit-card visa gr-visa">
<div class="logo">Visa</div>
<form>
<h2>Payment Details</h2>
<ul class="inputs">
<li>
<label>Card Number</label>
<input type="text" name="card_number" pattern="[0-9]{13,16}" value="9842 9472 9457 9472" onclick="value=''" class="full gr-input" required />
</li>
<li class="expire last">
<label>Expiration</label>
<input type="text" name="expire_month" value="December (12)" onclick="value=''" size="10" class="month gr-input" required />
<input type="text" name="expire_year" value="2014" onclick="value=''" size="10" class="year gr-input" required />
<div class="clearfix"></div>
</li>
<li class="cvc-code last">
<label>CVC Code</label>
<input type="text" name="cvc_code" value="174" onclick="value=''" size="10" class="gr-input" required />
</li>
<div class="clearfix"></div>
</ul>
</form>
<div class="watermark">Visa</div>
</section>

After adding our html we'll add CSS coding:

/* === Basic reset === */
* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }
/* === General === */
body {
    font-family:Arial;
    font-size: 14px;
    background:#ddd;
}
.clearfix {
    clear:both;
}
/* === Credit Card === */
.credit-card {
    display:block;
    position:relative;
    width:93.75%;   /* This is 300px on 320px wide screen */
    max-width:500px;    /* Just to make sure that it doesnt get crazy on bg screens */
    min-width:300px;    /* And make sure that it contains at least some size */
    margin:30px auto;
    padding:20px;
    overflow:hidden;
    border-radius:6px;
    z-index:1;
}
.credit-card .inputs {
    list-style:none;
    margin-top:30px;
}
.credit-card .inputs li {
    margin-bottom:30px;
}
.credit-card .inputs li.last {
    margin-bottom:10px;
}
.credit-card .inputs li.expire {
    float:left;
    width:70%;
    margin-right:5%;
}
.credit-card .inputs li.expire input{
    float:left;
    width:35%;
}
.credit-card .inputs li.expire input.month{
    width:60%;
    margin-right:5%;
}
.credit-card .inputs li.cvc-code {
    float:left;
    width:25%;
}
.credit-card .inputs li.cvc-code input {
    width:100%;
}
.credit-card .watermark {
    position:absolute;
    z-index:10;
}
.credit-card form {
    position:relative;
    z-index:50;
}
.credit-card .logo {
    position:absolute;
    top:15px;
    right:20px;
    text-transform:uppercase;
    font-weight:bold;
}
/* === Visa === */
.visa {
    color:#fff;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}
.visa h2 {
    text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}
.visa .logo {
    color:rgba(255,255,255,0.9);
    font-size:2em;
    font-style:italic;
    text-shadow:0px 0px 3px rgba(17,123,173,0.9);
}
.visa .logo:after {
    content:' ';
    position:absolute;
    left:0px;
    top:5px;
    width: 0;
    height: 0;
    border-top: 10px solid orange;
    border-left: 10px solid transparent;
}
.visa .watermark {
    bottom:-100px;
    left:-50px;
    color:rgba(255,255,255,0.06);
    font-size:20em;
    font-weight:bold;
    font-style:italic;
}
/* === Forms === */
label {
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,0.6);
    text-transform:uppercase;
    font-size:1.1em;
    font-weight:bold;
    text-shadow:0px 1px 2px rgba(17,123,173,0.6);
}
input {
    display:block;
    padding:12px 10px;
    color:#999;
    font-size:1.2em;
    font-weight:bold;
    text-shadow:1px  1px 1px #fff;
    border:1px solid rgba(16,103,133,0.6);
    box-shadow:0px 0px 3px rgba(255,255,255,0.5), inset 0px 1px 4px rgba(0,0,0,0.2);
    border-radius:3px;
}
input.full {
    width:100%;
}

/* === Gradients === */
.gr-visa {
    background: #1db1cf; /* Old browsers */
    background: -moz-linear-gradient(top,  #1db1cf 0%, #1078ab 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1db1cf 0%,#1078ab 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #1db1cf 0%,#1078ab 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */
}
.gr-input {
    background: #d3d3d3; /* Old browsers */
    background: -moz-linear-gradient(top,  #d3d3d3 0%, #d9d9d9 38%, #e5e5e5 82%, #e7e7e7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(38%,#d9d9d9), color-stop(82%,#e5e5e5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}

That's It....Don't forget to leave a comment!!!

Monday 12 November 2012

Stylish CSS3 Login Form


Finally we're posting another form on BWidgets and probably it's our first form since i bought a top level domain for my blog. It's CSS3 based and it contain some amazing CSS3 animations and probably IE will hate this form. Tomorrow is Diwali in India so Happy Diwali to all visitors around the world.

Let's start it with basic HTML markup:

<form name="login-form" class="login-form" action="" method="post">
<div class="header">
<h1>Login Form</h1>
<span>Fill out the form below to login to my super awesome imaginary control panel.</span>
</div>
<div class="content">
<input name="username" type="text" class="input username" placeholder="Username" />
<div class="user-icon"></div>
<input name="password" type="password" class="input password" placeholder="Password" />
<div class="pass-icon"></div> </div>
<div class="footer">
<input type="submit" name="submit" value="Login" class="button" />
<input type="submit" name="submit" value="Register" class="register" />
</div>
</form>
<div class="gradient"></div>

Well this was pretty simple and now it's time for final CSS3 touch:


@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
/*******************
SELECTION STYLING
*******************/
::selection {
color: #fff;
background: #f676b2; /* Safari */
}
::-moz-selection {
color: #fff;
background: #f676b2; /* Firefox */
}
/*******************
BODY STYLING
*******************/


/* Download Button (Demo Only) */
.download {
display: block;
position: absolute;
float: right;
right: 25px;
bottom: 25px;
padding: 5px;
font-weight: bold;
font-size: 11px;
text-align: right;
text-decoration: none;
color: rgba(0,0,0,0.5);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:hover {
color: rgba(0,0,0,0.75);
text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
}
.download:focus {
bottom: 24px;
}
/*
.gradient {
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gmAvvc2Uln1HXAHm70fCv9EgwZImEeShx6PUsuu3Ofuayg3RLA55tqTBM1QPQOfZ3Py_DzBVqLGgUZ1LmbP8jRyDBQTgzGPpGGIYuJ-zP5j7773K0s2brdg3wkZF73GsCkT-ony3fmw/s1600/gradient.png) no-repeat;
}
*/
.gradient {
/* Center Positioning */
width: 600px;
height: 600px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
z-index: -2;
/* Fallback */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gmAvvc2Uln1HXAHm70fCv9EgwZImEeShx6PUsuu3Ofuayg3RLA55tqTBM1QPQOfZ3Py_DzBVqLGgUZ1LmbP8jRyDBQTgzGPpGGIYuJ-zP5j7773K0s2brdg3wkZF73GsCkT-ony3fmw/s1600/gradient.png);
background-repeat: no-repeat;
/* CSS3 Gradient */
background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
}
/*******************
LOGIN FORM
*******************/
.login-form {
width: 300px;
margin: 0 auto;
position: relative;
background: #f3f3f3;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/*******************
HEADER
*******************/
.login-form .header {
padding: 40px 30px 30px 30px;
}
.login-form .header h1 {
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 28px;
line-height:34px;
color: #414848;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
margin-bottom: 10px;
}
.login-form .header span {
font-size: 11px;
line-height: 16px;
color: #678889;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
}
/*******************
CONTENT
*******************/
.login-form .content {
padding: 0 30px 25px 30px;
}
/* Input field */
.login-form .content .input {
width: 188px;
padding: 15px 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 14px;
color: #9d9e9e;
text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
background: #fff;
border: 1px solid #fff;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
}
/* Second input field */
.login-form .content .password, .login-form .content .pass-icon {
margin-top: 25px;
}
.login-form .content .input:hover {
background: #dfe9ec;
color: #414848;
}
.login-form .content .input:focus {
background: #dfe9ec;
color: #414848;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.user-icon, .pass-icon {
width: 46px;
height: 47px;
display: block;
position: absolute;
left: 0px;
padding-right: 2px;
z-index: -1;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.user-icon {
top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
background: rgba(65,72,72,0.75) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQzrCjwkUi3UhnSF1KopzvjotalnA-D9hKBUH6QP834pxpzRODegWxLxM-q1yWEe_9VYuwflD23deVSuv0iXq4mDSixlfsctidmCk7fVbd5L1jps_9HRgXWwgndtvDsZ6YJ7XN3Iu_a6o/s1600/user-icon.png) no-repeat center; }
.pass-icon {
top:201px;
background: rgba(65,72,72,0.75) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheANatJhfXqIQ0wZaJJ_Wn7RvJII7OJh0Hz1pgl6oi330FsbVnxZta7V1MT5iw4KRDimKprGv-wejSbGi3o0VRpIfnvcYtQuAUH-KmmBAY9op7Mxt8ZsCqtckKHHFhpGwzmM5gi1w7oTc/s1600/pass-icon.png) no-repeat center;
}
.content input:focus + div{
left: -46px;
}
/* Animation */
.input, .user-icon, .pass-icon, .button, .register {
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
/*******************
FOOTER
*******************/
.login-form .footer {
padding: 25px 30px 40px 30px;
overflow: auto;
background: #d4dedf;
border-top: 1px solid #fff;
box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
}
/* Login button */
.login-form .footer .button {
float:right;
padding: 11px 25px;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #fff;
text-shadow: 0px 1px 0 rgba(0,0,0,0.25);
background: #56c2e1;
border: 1px solid #46b3d3;
border-radius: 5px;
cursor: pointer;
box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
}
.login-form .footer .button:hover {
background: #3f9db8;
border: 1px solid rgba(256,256,256,0.75);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.login-form .footer .button:focus {
position: relative;
bottom: -1px;
background: #56c2e1;
box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
}
/* Register button */
.login-form .footer .register {
display: block;
float: right;
padding: 10px;
margin-right: 20px;
background: none;
border: none;
cursor: pointer;
font-family: 'Bree Serif', serif;
font-weight: 300;
font-size: 18px;
color: #414848;
text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
}
.login-form .footer .register:hover {
color: #3f9db8;
}
.login-form .footer .register:focus {
position: relative;
bottom: -1px;
}

That's It!!!

Friday 31 August 2012

5 Stylish Newsletter Forms


Every blogger wants a good newsletter template for their newsletter just like me and with help of Google Docs even peoples who are using Blogger as their blogging platform can also create their own newsletter.

All newsletter are image-based forms which are created on a image with HTML and CSS and looks really amazing.



<style type="text/css">
#WC-Newsletter1-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FX1HYoeIV1pidduutXnbiT52rvKxvHX8Xlnw3ouNtK7fOFip46YSy4lfxUwijhHeXu5_Z6QIIykOJDrIlz9_f73VMJg5IMlvkm6OZ7Qio_kn-PGlpwaLyPSCTewo8_P9ciCoBUWLIx0/s1600/Newsletter-1.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 264px;
}
form#WC-Newsletter1-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter1-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 21px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 160px;
    outline:0px;
}
form#WC-Newsletter1-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 21px;
    padding-right: 45px;
    position: relative;
    left: 92px;
    top: 28px;
    width: 35px;
}

</style>
<div id="WC-Newsletter1-Box">
    <form id="WC-Newsletter1-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter2-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRkjC2ar-lJbACrGANsZGv9t5R6_WXUIGVfkRpOqNztuuyUUewNkXYakVjOmo2CAmizPh-XkSWTCkqBUe5Oj8f4XkDkqO-_7OlL87YPurlpHZPn3W-couMLSa8U0QZ8ZuIXyo8vi-BAo4/s1600/Newsletter-2.png)no-repeat scroll center center transparent;
    height: 142px;
    width: 300px;
}
form#WC-Newsletter2-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter2-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: -6px;
    padding-left: 2px;
    vertical-align: top;
    width: 270px;
    outline:0px;
    position: relative;
    left: -57px;
}
form#WC-Newsletter2-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 107px;
    top: 13px;
    width: 111px;
}

</style>
<div id="WC-Newsletter2-Box">
    <form id="WC-Newsletter2-Form" action="#" method="post">
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter3-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkxRY38f8yU-4ADMpUP65fSehxktShCVIVNO3uXnLpOhhkmlKYZc2I-eid52w1BazMO3mQ0Eni2tWR2HjEuJQQTQrHLaFo6ygrxHpxMJ97_FV14lW0DwRm8ICQcupZjEOE-cfRkuNaKM/s1600/Newsletter-3.png)no-repeat scroll center center transparent;
    height: 230px;
    width: 355px;
}
form#WC-Newsletter3-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter3-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 118px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: -35px;
}
form#WC-Newsletter3-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 32px;
    position: relative;
    left: 206px;
    top: -31px;
    width: 55px;
    border-radius: 0px 25px 25px 0px;
}

</style>
<div id="WC-Newsletter3-Box">
    <form id="WC-Newsletter3-Form" action="#" method="post" >
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter4-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhScvYBHYBWBx_W6TEF1RSNpO9fKlZyxGCsKd_SPsNYWlmB3-dqrwlSK46-M74NKWhjtoAyKaeMwXujpXHHXK7TUXSEBYFpXIlgLPdQ6Px-zdi8VOQpJjzXQYx5C2-P6PsCWe9v_U3lflw/s1600/Newsletter-4.png)no-repeat scroll center center transparent;
    height: 311px;
    width: 349px;
}
form#WC-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#WC-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 22px;
    vertical-align: top;
    width: 235px;
    outline:0px;
    position: relative;
    left: 43px;
}
form#WC-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 28px;
    position: relative;
    left: 179px;
    top: 41px;
    width: 90px;
}

</style>
<div id="WC-Newsletter4-Box">
    <form id="WC-Newsletter4-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



<style type="text/css">
#WC-Newsletter5-Box {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIv6QlfK6M3sg6ljYqmmSiZ-RFXnHpfTp11fAZWDKcIKXYYUA9HpHDuXtx73UOlIpM-UD8-xKpN6U4J081hXlNBoeyaHINcW45KhnmOPUtMUF8Z15G1dLtRaBagz0dSgGEEiKaq5_EB4/s1600/Newsletter-5.png)no-repeat scroll center center transparent;
    height: 299px;
    width: 408px;
}
form#WC-Newsletter5-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#WC-Newsletter5-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#WC-Newsletter5-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#WC-Newsletter5-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}

</style>
<div id="WC-Newsletter5-Box">
    <form id="WC-Newsletter5-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFD1aSgSrFBkh9dR3o3kaHzw6AlA5dF96bT0RYsUmNJXsfKyfdcIsZhbdEsgVUi2CiaErEILNFuhWpWWxRqQkCBgwu1-cNuJiQBAW7DWew0FlwSTvmjXHjVVC8NRAOw-8G5scNl7JHpew/s1600/blank.gif" id="sbutton"/>
    </form>
</div>



If any got some cool form images like this then please post them in comment below and i might add them in some next posts..... :)

5 Amazing CSS3 Contact Us Forms


Original creator and form source CSS Globe and all credits goes to them i'am just sharing with you guys , visit their website for more awesome stuff including this forms. So these forms looks truly beautiful and professional ( Thanks to CSS Globe ) so here we go with CSS:

CSS :

<style>
/* form 1 */
#form1{
margin:1em 0;
                width:600px;
padding-top:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOllfwxq6ig3TcQS2gXKjvTibJqXtRLKpaaaMCqe1ZKMpfAL_PWDeM_ePDXIsTQZserb3anRnlccK2QKKN0BJsXAZAK9g6B5DwqMjpVW5BVqN88cAP0L-tO7yJH-9tq-tth_8MOGXgVyY/s1600/form_top.gif) no-repeat 0 0;
}
#form1 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:260px;
margin-left:25px;
} #form1 legend{display:none;} #form1 p{margin:.5em 0;} #form1 label{display:block;} #form1 input, #form1 textarea{ width:252px;
border:1px solid #ddd;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6zrvdja_8GXtemDlLwglRa9tp_vDoKX-geIKMs9U5Gci5mbII0cBSzyQczZIM9GtUB1u03jGskg_OFnOfFkivYVFlTkLQQ7NZpDAjtRmBIZKjGrWYp3jVnI9vf2-vq3fig5aClKTgeyo/s1600/form_input.gif) repeat-x;
padding:3px;
                outline:0px;
} #form1 textarea{
height:125px;
overflow:auto;
                outline:0px;
} #form1 p.submit{
clear:both;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEKjhC8zBE8NYD1zdElE8UoaonG74oWl411nUMU69YKWwmgNZewLDFqNZdpvwX_hmFSpzNoj6XnB_lG_vkuyJP_9tPjyXCIRdEz8UrhZSU5d3xl4grSz99ZlYFUzo_IdUpfRp2_dWVq4/s1600/form_bottom.gif) no-repeat 0 100%;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
} #form1 button{
width:150px;
height:37px;
line-height:37px; border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5a0CIdAbAC_cO2JOWHNIdpsVoRit5HVjHwoRjnES-TfDDjcjfHswVPI00wbecLfuIOo1mn6y4YyEBEQUPr5qQVNOd5q92WJKhguajWUPjM9PTpQox_bFZjcJwGEaIPDiaM2Cv6jWcbZY/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
text-align:center;
}
/* // form 1 */

/* form 2 */
#form2{
margin:1em 0;
color:#fff;
width:320px; /* customize width, this form have fluid layout */
}
#form2 h3{
margin:0;
background:#57a700 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzpNY2vmaIIxdh6aZ1E8iDTcXMSfXyZSCawjuFGsA5ETaJncLpJxtxflwodutg8nbxs_HHpJVquBJcZHy26ECokv4kZ9yn-NTbeZ0IxPKQQB7iM5vjYCjClKElrmk-XPvqN94RfBQmOE/s1600/form_heading.gif) repeat-x; color:#fff;
font-size:20px;
border:1px solid #57a700;
border-bottom:none;
} #form2 h3 span{
display:block;
padding:10px 20px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu8-M1zEuu2gQYeUl9a9Vht-olHPhCiVXDyvjjLCstofiWlkxzAErBX9kn59jVAaq1_5Y9UfL61QThm1lXzpo5kCcB1uR4nQxAXFSMtIoukzNiT0WxxPIYzJHVD8JUBHci72SIbZ8LSK0/s1600/form_ico.gif) no-repeat 93% 50%; } #form2 fieldset{
margin:0;
padding:0;
border:none; border-top:3px solid #000;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaErEKNi_PNoYdhY_xbWehFB-AJMARvYmqOIuTUluGgS-kZmFNQTIk0UoSogWXc5kda0MXd8SZCQQfH5UhEW0yeJV86xey2KJo28P256ViofmCbb3Igf9gL1BTGeWrv_ztTHW5UXzo4Xo/s1600/form_top.gif) repeat-x; padding-bottom:1em;
} #form2 legend{display:none;} #form2 p{margin:.5em 20px;} #form2 label{display:block;} #form2 input, #form2 textarea{ width:272px;
border:1px solid #111;
background:#282828 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcM2K-bpd4f3ki2wP7VecItJP2KEiI9tK2iz5tA1JhfNdm6S9VmpVEZeMw7RjxoFT1ItrYRx_PmCAFVeynbdMRCUEapXW2C1dX0nvutm_zfo3TmbzyqfzBtl684ITuzTIdo0BNsMMkW6Q/s1600/form_input.gif) repeat-x;
padding:5px 3px;
                outline:0px;
color:#fff;
} #form2 textarea{
height:125px;
overflow:auto;
                outline:0px;
} #form2 p.submit{
text-align:right;
} #form2 button{
padding:0 20px;
height:32px;
line-height:32px; border:1px solid #70ad2e;
background:#5aae00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1JNP-htPYnQ5SkdNuwF8nlWoppFML-zCtAZRki6bbBHq2BQbwWXcHr7-uYZNRXknJU64_YTQjC2pgNQnMecJngDDTewBatQaFK0jp1BYEqJg6Hchx3-msHsRPh9TlxYfJuOSq8Hhn5Z4/s1600/form_button.gif) repeat-x;
color:#fff;
cursor:pointer; text-align:center; }
/* // form 2 */
/* form 3 */
#form3{
margin:1em 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhQ03lRzqemybmKRYmWzwz1l_Zm2Te7bGmtvLC_P95V_AUsss4vNdt0EcCQ1vNkDRqkoKpzcnQi8nRadUYKMWWkZcpp2u9F3J8gwwPMNswGgJ6_0AWuKIcBO5-1IhAH5aDQGKcBKk2tI/s1600/form_bg.jpg) no-repeat 0 0;
width:542px;
height:364px; /* fixed size (envelope graphic) */
overflow:hidden;
}
#form3 h3{display:none;} #form3 fieldset{
margin:0;
padding:0;
border:none; float:left;
display:inline;
width:200px;
margin-left:34px;
padding-top:80px;
} #form3 fieldset.last{
width:254px;
margin-left:17px;
} #form3 legend{display:none;} #form3 p{margin:.5em 0;} #form3 label{display:block;} #form3 input, #form3 textarea{ width:192px;
border:1px solid #ddd;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlQvpenXQKgmdoXkerk2Tpc6E6ZUN7Pc-xlaLiFFk8Nop4fGJYeNo-nAXo8PVoCYHE0eRHhX30l6aaysr71V7ac6aqRNTZH-4eWKSpUb45AvvjssnfbVoUTq9X_Mv6IB5RY-fJf6iN25A/s1600/form_input.gif) repeat-x;
padding:3px;
                outline:0px;
} #form3 textarea{
width:246px;
height:200px;
overflow:auto;
                outline:0px;
} #form3 p.submit{
margin:0 34px;
clear:both;
position:relative;
} #form3 button{
padding:0;
position:absolute;
left:0;
top:-3.5em;
width:95px;
height:36px;
text-indent:-8000px;
overflow:hidden;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtfiDQ5jwv9OPkcT2UqunOvMKJ4i__hoJY8N4Uy4w6lt879K9OpE8TZSZ7BdTiJSvGH5eS7Gf_hkCc4HqxTunbDbS5Q_clrQRTQgq6q8yY-jinlb1lsulguL7hLONuRoWURTH7h_lfYHw/s1600/form_button.gif) no-repeat 0 0;
color:#fff;
cursor:pointer;
}
/* // form 3 */
/* form 4 */
#form4{
margin:1em 0;
padding-top:1.5em;
color:#246878;
width:350px; /* customize width, this form have fluid layout */
background:#fbfaf4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil5nqBdSbQ8ojZ7fkq9d4GJSY4B6pKzlFhNciuK5O3_R3P6GhY4JM87GVk5fG0c4mQ72mCGWTfuKz1qsw5v_vTCuDy7mN_iq7zt_3TqP18hp_f3_r1vKx2ia4VZNqRmPWQqlWHnkhfoME/s1600/form_bg.gif) repeat-y; }
#form4 h3{
margin:0 20px;
height:28px;
text-indent:-8000px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH19jQd8KKxic7DHG0URfp564ATgOvnQYc7bBXvPSnW_pfX8N4_mR8o9nts8MTfLaFG-VixUycI27Qd1Q88Sdr-0nyK6DlGAyEHDLC61CLkkXVGVGK9WGSXDQktsC1WxEsBj28dEjDw7c/s1600/form_heading.gif) no-repeat 0 0; } #form4 fieldset{
margin:0;
padding:0;
border:none; padding-bottom:1em;
} #form4 legend{display:none;} #form4 p{margin:.5em 20px;} #form4 label{display:block;} #form4 input, #form4 textarea{ width:302px;
border:1px solid #dfdfdf;
background:#fff;
                outline:0px;
padding:5px 3px;
} #form4 textarea{
height:125px;
                outline:0px;
overflow:auto;
} #form4 p.submit{
text-align:right;
} #form4 button{
margin:0;
padding:0;
text-indent:-8000px;
overflow:hidden;
width:88px;
height:56px;
border:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfs0_k01WXDn-8VZumpq0d_JpQlvtigXIG2vWdYEoEWDwpZWXwQ4mm7DxlA9GCRRB5OdvOiZuBXt_hgHlfKbU7mF_Sv5bh67ielzSn4yhDGvBSn8zWn81X_9pva1kwUfHcmW7ImEaoUuU/s1600/form_button.gif) no-repeat 0 0;
cursor:pointer;
text-align:left;
}
/* // form 4 */

/* form 5 */
#form5{
margin:1em 0;
padding-top:10px;
}
#form5 fieldset{
margin:0;
padding-top:.5em;
border:none; border-top:1px solid #f1f1f1;
} #form5 legend{
background:#fff;
padding:0 5px;
font-style:italic;
} #form5 p{
clear:both;
margin:.5em 0;
overflow:hidden;
} #form5 label{
float:left;
width:60px;
display:block;
text-align:right;
margin-right:10px;
} #form5 input, #form5 textarea{ margin:0; width:250px;
                outline:0px;
border:1px solid #ddd; padding:3px 5px 3px 25px;
} #form5 input#name{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HpAaUCELV4K1-7UCQ99iut8yGa4FWQqg0o0rvFy1V8oigUlb1M1hmQfHy6NucIioVp1bKrkkeCASvBPso0OaFtCZwb3ZYpQmDb2n7496SULzX1SRMyC-WNQOMoMhplo882X6MnPdtAI/s1600/form_name.gif) no-repeat 5px 50%;}
#form5 input#email{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8stcNavSUoBqa4LbJ4IehqTQeMHV0OCGKDdwydT6mcXss8MDOtFHJP_tLmYS23kM7NxA7Ujx2BOY6PRSRi9YkKqxWij13sDB_bWL9H-niqt0ya00VYsq_tqSq4ov6qVdq2HTbhxTM3F0/s1600/form_email.gif) no-repeat 5px 50%;}
#form5 input#web{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrP6eK4x-QY8mdWY3biQy0f_JClAlibialbQqbe5S66iSTWaD32RpoW1yKS7xdOj7ufXt_MoNMnhXI8VG9PlZwyc5nvDWWh0wArrmHWyhU1-_ow2E5HUu8OrbkKjyBclqId2PN_s6hc2U/s1600/form_url.gif) no-repeat 5px 50%;}
#form5 textarea#message{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVDUB3LPRdSw2-jYwvT1cBiIEjmYq9N71BQFMMk2lj0UoPUHOR_6ZLqWgUBcNVWtSTUK7EDd3iOgI-3nj8ylkt9hRgRw3uE_RSa11F5SJRba-k0jkkFBgwcEZTE1SHIcBcdbw6D-SK_A/s1600/form_note.gif) no-repeat 5px 6px;}
#form5 textarea{
height:125px;
                outline:0px;
overflow:auto;
} #form5 p.submit{
clear:both;
margin:1em 0;
padding:.5em 70px;
border-top:1px solid #f1f1f1; } #form5 button{
height:28px;
line-height:28px; border-top:1px solid #999;
border-left:1px solid #999;
border-right:1px solid #333;
border-bottom:1px solid #333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj37LqPnKywvbjfLcWn_EQzo_b9BLhDta3verZoMhhYLQx7D-wNcHflWTuP8r-vddbobUg3nQjt1d4hOZeyzXhR1qEXzIFBHRN-gUuts2CsuJaSzmDcOSFr5La3l2j1noyYC8BAIHauOQk/s1600/form_button.gif) no-repeat;
padding:0 10px 0 25px;
color:#333;
cursor:pointer;
text-align:left;
font-size:11px;
font-weight:bold;
}
/* // form 5 */
</style>

 Just post above CSS in your blog's CSS or on your HTML document now below is HTML markup :

<form id="form1/2/3/4/5" action="/" method="post">
<fieldset><legend>Contact form</legend>
<p class="first">
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
<p class="submit"><button type="submit">Send</button></p>
</fieldset>
</form>

Post above HTML in your document and with if form1 /form2 /form3 /form4 or form5 because every id has different form style.

Popular Posts

 
Powered by Blogger.