Contact form is an easy way to set your website apart from others. Some people is not techie so creating contact form will help them to easily reach you ;)
Most contact forms don’t require a lot of fields for entering information. As long as you have the basic ones for the visitors’ name and email address, then you should be fine.
Take note: This is CSS3 coded. So, this will works only on CSS3 browsers capability, such as Firefox, Chrome, Safari, and other modern browsers.
Insert the code below inside your <body> ... </body>
<!-- Contact Form -->
<div class="contact-form re">
<!-- Contact Form -->
<div class="contact-form re">
<h1>Get in touch with us...</h1>
<label>Name</label>
</div><label>Name</label>
<input type="text" alt="name" />
<label>Email</label>
<input type="text" alt="email" />
<label>Subject</label>
<input type="text" alt="fullname" />
<label>Your Message</label>
<textarea rows="1" cols="1"></textarea>
<label></label>
<input class="send" type="button" value="Send"a alt="send" />
<!-- Contact Form -->
Create contact.css, then here's the CSS code:
/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/
/**********************
COMMON STYLE
**********************/
body {
/**********************
CONTACT FORM
**********************/
.contact-form {
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/
/**********************
COMMON STYLE
**********************/
body {
background:#fff7e8;
font-family:Arial, Helvetica, sans-serif;
}
.re {position:relative;}font-family:Arial, Helvetica, sans-serif;
}
/**********************
CONTACT FORM
**********************/
.contact-form {
background:#fffff8;
color:#000;
width:250px;
padding:20px;
margin:50px auto;
/* Rounded Corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Add Shadow */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 10px #ccc;
box-shadow:0px 0 10px #ccc;
} .contact-form h1 {
color:#000;
width:250px;
padding:20px;
margin:50px auto;
/* Rounded Corners */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Add Shadow */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 10px #ccc;
box-shadow:0px 0 10px #ccc;
} .contact-form h1 {
margin:0;
padding:0 0 15px;
font-size:18px;
font-weight:bold;
}
.contact-form label {padding:0 0 15px;
font-size:18px;
font-weight:bold;
}
display:block;
width:150px;
font-size:14px;
font-weight:bold;
padding:0 0 2px 2px;
}
.contact-form input {width:150px;
font-size:14px;
font-weight:bold;
padding:0 0 2px 2px;
}
width:235px;
font-size:14px;
margin:0 0 10px;
padding:5px;
border:2px solid #ffd506;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Submit Button Style */
.contact-form input.send {
.contact-form textarea {font-size:14px;
margin:0 0 10px;
padding:5px;
border:2px solid #ffd506;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* Submit Button Style */
.contact-form input.send {
background:#FFF;
padding:7px 0;
text-align:center;
width:250px;
font-size:14px;
margin:0 0 2px;
border:1px solid #FC0;
cursor:pointer;
font-weight:bold;
/* Add Shadow */
-webkit-box-shadow:0px 0 5px #ccc;
-moz-box-shadow:0px 0 5px #ccc;
box-shadow:0px 0 5px #ccc;
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#f69d01));
background: -moz-linear-gradient(0% 40% 90deg,#f69d01, #EEE);
}
padding:7px 0;
text-align:center;
width:250px;
font-size:14px;
margin:0 0 2px;
border:1px solid #FC0;
cursor:pointer;
font-weight:bold;
/* Add Shadow */
-webkit-box-shadow:0px 0 5px #ccc;
-moz-box-shadow:0px 0 5px #ccc;
box-shadow:0px 0 5px #ccc;
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#f69d01));
background: -moz-linear-gradient(0% 40% 90deg,#f69d01, #EEE);
font-family:Arial, Helvetica, sans-serif;
height:100px;
font-size:14px;
width:235px;
font-size:14px;
margin:0 0 0;
padding:5px;
border:2px solid #FC0;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
height:100px;
font-size:14px;
width:235px;
font-size:14px;
margin:0 0 0;
padding:5px;
border:2px solid #FC0;
/* Add Gradient */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
/* Rounded Corners */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
On the <head> tag insert the code below: (make sure path is correct "css/") i put my contact.css on css folder.
<link rel="stylesheet" type="text/css" href="css/contact.css" />
That's all! Enjoy! God bless always!
CSS3 Rounded Corners
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
CSS3 Gradient Background
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF));
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE);
CSS3 Drop Shadow
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc;
box-shadow:0px 0 50px #ccc;
wow :) this blog looks interesting for web developer
ReplyDeleteLegal Software Singapore