Today, I am going to share with you a very good contact form HTML.
Here I am using very effective html structure to htmlise this contact form. It is very fancy and color selection is unique for it. It is designed to delight your website beauty. You can use it with your contact page in website.
This contact form is very handy to integrate with html website. A good contact form can attractive to more users to stay in contact threw with them. So that I am sharing a very fancy and wonderful contact form html with you.
HTML contact forms are one of the most common components in most websites or blogs. They are becoming highly popular on the rest of the web as well, for example on Facebook pages and in email newsletters. We are going to take a look at how to generate our own HTML contact form code. It is a nice and simple HTML contact form. To make it work properly, we will add a PHP script to the HTML contact form code.
So that here first of all we are going to create a html structure as you can see in below code:
Html code
1 2 3 4 5 6 7 8 9 | <form> <h1>Contact Form</h1> <input type="text" placeholder="Name*" required/> <input type="text" placeholder="Email ID*" required/> <input type="text" placeholder="Contact No*" required/> <input type="text" placeholder="Subject*" required/> <textarea type="text" placeholder="Message*" required></textarea> <input type="submit" value="Submit"/> </form> |
Without css this will not look cool and effective as you can see in picture given below
Contact Form Without Css
Now I am going to add some style and beauty by using classes in html contact form to make it more effective
CSS code
1 2 3 4 5 6 7 | body{background:url(images/pattern.png) repeat left top;} form{max-width:518px;width:100%;margin:30px auto;background:#3870ae;border-radius:15px;} form h1{font-size:27px;color:#ffffff;font-style:italic;line-height:normal;text-align:center;background:#074182;text-shadow:1px 1px 1px #151515;padding:20px;border-top-right-radius:15px;border-top-left-radius:15px;margin-bottom:0;} form .innercontent{padding:10px 30px 30px 30px ;} form .innercontent .inputfield{max-width:100%;transition:all 0.5 ease;} form .innercontent .inputfield .input-beauty{background:#5685ba;color:#205289;border:1px solid #1f5898;box-shadow:0px 4px 0px #1b4380;border-radius:10px;max-width:100%;font-style:italic;width:96%;line-height:40px;margin-top:25px;font-size:15px; padding:0 2%;} form .innercontent .inputfield .button-beauty{background:#074182;color:#ffffff;border:1px solid #074182;box-shadow:0px 4px 0px #091c3e;border-radius:10px;max-width:100%;font-style:normal;width:100%;line-height:40px;margin-top:25px;font-size:18px; font-weight:bold;} |
Now html contact form with effective become live as looks like in picture given below :
