Public AI explainer video
. HTML (index.html) HTML <div class="form-container"> <h2>Get in...
. HTML (index.html) HTML <div class="form-container"> <h2>Get in Touch</h2> <form id="contactForm" action="/submit" method="POST"> <div class="form-group"...
Prompt
Source idea used to generate this video.
. HTML (index.html) HTML <div class="form-container"> <h2>Get in Touch</h2> <form id="contactForm" action="/submit" method="POST"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" name="name" required placeholder="Jane Doe"> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" name="email" required placeholder="jane@example.com"> </div> <div class="form-group"> <label for="phone">Phone Number</label> <input type="tel" id="phone" name="phone" placeholder="+91 98765 43210"> </div> <div class="form-group"> <label for="subject">Subject</label> <input type="text" id="subject" name="subject" required placeholder="How can we help?"> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" name="message" rows="5" required placeholder="Write your message..."></textarea> </div> <button type="submit">Send Message</button> </form> </div> 2. CSS (styles.css) CSS .form-container { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 100%; max-width: 420px; } .form-container h2 { margin-top: 0; color: #041938; text-align: center; } .form-group { margin-bottom: 18px; } .form-group label { display: block; margin-bottom: 6px; font-weight: 600; color: #013180; } .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; } .form-group input:focus, .form-group textarea:focus { border-color: #609DFF; outline: none; box-shadow: 0 0 4px rgba(96, 157, 255, 0.4); } button { width: 100%; padding: 12px; background: #609DFF; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; transition: background 0.2s; } button:hover { background: #013180; }
More examples