DEV Community

Cover image for Responsive Contact Form Using Pure HTML and CSS.
Technical Vandar
Technical Vandar

Posted on

Responsive Contact Form Using Pure HTML and CSS.

#webdev #beginners #html #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>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

Find Me On:

Facebook
Youtube
Github

Top comments (1)

Collapse
 
tedk13 profile image
Ted •

Nice work! If you want to refine this a bit you could remove the divs and wrap your inputs in the label.

<div class="email"> <label for="email">E-mail: <span>*</span></label><br> <input type="email" name="email" id="email" placeholder="E-mail" required> </div>
Enter fullscreen mode Exit fullscreen mode

Becomes:

<label class="email"> E-mail: <span>*</span> <input type="email" name="email" id="email" placeholder="E-mail" required> </label>
Enter fullscreen mode Exit fullscreen mode

Notice if you wrap you input in a label you don't need the for="". What you did is correct just thought I'd share a little knowledge.