Professional Forms Kit - VexaX
Run Code
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Professional Forms Kit</title> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(to right, #283c86, #45a247); height: 100vh; justify-content: center; align-items: center; margin: 0; } .form-container { background: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 25%; margin: auto; margin-top: 5%; } .form-container h2 { color: #283c86; text-align: center; margin-bottom: 20px; } fieldset { border: 2px solid #283c86; border-radius: 10px; padding: 20px; position: relative; background: #fff; z-index: 1; } legend { font-size: 1.5em; color: #45a247; font-weight: bold; } .input-group { margin-bottom: 15px; position: relative; } .input-group input, .input-group textarea { width: 93%; padding: 10px; border: 2px solid #283c86; border-radius: 5px; outline: none; transition: border-color 0.3s; } .input-group input:focus, .input-group textarea:focus { border-color: #45a247; } .form-button { background: linear-gradient(to right, #283c86, #45a247); border: none; padding: 10px 20px; border-radius: 5px; color: #fff; font-size: 1em; cursor: pointer; transition: background 0.3s; width: 100%; text-align: center; } .form-button:hover { background: linear-gradient(to right, #45a247, #283c86); } </style> </head> <body> <div class="form-container"> <h2>Contact Us</h2> <fieldset> <legend>Get in Touch</legend> <div class="input-group"> <input type="text" id="name1" placeholder="Your Name"> </div> <div class="input-group"> <input type="email" id="email" placeholder="Your Email"> </div> <div class="input-group"> <textarea id="message" placeholder="Your Message"></textarea> </div> <button class="form-button">Send Message</button> </fieldset> </div> <div class="form-container"> <h2>Feedback</h2> <fieldset> <legend>We Value Your Feedback</legend> <div class="input-group"> <input type="text" id="username" placeholder="Username"> </div> <div class="input-group"> <textarea id="feedback" placeholder="Your Feedback"></textarea> </div> <button class="form-button">Submit Feedback</button> </fieldset> </div> <div class="form-container"> <h2>Newsletter Signup</h2> <fieldset> <legend>Stay Updated</legend> <div class="input-group"> <input type="email" id="signup-email" placeholder="Your Email"> </div> <button class="form-button">Sign Up</button> </fieldset> </div> <div class="form-container"> <h2>Appointment Booking</h2> <fieldset> <legend>Book Your Appointment</legend> <div class="input-group"> <input type="text" id="name" placeholder="Your Name"> </div> <div class="input-group"> <input type="date" id="date" placeholder="Preferred Date"> </div> <div class="input-group"> <input type="time" id="time" placeholder="Preferred Time"> </div> <button class="form-button">Book Appointment</button> </fieldset> </div> <div class="form-container"> <h2>Job Application</h2> <fieldset> <legend>Apply Now</legend> <div class="input-group"> <input type="text" id="fullname" placeholder="Full Name"> </div> <div class="input-group"> <input type="email" id="applicant-email" placeholder="Email"> </div> <div class="input-group"> <textarea id="cover-letter" placeholder="Cover Letter"></textarea> </div> <button class="form-button">Submit Application</button> </fieldset> </div> <div class="form-container"> <h2>Event Registration</h2> <fieldset> <legend>Register for Event</legend> <div class="input-group"> <input type="text" id="participant-name" placeholder="Participant Name"> </div> <div class="input-group"> <input type="email" id="participant-email" placeholder="Email"> </div> <button class="form-button">Register</button> </fieldset> </div> <div class="form-container"> <h2>Survey</h2> <fieldset> <legend>Your Opinion Matters</legend> <div class="input-group"> <input type="text" id="survey-name" placeholder="Name"> </div> <div class="input-group"> <textarea id="survey-response" placeholder="Your Response"></textarea> </div> <button class="form-button">Submit Survey</button> </fieldset> </div> <div class="form-container"> <h2>Order Form</h2> <fieldset> <legend>Place Your Order</legend> <div class="input-group"> <input type="text" id="product-name" placeholder="Product Name"> </div> <div class="input-group"> <input type="number" id="quantity" placeholder="Quantity"> </div> <button class="form-button">Order Now</button> </fieldset> </div> <div class="form-container"> <h2>Feedback Form</h2> <fieldset> <legend>We Appreciate Your Feedback</legend> <div class="input-group"> <input type="text" id="customer-name" placeholder="Name"> </div> <div class="input-group"> <textarea id="customer-feedback" placeholder="Your Feedback"></textarea> </div> <button class="form-button">Submit Feedback</button> </fieldset> </div> <div class="form-container"> <h2>Support Request</h2> <fieldset> <legend>Need Help?</legend> <div class="input-group"> <input type="text" id="support-name" placeholder="Name"> </div> <div class="input-group"> <textarea id="support-message" placeholder="Describe your issue"></textarea> </div> <button class="form-button">Submit Request</button> </fieldset> </div> </body> </html>