How would you do step forms the Remix way?

[nimabrownlee]

Obviously it seems Remix is great at doing single forms. But is there a way to do divide a form into multiple steps, each with validation? Then at the last step submitting it.

Obviously this is easy with any react form library, saving the state from each step and then submitting it at last step.

[KaRkY]

I would submit every step and save state in session like we did before SPA's.

[hollandThomas]

Either that or wire up some client state yourself, which you can still do with Remix. It's "just React" after all. I do agree though that it would be nice if Remix treated this as a first class citizen and handed you some helpers in case you don't want to implement sessions.

[kiliman]

I don't know. I kind of like that Remix provides low level tools and is not too opinionated, especially with something as complex and varied as forms.

I would build my own abstractions on it or pick a library that suits your needs.

[kiliman]

Not to say they couldn't provide some guidance via examples or document different ways. But I don't think there's a one-size-fits-all solution.

[nimabrownlee]

Some guidance on this would definitely be helptful as I'm not sure which one is better. For my case, the form data is also saved in localStorage so the user can continue where he left off. Should I save it in both sessionStorage and localStorage?

Also each step depend on each other, does that mean I have to session.get all the time?

[Jarrodsz]

Also interested in this.

This would make a great example.

Anyone figured this out already and would want to share some example code or anyone of the 'core team' could provide an example in the https://github.com/remix-run/examples ?

React final form has an example on multi step form wizard. Not sure how to implement in remix.

[kiliman]

Here's a sample I created on CodeSandobx

https://codesandbox.io/s/remix-multipage-form-nhzfy6

[Jarrodsz]

I tried this example, only in the last step it returns an empty {}
Perhaps this could be a good example for the example repro? is that a bug / maybe because remix was upgraded the last months the example is not fully working anymore.

Also would you have a suggestion on how to split the pages into seperate router files?

[kirandash]

Here's a sample I created on CodeSandobx

codesandbox.io/s/remix-multipage-form-nhzfy6

Thanks for the sample code.

is it safe to use this approach if one of my form has a "password" field? I am bit concerned about saving password in a session. And currently using UI state to save the password with setState and call the APIs in component instead of action.

What would you suggest? Use session or ui state for keeping track of the password?

[kiliman]

If you're using session cookies, as long as you're using secure and httpOnly cookies (see the example in docs), you should be fine.

const { getSession, commitSession, destroySession } =
  createCookieSessionStorage<SessionData, SessionFlashData>(
    {
      // a Cookie from `createCookie` or the CookieOptions to create one
      cookie: {
        name: "__session",

        // all of these are optional
        domain: "remix.run",
        // Expires can also be set (although maxAge overrides it when used in combination).
        // Note that this method is NOT recommended as `new Date` creates only one date on each server deployment, not a dynamic date in the future!
        //
        // expires: new Date(Date.now() + 60_000),
        httpOnly: true,
        maxAge: 60,
        path: "/",
        sameSite: "lax",
        secrets: ["s3cret1"],
        secure: true,
      },
    }
  );

[thoth-seshat]

I don't feel like there is a clear answer yet. For instance, I have a form that doesn't really ever get saved on my severs, I'm doing a bunch of interactions with 3rd parties but need to still have a multi step form.

[machour]

There are no clear answers cause there are many answers possible. It's like asking "what's the best way to store data". The answer totally depends on your requirements and what you're trying to achieve.

If you want it client side only, handle it client side with a state.
If you don't mind using the server, use a session with a cookie.

[dan-cooke]

I do think there could be a nice library to make the process easier, I've been toying with building one for a while

[dan-cooke]

Hey all - I have created a really simple library that makes creating wizard forms much easier

https://github.com/dan-cooke/remix-wizard

1. Create a wizard and specify your routes

export const onboardingWizard = createWizard({
  name: 'onboarding-wizard',
  routes: [
	'/onboarding/org',
	'/onboarding/users',
	'/onboaring/finish'
  ],
});

2. Import your wizard and call register in your action

import { onboardingWizard } from './onboarding.server'

export const action = ({ request }) => {
    const { save, nextStep, jumpToStep, prevStep } =
      await onboardingWizard.register(request);

    // Save arbitary data to the wizard session
    save('userProfile', { name: 'John Doe' });

    // Jump to a specific step
    if (request.url.searchParams.get('skip')){
      // You can do it by string
      return jumpToStep("/onboarding/finish");

      // Or by index
      // return jumpToStep(3);
    }

    // Go to the next step
    return nextStep();

}

3. Call register in your loader to access previously stored data

export const loader = async ({ request }) => {
    const { data } = await onboardingWizard.register(request);

    return data?.['userProfile'] || {};
};

Its nothing more than a really small wrapper around the SessionStorage API - setting cookies etc.

But I always found this process very boiler-platey. So I will be using this library for all future projects

[turq84]

I found a solution that works for me and I want to pass it on.

The short answer
On the last step, place your state field values (formValues for me) inside a hidden input. Give the hidden input a name, such as "form data". When you submit the form, the values in the hidden input will be sent to the actions function. From there, use the data as you like. :) It doesn't matter how many fields or steps you have, as long as the data is stored in the state that is being passed in the hidden input field on the last step.

<input
    type="hidden"
    name="form data"
    value={JSON.stringify(formValues)}
/>

The long answer
I had my field values stored in a formValues state and I was displaying one question at a time. Nothing new there. However, when the "Next" button was clicked, the data was submitted, and the next question was displayed the input data wasn't sent to the action function. My guess is the next question was displayed too quickly for the Form component to do its thing.

// states
const [currentQuestion, setCurrentQuestion] = useState<number>(0);
const [showSummary, setShowSummary] = useState<boolean>(false);
const [formValues, setFormValues] = useState<{
    fieldName: string;
  }>({
    fieldName: '',
  });

For my form navigation, I would check if the current question was the last question and display the proper Next button. If it wasn't the last step, the button type was button otherwise it was submit.

// functionality to display the next question
const handleNext = async () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      setShowSummary(true);
    }
  };

For my case, I displayed the hidden input field in the summary section. That way the button type is submit and the input data will be passed to the actions function. In my actions function, I parsed the form data.

// hidden input from the summary section (last step)
<input
    type="hidden"
    name="form data"
    value={JSON.stringify(formValues)}
/>

// Action function
const form = new URLSearchParams(await request.text());
const formData = JSON.parse(form.get('form data'));
console.log('>>>>>>> FIELD NAME: ', formData. fieldName);

I hope this helps anyone who needs it.

[kldeb]

I'm starting with a hard-coded routes approach for each step. We will revisit later. We're fortunate in our case the stepper matches our database design so at every step we will save data before moving the user to the next step.

I'm not a fan of storing state on the client or in a session. I think there are advantages to having partial data in the db but that's just my opinion based on my use case.

I think a nested route approach might be nice to try...

[saurabhp75]

I'm starting with a hard-coded routes approach for each step. We will revisit later. We're fortunate in our case the stepper matches our database design so at every step we will save data before moving the user to the next step.

I'm not a fan of storing state on the client or in a session. I think there are advantages to having partial data in the db but that's just my opinion based on my use case.

I think a nested route approach might be nice to try...

How you handle revert when any of the step fails or user navigates away without completing the final step?

[kldeb]

in our case a final step is just a confirmation and a status creation (submission complete record added to a logging style status table).

Because we have partial data in the db we can tell with a few queries where the user left off and we can display a continue button that points directly to the next step in the flow from other parts of the app (or send them reminders).