An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
October 13, 2021 02:32 pm GMT
SOURCE CODE:
HTML CODE:
Original Link: https://dev.to/technicalvandar885/responsive-contact-form-using-pure-html-and-css-5fch
Responsive Contact Form Using Pure HTML and CSS.
Here Is The Full Source Code Of This Form:
SOURCE CODE:
HTML CODE:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="style.css"> <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 Form</title></head><body> <div class="container"> <form action="" autocomplete="off"> <h1>Contact US</h1> <div class="name"> <label for="name">Name: <span>*</span></label><br> <input type="text" name="name" id="name" placeholder="Name" required> </div> <div class="email"> <label for="email">E-mail: <span>*</span></label><br> <input type="email" name="email" id="email" placeholder="E-mail" required> </div> <div class="website"> <label for="website">Phone: <span>*</span></label><br> <input type="number" name="number" id="number" placeholder="Contact No." required> </div> <div class="message"> <label for="message">Message</label><br> <textarea name="message" id="message" cols="35" rows="5" placeholder="Describe Your Message Here...."></textarea> </div> <div class="button"> <button>Send Message</button> </div> <div class="required"> <h5>NOTE: All * are Required</h5> </div> </form> </div></body></html>
CSS CODE:
*{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; font-family: sans-serif; user-select: none;}body{ height: 100vh; width: 100%; display: grid; place-items: center; background-color: #333645;}.container{ height: 75vh; width: 25vw; background-color: rgb(82, 209, 226); justify-content: center; align-items: center; display: flex; box-shadow: 0 5px 20px #7f868f; border-radius: 8px;}form{ height: 75vh; width: 30vw; display: grid; place-content: center; place-items: center;}form h1{ margin-top: -15px; text-align: center;}input{ outline: none; border: none; margin: 10px 0; height: 30px; font-size: 18px; padding: 15px; width: 22.5vw; box-shadow: 0 2px 5px #b6bebb;}form{}label{ font-size: 20px;}textarea{ padding: 15px; border: none; outline: none; font-size: 18px; width: 22.5vw; box-shadow: 0 2px 5px #abbdb5;}.button{ text-align: center;}button{ font-size: 22px; font-weight: 650; cursor: pointer; border: none; outline: none; margin-top: 20px; box-shadow: 0 2px 4px #718494; padding: 10px; color: white; background: #000;}span{ color: red;}h5{ margin-top: 20px; color: #d900ff;}
Find Me On:
Original Link: https://dev.to/technicalvandar885/responsive-contact-form-using-pure-html-and-css-5fch
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To