Creating multi step form

Hi there! I'm trying to create a multi step form in React with NextJS.
Each step is a question that may contain an input or a select. I already created a Hero component and I was planning to create some variants so the user may add multiple question with different type of Hero slices. There's any way to do something like this in Prismic?

I tried looping the slices property and manually render but it doesn't work, and if I use SliceZone it renders all slices at once. The idea is that the user clicks next and renders the next Hero, etc...

Maybe I'm thinking it wrong and I should use a custom type with a group of steps and create the component manually with the values but I will be basically repeating the hero logic.

Any advice would be appreciated.


Based on your description, it sounds like you're looking to make what sounds like a form "carousel" hero. You want this to be a slice so it can be put onto any page(s) rather than it being a page type itself. Does that accurately sum up the vision?

If you're looking for a "Form Builder," I have yet to really sort something like this out. My experience has been making a Form slice and the default is say a "Contact Us" form. This is coded as the default and the editing team can customize portions of the form like the placeholder text, the labels, and the button text. Other forms are just variations.

I'm just thinking out loud here. Seems like your component would:

1. Need to be a client component
2. Use state to store which question is visible

I suppose my only real suggestion would be to code out a prototype and then see how you could make this into Prismic fields. Sorry. I don't think I was much help.

It's always good to think out loud! :) Yes it's more like a carousel. To picture the design, it's a title at the top with a dash for each question in the carousel and the current dash is highlighted. At the center there's one question to answer and at the bottom the controls to move to the next question or go back.
I thought about creating a slice where the repeatable zone contains all the questions needed, that makes sense as well, but what I'm trying to achieve is that the user could select multiple variations of the question, because one question may be an input but there're others like multiple choice, so I was thinking if there's some way to put another Slice there so they pick the variations.
Again I just started with Prismic and maybe I'm thinking it wrong.

Hi @jsfunicello ,

I would recommend creating your form in another service and embedding it in Prismic using an embed field: