How to create an animated contact form with only HTML & CSS? Solution: CSS Animated Contact Form With Responsive Design.
Every website uses contact forms Because this is the common way to generate lead. In the blog, owner and visiting both want to connect with each other, & send messages. Contact or feedback form is the best method to listen to your visitors. That’s why we strictly need a contact form on our website.
Peoples who use WordPress mostly use contact form 7 on their websites. I am also using this form because I think this simple form is perfect for this blog. If anyone wants to use an animated contact form they can purchase a premium script, or create their own. Nowadays mostly forms are built-in popular JavaScript library like jQuery.
Now, If anyone doesn’t know javascript, or want to create in pure HTML CSS, then this post is for you. So, today I am sharing CSS Animated Contact Form With Responsive Design, a pure HTML & CSS contact form. I created this program without any JS library, but I used one external CSS library for creating animation effect easily.
This is a simple CSS grid-based form, but it’s animate left to center when we open the form page. This form has two sections, the first one is for showing about the company, & the second one is for showing form. A beginner also can understand this program easily after seeing the codes.
Now if you are thinking about how this program actually is, then see the preview given below.
Preview Of Pure HTML CSS Form
See this video preview to getting an idea of how this program looks like.
Now you can see this program visually, this has left to center bounce animation effect. If you like this, then get the source code of its.
You May Also Like:
- HTML CSS Smooth Scrolling
- Pure CSS Card With Hover Effect
- Form Validation With Pure HTML CSS
- Text Reveal In HTML CSS
CSS Animated Contact Form Source Code
As always before sharing source code, let’s talk little bit about this program. This is a pure HTML CSS program, I created this without javascript. For creating this CSS Animated Contact Form, I used an external CSS library called ‘animate.css‘. I just put one class from external library bounceInLeft for creating an animation effect. As you know this is a CSS grid-based form. & I used CSS @media property to create this form responsive.
For creating this program you have to create only 2 files. One for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here 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 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Contact Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1 class="maint">Animated Contact Form</h1> <div class="section animated bounceInLeft"> <div class="brandname"> <h3>WEB DEV TRICK</h3> <ul> <li> +91 1234567890</li> <li>contact@webdevtrick.com</li> <li>webdevtrick.com</li> </ul> </div> <div class="contact"> <h3>Email Me</h3> <form action="#"> <p> <label for="#">Name</label> <input type="text" name="name"> </p> <p> <label for="#">Company</label> <input type="text" name="company"> </p> <p> <label for="#">Email Address</label> <input type="email" name="email"> </p> <p> <label for="#">Phone Number</label> <input type="text" name="phone"> </p> <p class="full"> <label for="#">Message</label> <textarea name="message" cols="30" rows="5"></textarea> </p> <p class="full"> <button>Submit</button> </p> </form> </div> </div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ & put these 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 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 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ * { box-sizing: border-box; } body { background: #92bde7; color: #485e74; line-height: 1.6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding: 1em; } .container { max-width: 960px; margin-left: auto; margin-right: auto; padding: 1em; } ul { list-style: none; padding: 0; } .maint { text-align: center; color: white; } .section { box-shadow: 0 0 20px 0 rgba(72, 94, 116, 0.7); } .section > * { padding: 1em; } .brandname { background: #c9e6ff; } .brandname h3, .brandname ul { text-align: center; margin: 0 0 1rem 0; } .contact { background: #f9feff; } .contact form { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .contact form label { display: block; } .contact form p { margin: 0; } .contact form .full { grid-column: 1 / 3; } .contact form button, .contact form input, .contact form textarea { width: 100%; padding: 1em; border: 1px solid #c9e6ff; } .contact form button { background: #c9e6ff; border: 0; text-transform: uppercase; } .contact form button:hover, .contact form button:focus { background: #92bde7; color: #fff; outline: 0; transition: background-color 0.5s ease-out; } /* LARGE SCREENS */ @media(min-width:700px) { .section { display: grid; grid-template-columns: 1fr 2fr; } .section > * { padding: 2em; } .compnay-info h3, .brandname ul, .maint { text-align: left; } } |
That’s It. Now you have successfully created CSS Animated Contact Form With Responsive Design. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Awesome
Thank you.
nice
Really nice, Thanks for the code also. I want to apply for my site.