Project Overview Overview
The McLeod & Associates website was developed using semantic HTML5, CSS3, and Vanilla JavaScript, emphasizing a professional and trustworthy aesthetic. The design language utilizes a deep maroon and grey color palette, complemented by custom SVG wave dividers and fluid CSS animations to create an engaging user experience without sacrificing performance.
A standout technical feature is the client intake modal. Built entirely in Vanilla JavaScript, it uses a logic-based multi-step architecture that dynamically renders specific follow-up questions based on the user's initial practice area selection (e.g., Commercial vs. Property Law). Furthermore, the form seamlessly submits data to a Google Form backend via a hidden iframe, ensuring a smooth, reload-free experience for the user.
Tech Stack Stack
Vanilla JS (No Frameworks) Vanilla JS (No Frameworks)
Performance Profile
Dynamic Multi-step Dynamic Multi-step
Lead Capture
Key Features Features
- Dynamic Multi-step Client Intake Form
- Hidden Iframe Google Forms Integration
- Intersection Observer Animated Counters
- Responsive SVG Wave Section Dividers
- Custom CSS Button Animations & Hover Effects
In Motion Motion
Responsive Design Devices
A seamless experience across desktop, tablet, and mobile devices.
Visuals Gallery
Technical Challenges Core
Providing a reliable, cost-effective backend solution for the complex client intake form without relying on server-side code or paid third-party services.
Utilized Google Forms as a backend by mapping HTML input names to Google Form entry IDs, and submitted the data through a hidden iframe to bypass the default redirect behavior, triggering a custom 'Thank You' modal via the iframe's onload event.
Ensuring the multi-step modal validated inputs efficiently while adapting its structure depending on the legal inquiry type selected.
Built a custom vanilla JavaScript state manager that dynamically injects specific HTML templates for 'Step 2', whilst enforcing strict HTML5 validation algorithms before allowing progression to the next step.
Key Takeaways Insights
Integrated Google Forms as a headless backend using a hidden iframe to capture form submissions without page reloads, providing a robust and free database solution.
Engineered a logic-based multi-step modal for client intakes that dynamically renders HTML templates for secondary questions based on the user's primary selection.
Implemented a reusable vanilla JavaScript animation system, including Intersection Observer-based statistics counters and scroll-reveal elements.
Developed a GDPR/POPIA compliant cookie consent pop-up that conditionally loads tracking scripts only upon user approval.
Project Outcomes Impact
Delivered a professional, highly trustworthy web presence that reflects the firm's 25+ years of legal experience.
Streamlined the client onboarding process, allowing the legal team to receive categorized, detailed leads directly into a centralized spreadsheet.