Sample of Contact Us Page Using HTML and CSS
This is a sample of the contact us page created by using HTML and CSS. Click here to see the live preview.
Complete HTML and CSS 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 3</title> <style> *{ box-sizing: border-box; } body{ border: 1px solid rgb(80, 80, 80); margin: 20px; padding: 20px; border-radius: 5px; font-family: Verdana, Geneva, Tahoma, sans-serif } input[type="text"], input[type="email"], textarea{ width: 100%; border: 0.5px solid rgb(80, 80, 80); border-radius: 4px; margin: 5px; padding: 10px; } h2{ font-weight: 400; padding-bottom: 20px; } input[type="submit"]{ width: 100%; background-color: rgb(47, 47, 241); border: none; border-radius: 4px; margin: 5px; padding: 12px; color: white; font-size: 20px; } </style> </head> <body> <form action="noaction.php"> <h2>Contact us</h2> <div> <label for="name">Your Name: </label> <p> <input type="text" name="myName" id="name" required placeholder="Afzal Imam" > </p> </div> <div> <label for="email">Your email address: </label> <p> <input type="email" name="myEmail" id="email" required placeholder="example@gmail.com"> </p> </div> <div> <label for="textarea">Your message: </label> <p> <textarea name="textarea" id="textarea" cols="30" rows="10" required placeholder="Write your message"></textarea> </p> </div> <div> <input type="submit" value="Send Message"> </div> </form> </body> </html>