Built with Framer
Framer Build: Guided Multi-Step Service Form
Tolulope Amao
Designing a Guided Multi-Step Service Form in Framer
A lightweight, interactive service-selection experience built with Framer AI and FormSubmit
Overview
I wanted to explore how far I could push Framer beyond traditional marketing websites by building a more interactive, functional experience.
For this project, I designed and built a multi-step service selection form that guides users through a short series of decisions before collecting their information and submitting the completed request.
Instead of presenting users with a long form upfront, the experience progressively asks them to make decisions based on what they need.
The project was built in Framer, with Framer AI helping accelerate the implementation, while FormSubmit was used as the email endpoint for handling completed submissions.
The result is a lightweight, conversion-focused form experience without the need for a traditional backend.
The Challenge
Most service inquiry forms follow the same pattern:
Name - Email - Phone - Message - Submit.
The problem is that this approach puts the burden on the user to explain exactly what they need.
I wanted to create something different.
Rather than asking users to write a long description of their requirements, I designed the form to guide them through the decision-making process.
The form would ask simple questions, allow users to select from predefined options and progressively narrow down what they were looking for.
The idea was to make submitting an inquiry feel less like filling out a form and more like having a short conversation.
The User Flow
The experience is structured around a simple progression:
Choose your path → Select services → Provide details → Submit
This keeps the user’s attention focused on one decision at a time.
⸻
Step 01 — Choose an Option
The first step immediately asks the user to choose between two available options.
Rather than opening with multiple text fields, the experience starts with a simple decision.
The user selects the option that best describes what they’re looking for.
This serves two purposes:
It reduces the initial cognitive load.
It establishes context for the rest of the form.
Instead of asking users to explain everything upfront, the form begins by understanding what direction they’re taking.
⸻
Step 02 — Select Your Services
Once the user has chosen their initial option, they move into the service selection stage.
Here, users can choose from the services we provide.
Rather than forcing someone to type out their requirements manually, the form presents the available services as selectable options.
This makes the process:
Faster to complete
Easier to understand
More structured
Less intimidating
Easier to process on the receiving end
Users can select the services that are relevant to their needs before moving to the next stage.
⸻
Step 03 — Additional Information
After selecting their services, the user can provide additional information about their request.
At this point, the form already has some context about what they need.
That means the user isn’t starting from zero.
The previous selections help establish the foundation for the inquiry, while the additional information allows them to provide anything that isn’t captured by the predefined options.
⸻
Step 04 — Contact & Submission
The final stage collects the necessary contact information and gives the user a clear path to submit their request.
The goal was to keep this stage straightforward.
By the time users reach this point, they’ve already completed the more engaging part of the experience.
They’ve chosen what they’re interested in and provided context.
All that’s left is to provide their details and submit.
Designing the Experience
The form was designed around one central principle:
Reduce the amount of thinking required at every step.
Instead of presenting a large form with multiple questions, I broke the experience into smaller decisions.
Each screen has a clear purpose.
Choose - Select - Describe - Submit.
This creates a much more approachable experience than a traditional long-form contact page.
Interaction Design
I wanted the form to feel interactive without becoming unnecessarily complicated.
The core interaction pattern revolves around selectable cards/options, clear navigation and progressive disclosure.
Users can:
Select an option
Move forward to the next stage
Go back and change previous selections
Select multiple relevant services
Continue through the flow
Submit their completed request
This creates a sense of progression while giving users control over their responses.
Building It in Framer
I built the experience directly in Framer.
I also used Framer AI to accelerate parts of the implementation and quickly explore how the experience could be structured.
Rather than treating the AI-generated output as the final product, I used it as a starting point and refined the experience around the actual interaction requirements.
I adjusted the structure, layout, interactions and responsive behavior to make the experience feel intentional.
This allowed me to move quickly from concept to a functional prototype and then refine the details manually.
Connecting the Form
One of the interesting parts of the project was handling submissions.
I didn’t want to introduce a custom backend for a relatively straightforward service inquiry workflow.
Instead, I connected the form to FormSubmit as the email endpoint.
The final flow works like this:
User - Selects their initial option - Chooses relevant services - Provides additional information - Submits the form - FormSubmit endpoint - Submission delivered via email
This kept the implementation lightweight while still making the form functional.
Responsive Design
Because the form is interaction-heavy, responsiveness was especially important.
The experience needed to work well whether someone was selecting options on a desktop or tapping through the form on a mobile device.
I paid particular attention to:
Touch-friendly selection areas
Readable typography
Button placement
Spacing between options
Form field sizing
Navigation controls
Overall visual hierarchy
The goal was to make the experience feel equally natural across screen sizes.
The Result
The final result is a functional, guided service-selection experience built in Framer.
Instead of asking users to fill out a traditional contact form, the experience guides them through a short sequence of decisions.
The experience:
Choose between two initial options
Select the services they’re interested in
Provide additional project information
Enter their contact details
Submit the request
And behind the scenes, FormSubmit handles the submission endpoint and delivers the information through email.
Why I Built It This Way
The project was ultimately about reducing friction.
A traditional contact form asks:
“Tell us what you need.”
A guided form asks:
“Which of these best describes what you need?”
That small difference can make the experience much easier for users.
Predefined choices reduce the amount of writing required, while the step-by-step structure makes the overall task feel more manageable.
What I Learned
Good forms don’t just collect information. They guide decisions.
The most important takeaway from this project was that form design is really an exercise in interaction design.
The experience needs to answer:
What does the user need to decide?
What information do we actually need?
When should we ask for it?
Can we simplify the decision?
Can we replace typing with selection?
How can we make the process feel shorter?
By thinking about the form as a user journey rather than a collection of fields, the experience became much more intentional.
The Stack
Design + Development: Framer
AI-assisted build: Framer AI
Form submission: FormSubmit
Output: Email
Final Thoughts
This started as an experiment to see what could be built with Framer AI and a lightweight form endpoint.
It became a practical example of how I approach product and interaction design:
Start with the user’s decision-making process.
Simplify the journey.
Design the interaction.
Then figure out the simplest technology needed to make it work.
The result was a service inquiry experience that feels less like a traditional form and more like a guided conversation.
Designed in Framer. Built with Framer AI. Connected with FormSubmit.
Like this project
Posted Aug 7, 2026
A guided, multi-step service flow designed and built in Framer. Users choose a path, select relevant services, add details, and submit through FormSubmit
Likes
0
Views
0
