Contact Us Page Sample - HTML & CSS
This is a sample of the contact us page created by using HTML5 and CSS.
To see the demo of this contact us page click here:
Complete HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contact Us</title> <link rel="stylesheet" href="contactUs.css"> </head> <body> <div class="container"> <form action="noaction.php"> <h2>Contact Us</h1> <p> <input type="text" name="myName" id="name" required placeholder="Full Name"> </p> <p> <input type="text" name="myEmail" id="email" required placeholder="Email"> </p> <p> <textarea name="yourMessage" id="message" cols="30" rows="10" placeholder="Your Message" required></textarea> </p> <p> <input type="checkbox" name="myCheckbox" id="checkbox"> Send copy to my email </p> <p> <input type="submit" value="Send Email"> </p> </form> </div> </body> </html>
Complete CSS code:
*{ box-sizing: border-box; } body{ font-family: Verdana, Geneva, Tahoma, sans-serif; margin: 10px 10px; font-size: 17px; padding: 10px; background-color: rgb(190, 187, 187); } .container{ background-color: whitesmoke; padding: 20px; border: 2px solid rgb(242, 242, 245); border-radius: 10px; } input[type="text"], input[type="email"], textarea { width: 100%; padding: 10px; margin: 10px; margin: 7px; border: 1px solid rgb(221, 208, 208); border-radius: 5px; } input[type="submit"]{ background-color: rgb(28, 117, 28); margin: 5px; font-family: Verdana, Geneva, Tahoma, sans-serif; padding: 10px 20px; color: white; font-size: 18px; border: none; border-radius: 5px; } input[type="submit"]:hover{ background-color: rgb(9, 156, 9); cursor: pointer; }