Multi-part complicated forms
I am pretty new to front end development.
I am building with Next.js for the front end, I am building an app that is a multipart form for building a rather large json eventually. Wondering what the best approach is. In particular I am not sure what the best approach is on the front end.
13 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
Can you share a bit more about your use case?
Nothing that special of my use case
Just a multi page form like for instance a tax return
Gotcha. I’m honestly not clear on whether Convex actually supports multipart form data. But I’d also recommend considering not approaching it that way if you have the option. Convex queries and mutations with react state provide the primitives to build complex forms without using multipart.
Yeah I’m just not clear on how to handle the mechanics of that in the front end
Are you using any kind of library for the form's state, or a form library of any kind? Depending on the framework you're building with on the frontend they my have a specific approach for handling forms. If not a library like TanStack Form can be super helpful. Complex forms are just hard to do well.
https://tanstack.com/form/latest
TanStack Form
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid and Lit
multipart forms are mostly used for uploading files these days
Are you describing a “form wizard”?
Yes
Further I’m just having a hard time figuring out where to look for how I should go about things on the front end
The examples and documentation have been enough for me to figure out what I’m doing on the backend, but on the front end even when I get it working I always feel like I should be doing things differently
I’m using tailwind and next.js but I’m not really married to anything on the front end
You probably already know this, but you're going to have to get pretty comfy with frontend to make a multi-page tax form. The tools you choose can help, but there's no silver bullet. I suspect you'll have a bit less to wrap your head around with TanStack vs Next, but it might all feel the same to you.
In abstract, I'm guessing you have a "Save & Continue" button of some sort on each page of this form. You want to use
useMutation to run a mutation that stores the form data in your Convex database each time the user hits save. This could happen a few different ways, there isn't really one right way. Given that you're going to want to have validation in your form fields, even if using Next, I would recommend using TanStack Form to handle the form itself. That gives you documented processes for managing form state, submitting (which ultimately calls your Convex mutation), and validation.Is there a convex example out there
There are a few projects that use forms with Convex on the templates page: https://www.convex.dev/templates
This one is a form builder: https://www.convex.dev/templates/form-builder
Convex
Informal: Form Builder
Create. customize and deploy forms, collect responses.
Build surveys, registrations, feedback, quizzes, and more!
Features:
- Design forms with unlimited fields.
- Collect responses.
- View user submissions in real-time.
- Fully reactive and cloud-based.
- Easily deploy to Vercel, Netflify or similar.