How to handle multiple forms on one page?

[janhesters]

How to handle the case where you have multiple forms on one page?

For example, let's say you have a button to log in via email and one to log in via Google.

How would your code look like then?

They'll all be handled by the same action, so that part is fine, but what about the useForm hook?

[edmundhung]

You can check these 2 approaches I shared on #37 with one using action with a custom search and the other uses a hidden input. You will need to call useForm hook for each form as demonstrated in the codesandbox.

However, for your example with social login, it would be more common to setup an action for each social login you want to support. You can find some examples from remix-auth-socials. Feel free to ask on the Remix discord if you need further assistance. :)

[janhesters]

@edmundhung Thank you for answering and moving my question to the appropriate place!

I'll check out the resources you provided 🙏

[janhesters]

So in this example, you distinguish between the two examples using a hidden input.

I guess it would also be possible to use a <button name="intent" value="login" type="submit" />, correct?

Basically, using an intent right?

And is this what the intent from conform was for?

Thank you for you help!

[edmundhung]

I would avoid using an intent button to differentiate the forms. As Conform utilise it internally for different purposes, e.g. validate. You will not have a reliable way to identify the form this way.

Conform's intent is an advanced feature based on the button intent pattern. The major usage for now is to customize the validation behavior such as async validation.

[janhesters]

@edmundhung Got it, thank you!