CSS3 Contact Form Tutorial With a Transition Effect.

Yep, more CSS3 transition effects! In this tutorial I will be using the transition effect to create a simple expanding css3 contact form. Again this tutorial is just for fun and is not supported in Internet Explorer.

Because of the feedback I received from my hover transition tutorial I figured that you guys were all big transition fans too so I decided to make an expanding contact form.

What We Are Developing..

Please take a look at the live demo of the CSS3 expanding contact form, which is using the transition property.

What did you think? Please let me know. It’s a cool effect, I’m not sure if you could find a use for it, but you might be able to. I just wanted to share it with you all.

Lets begin putting it together.

CSS3 Contact Form Tutorial With a Transition Effect

Contact Form Markup

I am not going to show you how to create a functioning contact form, you can learn how to do this from my article how to develop a simple contact form. I am going to provide the markup for the contact form and assign classes so we can create the transition effect. Here is the basic HTML to create the contact form fields.

Copy this HTML to your document.

<div class="inner-contact">

<h4>Send Us a Message..</h4> 
 
<form action="#" method="post">

<label for="name">Name:</label><br>
<input type="text" name="name" class="name" /> <br>

<label for="name">Email:</label><br>
<input type="text" name="email" size="39" class="email" /> <br>

<label for="name">Message:</label><br>
<textarea name="message" rows="6" cols="30" class="message"> </textarea> <br> <br>

<input type="submit" name="submit" value="Submit" />
</form>
</div>

Now I always try my best to explain each element, so here goes.

The inner contact is a container for the contact form which is where I apply the border and padding in the css.

Form action tells the form what to look for when the form button is pressed, right now there is no php document setup so it’s not needed for the markup, but will be needed to create a functioning form.

The middle area of the markup are your input areas, sizes and classes. Followed by the submit button and the closing form and div tags.

The CSS Markup

The CSS markup for this is in fact very simple. The transition expanding effect only requires a couple of css properties. Here is the CSS code I have used for the transition contact form. I have put comments on the properties which I have used for cross browser compatibility.


input,textarea { 
padding: 12px; 
}

label { 

} 

.inner-contact { 
width: 300px;
padding: 20px;
border: 8px solid #ffffff; 
} 

.name { 
width: 200px;
margin-bottom: 20px;
transition: 0.5s;
-moz-transition: 0.5s; /* Old Firefox */
-webkit-transition: 0.5s; /* Safari & Chrome */ 
-o-transition: 0.5s; /* Opera */ 

  } 

.name:focus { width: 275px; } 


.email { 
width: 200px; 
margin-bottom: 20px; 
transition: 0.5s;
-moz-transition: 0.5s; /* Old Firefox */
-webkit-transition: 0.5s; /* Safari & Chrome */ 
-o-transition: 0.5s; /* Opera */
}
.email:focus { width: 275px;} 

.message { 
width: 200px; 
margin-bottom: 20px;
transition: 0.5s;
-moz-transition: 0.5s; /* Old Firefox */
-webkit-transition: 0.5s; /* Safari & Chrome */
-o-transition: 0.5s; /* Opera */
 }
.message:focus { width: 275px; } 

Here is my explanation starting from the top.

input,textarea is where I have used the padding to create larger input boxes.

label my label section is empty because I didn’t need to make any changes to the text labels. I added it in the tutorial in case you would like to make position changes to the labels or apply some of your own effects.

.inner-contact is where I have applied the width, padding and the white border.

.name .email and .message These are all the same, as each input field has the same effect. I applied a starting width here and this is where you add the transition effect of your choice, you could make it faster or slower by determining the speed of your transition.

.name:focus This is where you would set your changing width. The width that the input area is going to change too. You would do this to all the CSS classes for the input fields that require an expanding effect.

And that’s everything.. Pretty simple tutorial right? I think that this kind of contact form would be perfect to use on your website/blog sidebar.

I hope you enjoyed this tutorial, please share and thanks for reading!

Author: Jake

Share This Post On