Create Contact Us Form Using HTML And CSS

Contact Us

Full Name
Email Address
Type Your Message Here....

Its features:

  • When it is compressed, the original form remains responsive.

  • You can use the image you want instead of the image on the right.

  • You can attach more information lines as needed.

  • You can change the model color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to head : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2) Add to html : <h2>Create Contact Us Form With HTML And CSS</h2> <div class="fifteen"> <div class="container"> <div class="formBx"> <form> <h2>Contact Us</h2> <span>Full Name </span> <div class="inputBox"> <input type="text"name=""required="required"> </div> <span>Email Address</span> <div class="inputBox"> <input type="email"name=""required="required"> </div> <span>Type Your Message Here....</span> <div class="inputBox"> <textarea required="required"></textarea> </div> <div class="inputBox"> <input type="submit" value="send"name=""> </div> </form> </div> <div class="imgBx"> <img src="nari.png" alt="" /> </div> </div> </div>
Step 2) Add to css : .fifteen{ font-family:sans-serif; display:flex; justify-content:center; align-items:center; } .container{ position:relative; width:100%; max-width:800px; height:437px; display:flex; justify-content:space-between; align-items:center; border:5px solid #aaa; border-radius:10px; } .container .formBx{ width:50%; display:flex; justify-content:center; align-items:center; } .container .formBx form{ position:relative; width:100%; padding:0 0 0 70px; } .container .formBx form h2{ color:black; font-weight:500; font-size:1.8em; text-transform:uppercase; letter-spacing:2px; margin-bottom:30px; } .container .formBx form .inputBox{ position:relative; margin-bottom:25px; } .container .formBx form .inputBox input, .container .formBx form .inputBox textarea{ position:relative; background;transparent; outline:none; border:none; width:100%; padding-bottom:10px; font-size:15px; letter-spacing:1px; font-weight:300; border-bottom:2px solid green; resize:none; } .container .formBx form .inputBox textarea{ height:90px; } .container .formBx form .inputBox input[type="submit"]{ padding:8px 20px; margin-top:-10px; width:100px; cursor:pointer; background-image: linear-gradient(#bbb, #ddd, #bbb); color:red; font-size:18px; font-weight:400; border-radius:30px; text-transform:uppercase; letter-spacing:4px; } .container .formBx form .inputBox input[type="submit"]:hover{ color:black; } .container .formBx form .inputBox input:focus, .container .formBx form .inputBox input textarea:focus, .container .formBx form .inputBox input:valid, .container .formBx form .inputBox input textarea:valid{ border-bottom-color:red; } .container .imgBx{ position:relative; width:50%; height:100%; overflow:hidden; } .container .imgBx:before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; transform-origin:bottom; transform:skewX(-25deg) translateX(10%); } .container .imgBx img{ position:absolute; bottom:0; max-height:100%; } @media (max-width:991px) { .container .formBx { width:100%; padding:0 50px; } .container .formBx form { position:relative; width:100%; max-width:500px; padding:0; } .container .imgBx { display:none; } }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.