Create responsive, validated HTML/CSS contact forms with custom fields, themes, and instant clean embed snippets.
Fill out the form below and our team will get back to you within 24 hours.
<!-- Responsive Contact Form by MihirBuilds -->
<div class="mb-contact-form-wrapper" style="max-width: 580px; margin: 0 auto; background: #ffffff; padding: 32px; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08); font-family: system-ui, -apple-system, sans-serif; box-sizing: border-box;">
<h2 style="margin: 0 0 8px; color: #0f172a; font-size: 24px; font-weight: 800; letter-spacing: -0.02em;">Send Us a Message</h2>
<p style="margin: 0 0 24px; color: #64748b; font-size: 14px; line-height: 1.5;">Fill out the form below and our team will get back to you within 24 hours.</p>
<form action="https://formspree.io/f/your-form-id" method="POST" style="display: flex; flex-direction: column; gap: 16px;">
<div>
<label for="fullName" style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #0f172a;">
Full Name <span style="color: #ef4444;">*</span>
</label>
<input type="text" id="fullName" name="fullName" placeholder="Jane Doe" required style="width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: #0f172a; outline: none; font-family: inherit;" />
</div>
<div>
<label for="email" style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #0f172a;">
Email Address <span style="color: #ef4444;">*</span>
</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required style="width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: #0f172a; outline: none; font-family: inherit;" />
</div>
<div>
<label for="phone" style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #0f172a;">
Phone Number
</label>
<input type="tel" id="phone" name="phone" placeholder="+1 555 000 1234" style="width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: #0f172a; outline: none; font-family: inherit;" />
</div>
<div>
<label for="subject" style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #0f172a;">
Subject <span style="color: #ef4444;">*</span>
</label>
<input type="text" id="subject" name="subject" placeholder="Project Consultation" required style="width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: #0f172a; outline: none; font-family: inherit;" />
</div>
<div>
<label for="message" style="display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #0f172a;">
Your Message <span style="color: #ef4444;">*</span>
</label>
<textarea id="message" name="message" rows="4" placeholder="Describe your project or questions..." required style="width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: #0f172a; outline: none; font-family: inherit; resize: vertical;"></textarea>
</div>
<button type="submit" style="margin-top: 8px; width: 100%; background: #2563EB; color: #ffffff; border: none; padding: 14px 20px; font-size: 15px; font-weight: 700; border-radius: 12px; cursor: pointer; transition: opacity 0.2s ease;">
Submit Inquiry
</button>
</form>
</div>