Create Model Form With HTML And CSS

Contact With Us

Ipsum passages, and more recently with desktop publishing software like Aldus Page Maker

Sent your request

Reach Us

Email: someone@gmail.com

Phone: +0123456789

Address: 12/A Dhanmondi Road Seroil Dhaka.



Its features:

  • It is completely responsive.

  • Arrange your words in the headline as you like.

  • You can add more list items if you wish.

  • You can use colors and writing styles as you wish.

Try to create like yourself by following the codes below :

Step 1) Add to html : <h2>Create Model Form With HTML And CSS</h2> <div class="container"> <h1>Contact With Us</h1> <p> Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker </p> <div class="contact-box"> <div class="contact-left"> <h3>Sent your request</h3> <form> <div class="input-row"> <div class="input-group"> <label>Name</label> <input type="text" placeholder="Full Name"> </div> <div class="input-group"> <label>Phone</label> <input type="text" placeholder="+1 234 567 8901"> </div> </div> <div class="input-row"> <div class="input-group"> <label>Email</label> <input type="text" placeholder="someone@gmail.com"> </div> <div class="input-group"> <label>Subject</label> <input type="text" placeholder="Short Title"> </div> </div> <label>Subject</label> <textarea rows="5"placeholder="Your Message"></textarea> <button type="submit">Send</button> </form> </div> <div class="contact-right"> <h3>Reach Us</h3> <p01>Email: someone@gmail.com</p01><br><br> <p01>Phone: +0123456789</p01><br><br> <p01>Address: 12/A Dhanmondi Road Seroil Dhaka.</p01> </div> </div> </div>
Step 2) Add to css : .container{ max-width:900px; height:auto; margin:10px; background:#f8be00; font-size:14px; font-family:arial, sens-serif; border-bottom:15px solid #f8be00; border-top:10px solid #f8be00; border-right:10px solid #f8be00; border-left:10px solid #f8be00; display:center; } .contact-box{ background:#fff; display:flex; border:5px solid #bbb; border-radius:10px; } .contact-left{ flex-basis:60%; padding:40px 60px; } .contact-right{ flex-basis:40%; padding:40px; background:#f85532; color:#fff; border-right:1px solid #bbb; } h1{ margin-bottom:10px; } .container p{ margin-bottom:40px; } .input-row{ display:flex; justify-content:space-between; margin-bottom:20px; } .input-row .input-group{ flex-basis:45%; } input{ width:100%; border:none; border-bottom:1px solid #ccc; outline:none; padding-bottom:5px; } textarea{ width:100%; border:1px solid #ccc; outline:none; padding:10px; box-sizing:border-box; } label{ margin-bottom:6px; display:block; color:#1c00b5; } button{ background-image: linear-gradient(#bbb, #eee, #bbb); width:100px; border:none; outline:none; color:#green; height:35px; font-size:18px; border:2px solid green; border-radius:30px; margin-top:20px; box-shadow:0px 5px 15px 0px rgba(28,0,181,0.3); } button:hover{ color:red; } .contact-left h3{ color:#1c00b5; font-weight:600; margin-bottom:30px; } .contact-right h3{ font-weight:600; margin-bottom:30px; }

Thank you sir

Congratulations to you on visiting our page.

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