A sophisticated, fully-featured project inquiry form designed for freelancers, agencies, and creative professionals. This project is a masterclass in modern HTML5 and CSS3, creating a professional, zero-error, and meaningful user experience with a modern Indian luxury aesthetic.
This is not just a form; it's a complete, self-contained application for client intake, packed with professional features:
- Elegant "Polished Slate & Brushed Bronze" Design: A sophisticated, high-contrast theme inspired by luxury materials, creating a premium and professional "Modern Indian" feel.
- Fully Responsive Layout: Flawless viewing experience on all devices, from large desktops to mobile phones.
- Advanced Multi-Select for Services: A custom, intuitive component allows clients to select multiple services. Categories with sub-options (like "Website" and "Brand Designing") elegantly expand and collapse.
- Dynamic Conditional Logic: The "Add-ons & Technologies" section intelligently shows or hides relevant options (Development vs. Designing) based on the user's service selection, keeping the UI clean and relevant.
- Interactive "FAQ-Style" Accordion: Add-on options are neatly organized into a clean, show-hide accordion system.
- Comprehensive Form Fields: Includes every necessary field for a thorough project brief, from contact details and scheduling to budget and file uploads, all based on a professional workflow.
- Built-in HTML5 Validation: Utilizes native browser validation for fields like email, URL, and required inputs, ensuring data integrity.
- Seamless Backend Integration: Pre-configured to work perfectly with FormSubmit.co for easy, backend-less email submission.
- Zero Dependencies: Crafted with pure HTML, CSS, and vanilla JavaScript. No frameworks, no libraries, just clean, efficient code.
- Accessibility in Mind: Uses semantic HTML and proper labeling for a more accessible experience.
Check out the live version of the form here:
https://professional-project-inquiry-form.netlify.app/
This project is designed to be incredibly easy to set up. Just follow these two steps:
Download or clone the index.html file from this repository.
To receive inquiries in your email, you MUST change the placeholder email address. Open the index.html file and find this line (around line 205):
<form id="inquiry-form" action="https://formsubmit.co/[email protected]" method="POST" enctype="multipart/form-data">Replace [email protected] with your actual email address.
<form id="inquiry-form" action="https://formsubmit.co/[email protected]" method="POST" enctype="multipart/form-data">The first time you submit the form, FormSubmit will send you a confirmation link to activate it.
Find this line (around line 433) and replace the placeholder URL with the link to your portfolio:
<a href="https://aakhalidhruv28.github.io/My-Portfolio/" target="_blank" class="btn btn-secondary">View My Portfolio</a>- HTML5: For the structure and semantics of the form. All modern input types are used for the best user experience.
- CSS3: For the complete styling and layout. Uses modern features like Custom Properties (Variables), Flexbox, and Grid for a clean, responsive, and maintainable design.
- Vanilla JavaScript: For the dynamic functionality, including:
- The multi-select service component logic.
- Conditional display of the "Add-ons" sections.
- Parent/child checkbox synchronization.
- Real-time updates for the visual color picker.
This project is licensed under the MIT License. See the LICENSE.md file for details.
Dhruv Aakhali – Linkedin – [email protected]