Version: next

Add registration question

Learn how to add a question to your registration form and improve your user experience.

Add a new attribute

First, you need to add a new attribute. Follow this guide to learn how to do it.

Add the form to the page

Create a new extension

Create and register a new extension :

extensions/register-with-question/index.ts
import { defineRemixExtension } from "@front-commerce/remix";
import path from "node:path";

export default function registerWithQuestion() {
  const basePath = "extensions/register-with-question";

  return defineRemixExtension({
    meta: import.meta,
    name: "register-with-question",
    routes: import.meta.url,
    theme: path.join(basePath, "theme"),
    translations: path.join(basePath, "lang"),
  });
}

front-commerce.config.ts
import { defineConfig } from "@front-commerce/core/config";
import themeChocolatine from "@front-commerce/theme-chocolatine";
import storesConfig from "./app/config/stores";
import magento2 from "@front-commerce/magento2";
import registerWithQuestion from "extensions/register-with-question";
// ...

export default defineConfig({
  extensions: [
    themeChocolatine(),
    magento2({ storesConfig }),
    registerWithQuestion(),
  ],
  // ...
});

Override the register form module

The source code for the Account creation page is located at theme/modules/User/RegisterForm/. Copy it into your extension. (If you don't know how to locate the source code for a page, click here.)

mkdir -p extensions/register-with-question/theme/modules/User/
cp -r node_modules/@front-commerce/theme-chocolatine/theme/modules/User/RegisterForm/ \
extensions/register-with-question/theme/modules/User/

Copy also the register route :

mkdir -p extensions/register-with-question/routes/
cp -r node_modules/@front-commerce/theme-chocolatine/routes/_main.register.tsx \
extensions/register-with-question/routes/

Modify the form

Edit RegisterForm.tsx as shown below. This adds the actual form field seen on the page.

extensions/register-with-question/theme/modules/User/RegisterForm/RegisterForm.tsx
// More code here
import {
  Text,
  Email,
  Password,
  PasswordStrengthHint,
  Hidden,
  Checkbox,
  TitleSelect,
  Textarea
} from "theme/components/atoms/Forms/Input";
// More code here

const messages = defineMessages({
  // More code here
  titleLabel: {
    id: "modules.User.RegisterForm.title",
    defaultMessage: "Title",
  },
  questionLabel: {
    id: "modules.User.RegisterForm.question",
    defaultMessage: "Question",
  },
});

// More code here
            <Password
              name="password_confirmation"
              id="password_confirmation"
              autoComplete="new-password"
              required
              aria-label={intl.formatMessage(
                messages.passwordConfirmationLabel
              )}
              placeholder={intl.formatMessage(
                messages.passwordConfirmationLabel
              )}
            />
            <Textarea
              name="question"
              id="question"
              aria-label={intl.formatMessage(messages.questionLabel)}
              placeholder={intl.formatMessage(messages.questionLabel)}
            />
            <Checkbox
              name="newsletter"
              id="newsletter"
              label={intl.formatMessage(messages.newsletterLabel)}
            />
      // More code here

warning

Don't forget to update your translation files in extensions/register-with-question/lang/[locale].json. More info in the guide Translate your application

Edit the customer in extensions/register-with-question/routes/_main.register.tsx as shown below. This includes the user input from the field in the data passed to the mutation.

extensions/register-with-question/routes/_main.register.tsx
const customer = {
  email: userInput.email,
  title: userInput.title,
  firstname: userInput.firstname,
  lastname: userInput.lastname,
  password: userInput.password,
  question: userInput.question,
  is_subscribed_to_newsletter: Boolean(userInput.newsletter),
  order_id: userInput.orderId,
  ...additionalDatas,
};

Update the GraphQL schema

Create a new GraphQL module

Create and register a new GraphQL module :

extensions/register-with-question/graphql/index.ts
import { createGraphQLModule } from "@front-commerce/core/graphql";

export default createGraphQLModule({
  namespace: "Extension/RegisterWithQuestion",
});

extensions/register-with-question/index.ts
import { defineRemixExtension } from "@front-commerce/remix";
import path from "node:path";
import registerWithQuestionModule from "./graphql";

export default function registerWithQuestion() {
  const basePath = "extensions/register-with-question";

  return defineRemixExtension({
    meta: import.meta,
    name: "register-with-question",
    routes: import.meta.url,
    theme: path.join(basePath, "theme"),
    graphql: {
      modules: [registerWithQuestionModule],
    },
  });
}

Extend RegisterCustomerInput

Since our form now includes a new field, we need to modify the input type in our GraphQL mutation.

extensions/register-with-question/graphql/index.ts
import { createGraphQLModule } from "@front-commerce/core/graphql";

export default createGraphQLModule({
  namespace: "Extension/RegisterWithQuestion",
  dependencies: ["Front-Commerce/Customer"],
  typeDefs: /* GraphQL */ `
    extend input RegisterCustomerInput {
      question: String
    }
  `,
});

Conclusion

By following these steps, you have successfully added a custom question to your registration form.