If you want to create a contact form using HTML & CSS code, then keep your attention in this tutorial as I am going to share how to create responsive contact form using HTML & CSS.
You can use the contact form on your website for getting the users feedback, questions, service/ information request, and etc… Follow the below steps to create the contact form.
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 | <style> body {font-family: Arial, Helvetica, sans-serif;} input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } .container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } </style> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <h3>Contact Form</h3> <div class="container"> <form action="/action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="lname">Subject</label> <input type="text" id="subject" name="subject" placeholder="Your subject.."> <label for="subject">Message</label> <textarea id="message" name="message" placeholder="Write something here..." style="height:200px"></textarea> <input type="submit" value="Submit"> </form> </div> |
After adding the above code your contact form will look like below screenshot.
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: bootstrap contact form example, contact form example, contact form examples css, contact form examples html, contact form html code, contact form html css example, contact us page template free download, free html contact form, responsive contact form free download
