Quick Website Maker

Navigation Bar

Buttons

Form

Display Card

Slide Show

Search Box

Footer Design

Create Contact Us Form Using HTML And CSS

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; } }

Navigation Bar

Buttons

Form

Display Card

Slide Show

Search Box

Footer Design

⇚ Go to the previous page

Go to the next page ⇛

Create Contact Us Form Using HTML And CSS

Contact Us

Its features:

Try to create like yourself by following the codes below :

⇚ Go to the previous page

Go to the next page ⇛

Our Health Tips

Our Social Media

Required Links

Thank you sir