Want to create an amazing contact us form using HTML CSS JavaScript? Solution: See this HTML Contact Form With CSS and jQuery, Contact Us Form Design.
Previously I have shared an animated contact form using CSS, but this has minimal but pretty UI. Basically, we use contact us form on our website for users can easily contact us and brands for business enquires also. Contact us page should have minimal design and fast loading, because the page is the main goal of most websites owners.
Today you will learn to create contact us form with HTML, CSS, and JavaScript. Basically there are 3 input fields, one for the name, one for email, and one for massage. The common input which we use on your contact page because these Infos are enough to contact anyone. First, you can see the label like a text on the middle of the box, on hover its become label and you can see the text input field. And after clicking or activating the input its colors also will change, and massage filed will expand.
So, Today I am sharing HTML Contact Form With CSS and jQuery. Here I have used jQuery for creating the function or features easily, as you know that is a JS library that’s why I am putting this in JavaScript category. This is a complete contact us page that we can use on your website blindly after backend integration, it is also with responsive design.
If you are thinking now how this form design actually is, then see the preview given below.
Preview Of Responsive Contact Us Page
See this video preview to getting an idea of how this page design looks like.
Live Demo
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Newsletter Signup Form With Validation
- SVG Search Input Animation
- jQuery Fly To Cart Effect
- Inline Select Option Dropdown
HTML Contact Form With CSS and jQuery Source Code
Before sharing source code, let’s talk about it. First, I have created a section and put a heading and placed a form and three inputs inside it. I have used HTML <form> tag for creating the form, and <input type="text"> for putting the items field. Here I have used a google font to gave attractive visual.
Now using CSS, I have placed all the elements on the right page as you can see in the preview. Firstly, I gave the height and width of label the same as the input for covering it. On hover and click it becomes small in width and pretend as a label. As you know this is a responsive design, for creating that used CSS @media query (info).
jQuery handling some of the main features of this design. With JS I have created the label size increase and decrease on active the input. And also you can see the message box expands, it is also is handled by jQuery. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
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 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Contact Form Template</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <section id="contactME"> <h1>Contact Me</h1> <form> <div class="field name-box"> <input type="text" id="name" placeholder="Who Are You?"/> <label for="name">Name</label> </div> <div class="field email-box"> <input type="text" id="email" placeholder="name@email.com"/> <label for="email">Email</label> </div> <div class="field msg-box"> <textarea id="msg" rows="4" placeholder="Your message goes here..."/></textarea> <label for="msg">Msg</label> </div> <input class="button" type="submit" value="Send" /> </form> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given below.
|
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 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { background: #efefef; font-size: 62.5%; font-family: 'Lato', sans-serif; font-weight: 300; color: #B6B6B6; } body section { background: white; margin: 60px auto 120px; border-top: 15px solid #002038; text-align: center; padding: 50px 0 110px; width: 80%; max-width: 1100px; } body section h1 { margin-bottom: 40px; font-size: 4em; text-transform: uppercase; font-family: 'Lato', sans-serif; font-weight: 100; } form { width: 58.3333333333%; margin: 0 auto; } form .field { width: 100%; position: relative; margin-bottom: 15px; } form .field label { text-transform: uppercase; position: absolute; top: 0; left: 0; background: #002038; width: 100%; padding: 18px 0; font-size: 1.45em; letter-spacing: 0.075em; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form .field label + span { font-family: 'SSStandard'; opacity: 0; color: white; display: block; position: absolute; top: 12px; left: 7%; font-size: 2.5em; text-shadow: 1px 2px 0 #cd6302; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form .field input[type="text"], form .field textarea { border: none; background: #E8E9EA; width: 80.5%; margin: 0; padding: 18px 0; padding-left: 19.5%; color: #002038; font-size: 1.4em; letter-spacing: 0.05em; text-transform: uppercase; } form .field input[type="text"]#msg, form .field textarea#msg { height: 18px; resize: none; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form .field input[type="text"]:focus, form .field input[type="text"].focused, form .field textarea:focus, form .field textarea.focused { outline: none; } form .field input[type="text"]:focus#msg, form .field input[type="text"].focused#msg, form .field textarea:focus#msg, form .field textarea.focused#msg { padding-bottom: 150px; } form .field input[type="text"]:focus + label, form .field input[type="text"].focused + label, form .field textarea:focus + label, form .field textarea.focused + label { width: 18%; background: #f79600; color: #002038; } form .field input[type="text"].focused + label, form .field textarea.focused + label { color: #f79600; } form .field:hover label { width: 18%; background: #002038; color: white; } form input[type="submit"] { background: #f79600; color: white; -webkit-appearance: none; border: none; text-transform: uppercase; position: relative; padding: 13px 50px; font-size: 1.4em; letter-spacing: 0.1em; font-family: 'Lato', sans-serif; font-weight: 300; -webkit-transition: all 333ms ease-in-out; -moz-transition: all 333ms ease-in-out; -o-transition: all 333ms ease-in-out; -ms-transition: all 333ms ease-in-out; transition: all 333ms ease-in-out; } form input[type="submit"]:hover { background: #002038; color: #f79600; } form input[type="submit"]:focus { outline: none; background: #cd6302; } @media (max-width:765px) { form { width: 100%; } body section { width: 100%; } } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
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 |
// Code By Webdevtrick ( https://webdevtrick.com ) $('textarea').blur(function () { $('#contactME textarea').each(function () { $this = $(this); if ( this.value != '' ) { $this.addClass('focused'); $('textarea + label + span').css({'opacity': 1}); } else { $this.removeClass('focused'); $('textarea + label + span').css({'opacity': 0}); } }); }); $('#contactME .field:first-child input').blur(function () { $('#contactME .field:first-child input').each(function () { $this = $(this); if ( this.value != '' ) { $this.addClass('focused'); $('.field:first-child input + label + span').css({'opacity': 1}); } else { $this.removeClass('focused'); $('.field:first-child input + label + span').css({'opacity': 0}); } }); }); $('#contactME .field:nth-child(2) input').blur(function () { $('#contactME .field:nth-child(2) input').each(function () { $this = $(this); if ( this.value != '' ) { $this.addClass('focused'); $('.field:nth-child(2) input + label + span').css({'opacity': 1}); } else { $this.removeClass('focused'); $('.field:nth-child(2) input + label + span').css({'opacity': 0}); } }); }); |
That’s It. Now you have successfully created HTML Contact Form With CSS and jQuery, Responsive Contact Us Form Design. If you have doubt or question then comment down below.
Thanks For Visiting, Keep Visiting.
does it will send the mail to default form who’s id is save their
I would like to yest the form using xamp server to send email from myy outlook address to gmail(person wanting to contact me?
where would i -lace my php file in this setup.
thank you
iam fine this is very well contnue