This component is Part of the Essential Components plugin. Browse and insert 30+ components directly in Framer. Start for free
This yoga registration form breaks the registration journey into three focused steps, gently guiding each student through their personal details, class selection and health information. The result is a form that feels as calm and intentional as the practice it represents.
Fully built inside Framer for easy customization
Designed for yoga studios, pilates rooms, wellness retreats, meditation centres, and any holistic health business.
Step Flow Controller :The invisible engine that powers the entire multi-step experience. It handles navigation between steps and includes built-in validation to ensure all inputs are filled before the user moves to the next step.
Navigation Buttons : Fully styled navigation buttons with disabled states, hover effects, and smooth transitions.
Steps : Fully designed steps for collecting user information, i.e., Personal info, Class selection, and Health checklist
Add to Framer project : Copy and paste the Yoga Form component onto your Framer canvas. It comes with the Step Controller, all three steps, the Submit button, and the Navigation buttons.
Unlink and detach the component. Click the Yoga component and select Edit Component, then unlink and detach it. This opens up the full layer structure, so you can see and edit each individual step directly on your canvas.
Understand the layer structure. Once detached, you will see the following layers inside the Yoga Form Component:
Step Controller: This is the invisible engine that manages which step shows at a time. Do not delete this(It should alway be inside a Framer Form)
Step 1, Step 2, Step 3: Each layer contains a unique group of form fields. Only one step is visible to the user at a time.
Submit : A native Framer submit button, which automatically appears on the final step.
Navigation : This layer contains the Back Button and Next Button, which help the user navigate between steps
Customise the form content. Click into any step to edit its fields. You can change labels, placeholder text, dropdown options, and layout . Just make sure to keep the content inside the steps. For labels with multiple select, change to Stack in Mobile so they are stacked horizontally
Do not rename the step layers. The Step Controller finds each step by its layer name. Step 1, Step 2, and Step 3 must remain exactly as named—renaming them will break the navigation.
Style it to match your brand : Select any element and update colours, fonts, and spacing from the right-hand design panel. To change the button colours, select the Back Button or Next Button and use the property controls that appear on the left panel.
Connect your form to a backend. Click the form to set your submission destination. Framer supports multiple integrations, such as email, Google Sheets, or custom webhooks (Airtable, Notion, or any webhook).
8. Test and Publish: Once you are happy with the content and styling, publish your Framer site. Visitors will see a smooth, guided registration flow — one step at a time.
If you want to add a fourth step, create a new frame inside the form, name it exactly Step 4, and place your new fields in the new step. The Step Controller will detect it automatically.
If you want to add extra steps or restructure the form, keep these rules in mind:
Each step frame must be named Step 1, Step 2, Step 3, Step 4, and so on.
If you add a new step, place all its form fields inside that step's frame. Content that sits outside a step frame will always be visible regardless of which step the user is on.
The Submit button and navigation buttons must live outside all step stacks.
Live Preview: https://yogaresgisterform.framer.website/
Kai Studio
