Self-Service Advertising Portal on Wix Velo
- Sadique Habibullah
- Sep 8
- 4 min read
Overview
A client required a sophisticated, multi-step advertising contract submission portal on their Wix site. They needed a system that would allow advertisers to choose from various packages, input their company details, upload a logo, add multiple business contacts, and see a live preview of their directory listing as they built it.
The key challenge was to move beyond a simple, static form. The solution needed to be an interactive, self-service experience that could handle different advertising packages with unique features, save a user's progress automatically, and streamline the entire submission process for both the advertiser and the site administrators.
The Roadblock: The Limitations of Standard Forms
A standard Wix Form was not an option. The project's complexity presented several roadblocks that required a custom Velo solution👇:
💾 No "Save Draft" Functionality: A lengthy form increases the risk of users accidentally closing their browser or navigating away, losing all their progress. The client needed a robust auto-save feature to ensure a user could leave and return to their incomplete submission at any time.
🔍 Lack of a Live Preview: Advertisers needed to see exactly what their listing would look like before submitting. There was no native Wix feature to dynamically update a visual preview in real-time as a user typed into form fields.
⚡ Inability to Handle Conditional Logic and UI: Different advertising packages offered different features. For example, the premium package included a full advertisement, while basic packages only included a directory listing. The form needed to dynamically show, hide, and require different fields based on the user's selection.
👥Managing Complex, Related Data: Each submission required a variable number of contact persons, each with multiple fields (name, email, phone, etc.). A standard form couldn't efficiently manage this one-to-many relationship and store the data in an organized way.
The Solution: A Guided and Interactive Submission Portal (Focuses on the user's experience)
We built a custom solution that turns the long application into a simple, step-by-step process, all on a single page. This approach breaks down the task into easy, manageable stages that guide the user from start to finish.
Here's how it works for the user:
🧠 It Remembers Your Progress. When a user starts filling out the form, the system automatically saves everything in the background. If they get interrupted and have to leave, they can come back later and pick up right where they left off, with all their information waiting for them.
👀 See Your Ad Come to Life Instantly. As a user types their company name, address, or description, that same information immediately appears in a preview panel on the page. This live preview shows them exactly what their final advertisement will look like, so there are no surprises.
⚙️ A Form That Adapts to Your Choices. The form is smart. If a user chooses a basic advertising package, they'll only see the fields they need to fill out. But if they select an advanced package, new sections for a full advertisement will instantly appear. This keeps the experience clean and relevant to their choice.
📇 Effortless Contact Management. Users can easily add multiple business contacts to their listing. A simple "Add More Contacts" button lets them create a list of people, up to the limit allowed by their chosen package. Each contact is neatly organized and saved with their main submission.
The Impact: A Streamlined and User-Friendly Portal
The final result was a transformation from a simple data-entry task into a powerful, interactive portal that delivered significant benefits👇:
🚀🚀 Dramatically Improved User Experience: The guided, step-by-step process, combined with the live preview and auto-save functionality, provided advertisers with a smooth, intuitive, and frustration-free experience.
💪💪 Increased Efficiency for Admins: The self-service nature of the portal completely automated the submission process. Admins receive complete, validated, and well-structured data, eliminating the need for manual data entry, follow-ups, or creating proofs.
📈📈 Higher Conversion and Completion Rates: By removing friction and giving users confidence in what they were submitting, the portal reduced drop-off rates and led to a higher number of successfully completed advertising contracts.
The Tools: A Combination of Velo APIs and standard UI elements
To build this custom application, we leveraged several key Velo and Wix platform features👇:
👉 Wix Velo: The foundation for all front-end interactivity and backend logic.
👉 Wix Data: Used to create, query, and update the AdvertisingContractSubmissions and ContractContacts collections, forming the backbone of the auto-save feature.
👉 Multi-State Boxes: To create the seamless, multi-step form flow without page reloads.
👉 Repeaters: To dynamically display and manage the list of contact persons.
👉 Wix Members Frontend: To identify the current user, pre-fill their details, and associate submissions with their account.
👉 JSW (Web Modules): To handle secure backend operations, such as sending confirmation emails to both the advertiser and admin upon final submission.
From Static Form to Dynamic Portal
This project is a clear example of how Wix Velo can be used to build web applications that go far beyond standard website functionality. By combining various Velo APIs, we transformed a complex business requirement into a robust, automated, and user-centric portal that saves time for everyone involved.
📩 Need to build a custom, interactive portal on your Wix site? Let’s create it together!
Comments