ToMotion AI logo
Menu
Back to gallery

Public AI explainer video

Hand-Drawn Walkthrough: A Clean “Get in Touch” Contact Form (HTML + CSS)

Here’s a clean, responsive contact form titled “Get in Touch,” drawn like a simple sketch but built with straightforward HTML and CSS. The form posts...

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; }

Narration

Narration used to create this video.

Video narration

Here’s a clean, responsive contact form titled “Get in Touch,” drawn like a simple sketch but built with straightforward HTML and CSS. The form posts to “/submit” using the POST method, and every field is clearly labeled. First is Full Name, then Email Address, Phone Number, and Subject—each input includes a helpful placeholder, and required fields are marked with the required attribute so the browser can prompt for missing info. Below that is a Message textarea with multiple rows for longer notes. Styling keeps everything inside a white card container with padding, rounded corners, and a subtle shadow, capped at 420 pixels wide so it stays neat and centered. Inputs are full-width, and when you click into one, the focus state highlights it with the same blue family—#041938, #013180, and #609DFF—for a clear active cue. Finally, a full-width “Send Message” button sits at the bottom in blue, with a hover state that darkens slightly to feel interactive.