CSS Contact form Dotted
A simple, cross browser compatible CSS contact form Dotted using images, no javascript.
Form features:
- no javascript required;
- easy to customize;
- easy to implement;
- cross-browser compliant;
Demo:
Contact Form
How to use:
- Open text editor like Notepad or any other.
- Copy HTML code and paste into the text editor.
- Save file as anyname.html or anyname.htm
- Create new document.
- Copy and paste CSS code into text editor.
- Save file as contact.css
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="contact.css" /> <title>CSS Contact form Dotted</title> </head> <body> <div class="contact"> <p>Contact Form</p> <form> <div class="c_name"><input type="text" placeholder="(enter your name)" id="Name"></div> <div class="c_email"><input type="text" placeholder="(email address)" id="Email"></div> <div class="c_phone"><input type="text" placeholder="(your phone number)" id="Phone"></div> <div class="c_text"><textarea name="message" rows="5" placeholder="(Your message here...)" id="Message"></textarea></div> <input type="submit" value="Submit"> </form> </div> </body> </html>CSS code:
/* CSSTerm.com CSS Contact form Dotted */ .contact { height:370px; width:370px; margin:auto; border:4px #5B7F34 dotted; padding:10px; font-family: Impact, Charcoal, sans-serif; font-size:25px; text-align:center; border-radius: 15px; } .c_name, .c_email, .c_phone, .c_text { width:39px; height:39px; margin:5px } .c_name { background:url('img/icon_name.jpg') no-repeat; } .c_email { background:url('img/icon_email.jpg') no-repeat; } .c_phone { background:url('img/icon_phone.jpg') no-repeat; } .c_text { background:url('img/icon_text.jpg') no-repeat; } .contact input, .contact textarea { padding:10px; background-color: #fff; text-align:center; border:2px #fff solid; margin-left:39px; width:300px; border-radius: 5px; border:2px #5B7F34 dotted; } .contact textarea { text-align:center; overflow:hidden; } .contact input[type="submit"] { background-color : #353841; color : #fff; border : 1px solid #76A544; float:right; margin-top:70px; margin-right:25px; width:70px; }
Previous page: CSS Contact form Letter
Next page: CSS reset