Simple Contact Us Form

Simple Responsive Contact Us Form

Hello, readers. Today in this blog you will learn about the simple responsive contact form.

The contact form is a important part in website because it can help you uSER to get in touch with you by the form.

Let's begin the tutorial. First, we need to creates a empty html file and css file.

Now i will show you the HTML code

<div class="wrapper"> <div class="left top"> <img src="1.png" alt="" /> </div> <div class="right bottom"> <div class="input-group"> <input type="text" placeholder="First Name"> <input type="text" placeholder="Last Name"> <input type="text" placeholder="Your Email"> <textarea> placeholder="Your Questions Here..."></textarea> <br> <button > type="submit">SUBMIT < /button > </div> </div> </div>

Now we are going to CSS file and paste the code below.

*{ box-sizing: border-box; margin: 0; padding: 0; } div.wrapper{ margin-top: 15px; width: 100%; height: 600px; display: flex; justify-content: center; align-items: center; flex-direction: row; } .left{ flex: 1; width: 100%; height: 100%; background: #EEF5F9; display: flex; justify-content: center; align-items: center; } .right{ flex: 1; height: 100%; background: #EEF5F9; display: flex; justify-content: center; align-items: center; text-align: center; } .left img{ width: 100%; } .title{ text-align: center; margin-top: 20px; } .input-group input{ height: 35px; margin: 15px; padding-left: 15px; width: 85%; border-radius: 15px; border: 2px solid #D7D7D7; outline: none; } textarea{ width: 85%; height: 120px; padding: 15px; margin: 15px; width: 85%; border-radius: 15px; border: 2px solid #D7D7D7; outline: none; } button{ margin-top: 25px; height: 35px; background: linear-gradient(90deg,#8C79DD,#7B90E0,#54AEE2); color: #FFF; border: none; width: 85%; border-radius: 15px; outline: none; } input:focus,textarea:focus{ border: 2px solid #452FFF; } @media only screen and (max-width: 768px){ div.wrapper{ flex-direction: column; } }

That is all the tutorial today, if you are facing any problem, contact me using the comment below or go to contact us

That is all the tutorial today, if you are facing any problem, contact me using the comment below or go to contact us