The contact us form is very helpful for the users of the website. In the last post, we created an about us page using Html and CSS languages. Let’s build it.
Contact us form in Html:
In the thumbnail of this post, you have seen the picture of the form that we are going to build. This form is very helpful for the visitors to contact customer support so that your problem can be solved by customer support. It can be used for many purposes. The purpose of the contact us form is to change from website to website and application to application. And this contacts us page is created for any website user.
This page has an image as a background image. You can also use solid and gradient colors as a background instead of an image if you are not comfortable with the image.
It has solid borders. Then it has various fields. Name is used for the name of the user. Email and phone numbers are also required. After filling the fields of the form you can press the send button for sending your message to the customer support of the website or application.
We can create this type of form in Html and CSS.
You might like it:
How to create a contact us form?
We can create a contact me page in Html, CSS, and javascript. For that we need something. Follow the below steps for its development.
Code of Html for contact us form:
After creating the file Html copy this Html code and paste it into your file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Responsive Contact us form - Fantacy Design</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wrapper"> <div class="title"> <h1>Contact Us 😊</h1> </div> <div class="contact-form"> <div class="input-fields"> <input type="text" class="input" placeholder="Name"> <input type="text" class="input" placeholder="Email Address"> <input type="text" class="input" placeholder="Phone"> <input type="text" class="input" placeholder="Subject"> </div> <div class="msg"> <textarea placeholder="Message"></textarea> <div class="btn">Send</div> </div> </div> </div> </body> </html> |
Code of CSS:
Now copy this CSS code and then paste it to the Html file which you have created in your editor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
@import url('https://fonts.googleapis.com/css?family=Roboto'); *{ margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: 'Roboto', sans-serif; } body{ background: url('bg.jpg') no-repeat top center; background-size: cover; height: 100vh; } .wrapper{ position: absolute; top: 50%; left: 35%; transform: translate(-50%, -50%); width: 100%; max-width: 550px; background: rgba(0,0,0,0.2); padding: 30px; border-radius: 5px; border:0.5px solid #056DB0; box-shadow: 0 0 10px rgba(0,0,0,0.9); } .wrapper .title h1{ color: #fff; margin-bottom: 25px; } .contact-form{ display: flex; } .input-fields{ display: flex; flex-direction: column; margin-right: 4%; } .input-fields, .msg{ width: 48%; } .input-fields .input, .msg textarea{ margin: 10px 0; background: transparent; border: 0px; border-bottom: 1px solid #056DB0; padding: 10px; color: #fff; width: 100%; } .msg textarea{ height: 212px; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; } ::-moz-placeholder { /* Firefox 19+ */ color: #ffff; } :-ms-input-placeholder { /* IE 10+ */ color: #fff; } .btn { background-image: linear-gradient(to left bottom, #39b7dd, #20a5d4, #0392c9, #0080bd, #056db0); text-align: center; padding: 15px; border-radius: 5px; color: #fff; cursor: pointer; text-transform: uppercase; } .btn:hover{ background-image: linear-gradient(to right top, #0392c9, #0b97cc, #129ccf, #19a0d1, #20a5d4); transition: 0.5s; } @media screen and (max-width: 600px){ .contact-form{ flex-direction: column; } .msg textarea{ height: 80px; } .input-fields, .msg{ width: 100%; } } |
Contact us form conclusion:
. Now run the main file and enjoy your output in your browser which you have.
Therefore, by following all these steps you have created your contact us form. If you have any problem in creating Html contact me form then download the code in the file from the below button.
Task:
This contacts us form is a simple contact me page. It does not have form validation. We have multiple posts related to form validation. Check these posts and learn how to implement form validation using Html and CSS. Your main job is to add the form validation in all the input fields of the form.
If this post was helpful then must like and share.
Thanks for reading this article.
