additionalFields above in SignupForm
I am using this code to add additionalField for user's display name in my app. It shows at the bottom of the form.
How can I show it in top of the form, above/before all other fields? 💻 ❓
3 Replies
Hi @Amar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Currently, Wasp's
SignupForm component doesn't provide a way to reorder the default fields or place additional fields before them. The additionalFields prop only allows you to add fields that will appear after the default fields.
This limitation has been noted by other community members as well. As one community member mentioned in a Discord thread:
"I am just wondering is there anyway to reorder the fields in the auth form? I have added in 2 new fields, first name and last name. And ideally i would like those to appear before the password field but at the moment it seems it can only go after them with the additonalFields prop" Discord support threadThe recommended alternative is to create your own custom signup form using Wasp's auth functions: With this approach, you'll need to build your own form from scratch, but you'll have complete control over the order of the fields. Just make sure to also define a
userSignupFields function as described in the Customizing the Signup Process documentation to handle the additional fields on the server side.
If you prefer to keep using Wasp's built-in UI components but need more control over field ordering, you might want to consider submitting a feature request to the Wasp team.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Amar, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@Amar, as an alternative you could create an onboarding wrapper on first login
I came to the same point of consideration since I want to collect some marketing / statistics data when users sign up that the registration page didn't provide.
I opted to wrap the entire webapp in a onboarding wrapper.
1) added a "isonboardingcomplete" boolean true/false to my user entities
2) a basic middleware config to force users to complete the onboarding form before the server allows any components in my app to be accessible.
3) The app checks if isonboardingcomplete = false on every sign-in, if =false renders the onboarding modal which is just a fancy looking form with some mandatory fields marked with *
First Name*
Last Name*
Company Name
Role
etc...
You could add any fields you want realistically, just create entities in your user model within schema.prisma & define the config/actions in main.wasp to store them in the DB.
I modified the user account settings page to display some of the values collected from onboarding
I could share a boilerplate version of the implementation if you're interested
Side note, I'm considering implementing https://react-joyride.com at some point which I'm sure follows a similar implementation of wrapping the app in a demo
Hey @Amar, both approaches work.
You can do it either by:
1. making your own signup UI
2. creating another modal which will pick up additional information post sign up
👋