By: Prem Tiwari | Last Updated: | In: HTML & CSS
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.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
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
