I wanted a modern, responsive contact form with smooth animations and clean styling—so I turned to AI for help. Here’s how the process went:
Video Tutorial:
Step 1: Defining the Requirements
I started by listing what I needed:
✅ Fully responsive (works on mobile & desktop)
✅ Animated elements (floating labels, smooth transitions)
✅ Clean, minimalist design (no flashy colors)
✅ Proper form validation (required fields, error handling)
✅ Success message (confirmation after submission)
I fed these requirements into DeepSeek (or any AI assistant) and asked:
“Generate a responsive contact form with animated labels, a clean white design, and proper validation—all in a single HTML file.”
Step 2: AI’s First Attempt
The AI gave me a form, but it had issues:
❌ Too much color (gradients, flashy animations)
❌ Not fully responsive (overflowed on mobile)
❌ No proper contrast (hard to read)
So I refined my request:
“Make the form minimalist—soft white background, better contrast, and ensure it fits on mobile screens without scrolling.”
Step 3: The Final, Improved Version
The AI adjusted the code, and now it had:
✔ Clean white background with subtle shadows
✔ Floating labels that animate smoothly
✔ Mobile-friendly layout (stacks inputs on small screens)
✔ Focus states (clear visual feedback)
✔ Success animation (fade-in confirmation)
Here’s the best part—I didn’t write a single line of code manually. The AI handled:
- HTML structure
- CSS styling & animations
- JavaScript validation & submission logic
Final Result: A Perfect Contact Form
✅ Looks professional
✅ Works on all devices
✅ Easy to customize
✅ Zero manual coding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Contact Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background: #f8f9fa;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 600px;
width: 100%;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
max-height: 95vh;
overflow-y: auto;
}
.container h2 {
color: #2d3748;
font-size: 24px;
font-weight: 600;
margin-bottom: 25px;
text-align: center;
}
.form {
display: flex;
flex-direction: column;
gap: 20px;
}
.input-group {
position: relative;
}
.input-group input,
.input-group textarea,
.input-group select {
width: 100%;
padding: 14px 16px;
border: 1px solid #e2e8f0;
outline: none;
border-radius: 8px;
font-size: 15px;
background-color: #fff;
transition: all 0.2s ease;
color: #2d3748;
}
.input-group textarea {
min-height: 120px;
resize: vertical;
}
.input-group select {
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
}
.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus {
border-color: #4c6fff;
box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.1);
}
.input-group label {
position: absolute;
left: 16px;
top: 14px;
color: #718096;
font-weight: 400;
font-size: 15px;
pointer-events: none;
transition: all 0.2s ease;
background: #fff;
padding: 0 4px;
}
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label,
.input-group select:focus ~ label,
.input-group select:not([value=""]) ~ label {
top: -10px;
left: 12px;
font-size: 13px;
color: #4c6fff;
}
.radio-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.radio-group h3 {
color: #4a5568;
font-size: 15px;
font-weight: 500;
margin-bottom: 4px;
}
.radio-options {
display: flex;
gap: 20px;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
}
.radio-option input {
width: 16px;
height: 16px;
accent-color: #4c6fff;
}
.radio-option label {
color: #4a5568;
font-size: 14px;
cursor: pointer;
}
button[type="submit"] {
width: 100%;
padding: 14px;
background: #4c6fff;
color: white;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 10px;
}
button[type="submit"]:hover {
background: #3b5bdb;
}
.success-message {
display: none;
text-align: center;
padding: 30px 20px;
background: #f0fdf4;
border-radius: 8px;
color: #166534;
border: 1px solid #bbf7d0;
}
.success-message svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
color: #22c55e;
}
.success-message h3 {
font-size: 18px;
margin-bottom: 8px;
}
.success-message p {
font-size: 14px;
color: #4a5568;
}
/* Responsive adjustments */
@media (max-width: 640px) {
.container {
padding: 24px 20px;
}
.radio-options {
flex-direction: column;
gap: 12px;
}
.input-group input,
.input-group textarea,
.input-group select {
padding: 12px 14px;
}
}
@media (max-height: 700px) {
.container {
max-height: 85vh;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Contact Us</h2>
<form class="form" id="contactForm">
<div class="input-group">
<input type="text" id="fullName" placeholder=" " required>
<label for="fullName">Full Name</label>
</div>
<div class="input-group">
<input type="email" id="email" placeholder=" " required>
<label for="email">Email Address</label>
</div>
<div class="input-group">
<input type="tel" id="phone" placeholder=" ">
<label for="phone">Phone Number (optional)</label>
</div>
<div class="input-group">
<select id="subject" required>
<option value="" selected disabled></option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
<label for="subject">Subject</label>
</div>
<div class="input-group">
<textarea id="message" placeholder=" " required></textarea>
<label for="message">Your Message</label>
</div>
<div class="radio-group">
<h3>Preferred Contact Method</h3>
<div class="radio-options">
<div class="radio-option">
<input type="radio" id="contact-email" name="contactMethod" value="email" checked>
<label for="contact-email">Email</label>
</div>
<div class="radio-option">
<input type="radio" id="contact-phone" name="contactMethod" value="phone">
<label for="contact-phone">Phone</label>
</div>
<div class="radio-option">
<input type="radio" id="contact-either" name="contactMethod" value="either">
<label for="contact-either">Either</label>
</div>
</div>
</div>
<button type="submit">Send Message</button>
</form>
<div class="success-message" id="successMessage">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<h3>Message Sent Successfully!</h3>
<p>We'll get back to you within 24 hours.</p>
</div>
</div>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// Show success message
document.getElementById('contactForm').style.display = 'none';
document.getElementById('successMessage').style.display = 'block';
// Reset form after 5 seconds (for demo)
setTimeout(() => {
this.reset();
document.getElementById('contactForm').style.display = 'flex';
document.getElementById('successMessage').style.display = 'none';
// Reset labels for select element
const select = document.getElementById('subject');
const selectLabel = select.nextElementSibling;
selectLabel.style.top = '14px';
selectLabel.style.left = '16px';
selectLabel.style.fontSize = '15px';
selectLabel.style.color = '#718096';
}, 5000);
});
// Initialize select labels
document.querySelectorAll('select').forEach(select => {
select.addEventListener('change', function() {
const label = this.nextElementSibling;
if (this.value) {
label.style.top = '-10px';
label.style.left = '12px';
label.style.fontSize = '13px';
label.style.color = '#4c6fff';
} else {
label.style.top = '14px';
label.style.left = '16px';
label.style.fontSize = '15px';
label.style.color = '#718096';
}
});
});
</script>
</body>
</html>
Watch More our Videos on This Series
Read our other posts on HTML, CSS, JavaScript.
FAQs About AI-Built Responsive Contact Forms
1. “Will this AI-generated form work on my WordPress site?”
Absolutely! Just copy-paste the HTML/CSS/JS into a Custom HTML block or your theme’s footer. No plugins needed. For Backend. See the next question.
2. “How do I make the form send emails?”
The AI gave me the frontend part. For backend, you’ll need:
- A tiny PHP script (5 lines)
- Or connect it to Formspree/Netlify Forms (free)
3. “Why did my AI-generated form look worse than yours?”
Classic AI overdesign! Try this prompt:
“Redo with NO gradients, ONLY subtle shadows, and test on mobile first.”
4. “Can I use this for client projects?”
100% yes. I’ve used this exact template for 3 freelance gigs. Just tweak the colors. But for backend you have to again access AI or do some logic yourself.
5. “The validation sucks—how do I fix it?”
Add this to your prompt:
“Include email format validation and ‘required’ field warnings in red text.”
6. “Will Google penalize AI-written code?”
Nope. Google bots can’t tell if code came from AI, your cat, or a NASA engineer.
7. “My form looks broken on iPhone—help!”
AI often misses this. Add this CSS:
@media (max-width: 500px) {
input { font-size: 16px !important; } /* Stops iOS zooming */
} 8. “How do I add more fields?”
Tell the AI:
“Add a phone number field with country code dropdown and a file upload button.”
9. “Which AI works best for coding forms?”
My tests:
- DeepSeek: Best for thousnads of lines of Single File Codes.
- ChatGPT-4: Best for complex logic
- Claude 3: Cleaner CSS
- Gemini: Fast but misses details
10. “Should I learn to code or just use AI?”
Learn enough to debug AI’s weirdness (like when it adds !important 27 times).
