WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Contact Form
8686
lebdev
Publish Your Code
Recommended
16 September 2025
Coin Transfer tiktok Form with Payment Selection
11 September 2023
CSS Social Icons
18 March 2023
Modern Login Form
index.html
Copy
Webleb
Contact
Keep in touch
Submit
styles.css
Copy
@import "https://fonts.googleapis.com/css?family=Poppins"; * { box-sizing: border-box; } body { margin: 0; padding: 0; background: #333; font-family: Poppins; text-transform: uppercase; font-size: 11px; background: #0f0c29; /* fallback for old browsers */ background: -webkit-linear-gradient( to right, #24243e, #302b63, #0f0c29 ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right, #24243e, #302b63, #0f0c29 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } h1 { margin: 0; } #contact { margin: 4em auto; width: 100px; height: 30px; line-height: 30px; font-weight: 700; text-align: center; cursor: pointer; border: 1px solid white; } #contact:hover { background: #000000; } #contact:active { background: #444; } #contactForm { display: none; border: 6px solid 3324be; padding: 2em; width: 400px; text-align: center; background: #fff; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); border-radius: 16px; } input, textarea { outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; padding: 15px; box-sizing: border-box; font-size: 14px; border-radius: 15px; } textarea { height: 80px; resize: none; } .formBtn { outline: 0; background: #3324be; width: 140px; height: 30px; border: 0; color: #ffffff; font-size: 1.2em; border-radius: 15px; -webkit-transition: all 0.3 ease; transition: all 0.3 ease; cursor: pointer; }
main.js
Copy
$(function() { $('#contact').click(function() { $('#contactForm').fadeToggle(); }) $(document).mouseup(function (e) { var container = $("#contactForm"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.fadeOut(); } }); });