Overview
A leading Film & media production company needed a simple but powerful tool that lets users create their own branded business cards online. They wanted an editor where users could add their details, upload a photo, adjust layout, and generate print-ready business cards while keeping the brand look consistent.
They needed something more advanced than standard form submissions or static templates. The tool had to offer drag-and-drop editing, live card preview, design locking, and two type of layout card generated.
The Challenge
- Allow users to edit their cards without breaking the brand style
- Add drag-and-drop editing and live preview
- Support front and back card designs layout
- Lock the design once approved
- Connect everything to Gravity Forms and Google drive in WordPress
- Save each version to separate Google Drive folders
- Zoom-in / Zoom-out functionality for adjusting the profile picture
Our Solution
Desol Int. built a structured data collection form using Gravity Forms, allowing users to submit personal data, upload photos, provide QR code information, and include required branding elements.
Custom Card Builder (Fabric.js + Canvas)
We built an interactive editor where users can:
- Drag and resize elements
- Zoom and move their profile photo
- Place QR codes
- Switch between front/back card sides
Brand Protection
Important brand elements (logos, backgrounds, colors) are locked so users can’t change them.
Design Approval & Locking
After a user finalizes their design and approves it, all elements become locked to prevent accidental changes.
Google Drive Integration
Each version of the card (front, back, and final) is automatically stored in separate folders in Google Drive.
Front & Back Card Versions
A dual-canvas system allowed live switching between the front and back design of the business card.
Final approved version
Were each saved into **separate, designated folders**, ensuring proper organization and workflow efficiency.
Results
- Fast and easy card creation
Users can create their own cards in minutes. - Consistent branding
All designs follow the company’s visual rules. Brand rules stay intact through locked, non-editable elements. - Print-ready export
High-quality, ready for professional printing. - Organized storage
Cards are auto-saved into the correct Google Drive folders - Time saved
No more manual design work, everything is automated.
Conclusion
The final system gives the client a modern, user-friendly, and automated Business Card Builder inside WordPress. It protects their brand, improves workflow, and delivers a smooth experience for every user.