<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>Contact Form</title> <style> body { fontfamily: Arial, sansserif; } .container { maxwidth: 600px; margin: 0 auto; padding: 20px; backgroundcolor: #f5f5f5; border: 1px solid #ccc; } h1 { textalign: center; marginbottom: 20px; } label { display: block; marginbottom: 5px; } input, textarea { width: 100%; padding: 5px; marginbottom: 20px; } button { backgroundcolor: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; width: 100%; } button:hover { opacity: 0.8; } </style> </head> <body> <div class="container"> <h1>Contact Us</h1> <form id="contactForm"> <label for="name">Name</label> <input type="text" id="name" required> <label for="email">Email</label> <input type="email" id="email" required> <label for="message">Message</label> <textarea id="message" rows="5" required></textarea> <button type="submit">Submit</button> </form> </div> <script> document.getElementById("contactForm").addEventListener("submit", function(event) { event.preventDefault(); let name = document.getElementById("name").value; let email = document.getElementById("email").value; let message = document.getElementById("message").value; alert("Thank you for contacting us! We will get back to you shortly."); console.log("Name:", name); console.log("Email:", email); console.log("Message:", message); }); </script> </body> </html>
(图片来源网络,侵删)
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/475307.html