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.
Gallery Visuals
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
- 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.