Wasp•7mo ago

How to change the order of fields in in signup page

Hello, I have added additional fields to signup form but all additional fields appear under the password and email fields, which I do not like and would like to change it:

       <SignupForm
        additionalFields={[
          {
            name: 'name',
            label: 'Name',
            type: 'input',
            validations: {

              required: 'Name is required',
            },
          },
          {
            name: 'companyName',
            label: 'Company Name',
            type: 'input',
            validations: {
              required: 'Company Name is required',
            },
          },
        ]}
      />

       <SignupForm
        additionalFields={[
          {
            name: 'name',
            label: 'Name',
            type: 'input',
            validations: {

              required: 'Name is required',
            },
          },
          {
            name: 'companyName',
            label: 'Company Name',
            type: 'input',
            validations: {
              required: 'Company Name is required',
            },
          },
        ]}
      />

How can I do so the order o my fields would be: 1) name 2) email 3) company name 4) password Thank you in advance!

3 Replies

kapa.ai•7mo ago

Hi @abehod. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Currently, the Wasp framework's SignupForm component places additional fields after the default fields (email and password). As per the Wasp documentation (https://wasp-lang.dev/docs/auth/overview#2-customizing-the-signup-component), the additionalFields prop is used to add extra fields to the form, but it doesn't allow reordering of the default fields. However, if you need finer control over the form fields and their order, you can create your own custom signup form using the signup function provided by Wasp. This was suggested by a community member in a Discord support thread (https://discord.com/channels/686873244791210014/1220299304087060510). Here is an example of how you can import the signup function:

import { signup } from "wasp/client/auth";

import { signup } from "wasp/client/auth";

Please note that when creating your own form, you'll also need to define a userSignupFields function as described in the Wasp documentation (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process). Remember, this approach requires more coding and understanding of how Wasp's authentication works, as you'll be building your own form instead of using the pre-built SignupForm component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

martinsos•7mo ago

Unfotunately I don't think you can change that at the moment! We will be likely making it more flexible at some point, but not yet there. You can implement your own form and use Wasp's underlying logic, there is info about that in the docs though, if you need that level of control.

abehodOP•7mo ago

Thank you for your asnwer! I have decided to implement my own form for such customization.

Gaming

Programming

How to change the order of fields in in signup page