> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Multi-step Forms: A complete guide (multistep) # ${color}[#314AF3](Introduction) Would you like to split your form into multiple steps? With a **multistep calculator form (multi-page form)** you can break long forms into smaller sections, improving user experience and making them less overwhelming. It's different than conditional logic that shows/hides elements one at a time. With a multi-page form, you use the next button to progress the user down the journey of completing the form. ![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image_jxbywx.png) # ${color}[#314AF3](Uses Cases, Benefits & Features) --- * Clean-up Long Forms - Break down the steps to completion of long forms into smaller, more digestible chunks. --- # ${color}[#314AF3](Watch It In Action) ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885_1d3uzxm.jpg) --- # ${color}[#314AF3](How to Activate & Use This Feature) ### Setup In order to use the multi-step feature, you need a minimum of two or more sections. To activate the multi-step, go to the second section in your calculator form and click on the settings icon, on the top right section of the section. Then, click on the **"Activate Multi-step"** switch to turn it on ![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/image_cmxtln.png) || **Note: **You can only activate multi-step forms on the second, third, and later sections. You cannot activate it on the first section as it's shown by default. ### Settings & Options **1. Multi-step Progress Indicator Style** - You can choose between: * **Progress Bar** * **Progress Dots With Title** * **Progress Bar Steps With Title** * **Progress Dots with Numerical Steps** * or no progress bar. ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872884_1smwtp4.jpg) If you select **Progress Dots With Title, **a new option will appear that allows you to configure the mobile view. Enable it if you want only the text for the current step to appear, rather than all steps, on mobile devices. ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872884-2_2fym4m.jpg) **2. Multi-step Progress Buttons Style** - You can choose between: * Space Between Buttons * Space Between Buttons (Only arrows in the text) * Aligned Right Buttons * Aligned Right Buttons (Only arrows in the text) ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872884-1_3l2eny.jpg) --- # ${color}[#314AF3](Frontend Options (What It Looks Like)) ### Progress Indicator Styles ###### Progress Bar ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885_14xart5.jpg) ###### Progress Dots With Title ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-1_5u8n4m.jpg) ###### Progress Bar Steps With Title ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-2_3amtwe.jpg) ###### Progress Dots with Numerical Steps ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-3_1npon1v.jpg) ### Progress Buttons Styles ###### Space Between Buttons ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-4_1l0qlj5.jpg) ###### Space Between Buttons (Only arrows in the text) ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-5_1nw40jo.jpg) ###### Aligned Right Buttons ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-6_jx6kyh.jpg) ###### Aligned Right Buttons (Only arrows in the text) ![](https://storage.crisp.chat/users/helpdesk/website/-/c/5/f/0/c5f0153cc3f4b000/frame-1618872885-7_uyfsw6.jpg) --- # ${color}[#314AF3](Additional Information) #### Related Features [Conditional Logic](/en/article/conditional-logic-a-complete-guide-1nlqkzj/) #### Frequently Asked Question **Q: Can I customize the appearance of the progress bar in the multi-step form?** * Yes, you can choose from different progress bar styles: **Progress Dots With Title**, **Progress Bar Steps With Title**, or a simple **Progress Bar**. Each style provides a different visual representation of the form’s progress. **Q: Can I use the multi-step form feature on the first section of my form?** * No, the multi-step feature can only be activated on the second section and beyond. The first section is always shown by default. **Q: How does the multi-step form differ from using conditional logic?** * Unlike conditional logic, which shows or hides elements based on user input, a multi-step form breaks the form into multiple pages. Users click a "next" button to progress through the form, making it less overwhelming and easier to navigate. #### All Elements & Features Learn more about [All Elements](/en/category/elements-hnffz2/) Learn more about [All Features](/en/category/features-22x2mc/) #### Need Support? Ask a [question or request support](https://stylishcostcalculator.com/support/) Request [a feature or give feedback](https://stylishcostcalculator.com/how-can-we-be-better/) [![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508157/original/Txm2CafyMfEybziVGXvw-BnfU2V-9TJUBg.png?1666381303)](https://stylishcostcalculator.com/features/) [![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508158/original/DWBiVRBRBPATUwVN7APXzDACQgYCwYmXVQ.png?1666381303)](https://stylishcostcalculator.com/templates/)