This is a set of powerful navigation components for creating multi-step forms in Framer. The components allow you to divide your form into separate sections for a better user experience, showing only one section at a time - any way you want. These components work with Framer's native form functionality, meaning you can still use Framer's built-in email sending or Google Sheets integration while providing a more user-friendly experience.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Remix the example file. You should be able to see two components - the divider (next button) and the previous button.
Within your Form element, place the Divider component where you want to split your form into sections.
Add the PreviousBlock component wherever you want to allow users to navigate back to previous sections.
Customize the styling of both components using the property controls to match your design.
No additional setup is required - the components will automatically handle the multi-step functionality. Users can now navigate through your form sections using the Next and Previous buttons. The components validate required fields before allowing progression to the next section.
Your form will still work with Framer's native email sending or Google Sheets integration so you can set it up in the parent form component
For advanced customization, you can set them to absolute position and set opacity to 0 to customize it even further based on your own layers.
This implementation works with Framers native custom forms with two components:
The divider or the next button which divides the form based on your preference
The previous button - which simulate going back to the previous stepp
Place the Divider component at the end of each form section to create natural breaking points. Add the PreviousBlock component anywhere to allow users to navigate back to previous sections. Both components are highly customizable with properties for styling, transitions, and behavior control.
Alternatively, you can set them to absolute position and set opacity to 0 to customize it even further based on your own layers.
For any queries and help setting up the component, contact hello@segmentui.com
Nabeel
