1. Home
  2. WholesaleX
  3. Registration Form Builder

Registration Form Builder

The WholesaleX Registration Form Builder allows you to create a separate registration & login form with additional custom fields. So you can make your customer acquisition process much simpler and more effective. 

Read the full documentation to understand how to use it effortlessly and effectively.

How to Create a Custom Registration & Login Form

So without further ado let’s start creating a custom registration form. Follow the step-by-step guide and you will also be able to create your form without facing difficulties. You can also watch the tutorial video if you don’t like to read.

Step – 1. Go to the Registration Form Builder

If you already have installed & activated the WholesaleX plugin, you will see the registration form along with the other options. Click on the option to start the process.

Go to Registration Form Builder

Step – 2. Enable Login Form (Optional)

Here, you will see a default registration form. I would recommend you enable the login form as well to avoid any confusion.

Enable Login Form

Step – 3. Import Premade a Premade Design

Now, let’s import a premade design to speed up the process. However, will also explore all the available customization options in the later part of this documentation.

Premade Templates

To import a premade design, click on the “Premade Desing” option. Here, will see  9 premade design options. Explore and decide which design suits your needs. Click on the import button to use your desired template.

Import Template

Step – 4. Add Your Desired Fields 

You may want to add some more fields as the default form has only a limited number of fields. For that, you need to click on the “+” icon. Here you will see all your desired fields. Click on the field that you want to add the form. 

If you don’t find any field, you can explore the extra field option to create a custom one. I will explain more about creating custom fields also. For now, let’s create a simple form.

Once you are satisfied with the fields click on the “Save Form Changes” button. That’s all your custom form is ready.

How to Create a Separate Registration & Login Page

As we have created the custom registration form, now it’s time to use it to create a Separate Registration & Login page. For that, just follow the below steps.

Step – 1. Create a New Page

First of all, hover on the “All Pages” option and click on the “Add New” page button to create a new page that will be your custom registration page.

add new page

Now add a name to the page, for example, I am adding the name “Registration & Login.”

Step – 2. Add WholesaleX Forms Block

Then, click on the “+” and select the WholesaleX “Forms” blocks to add the form to the page.

adding form

After adding the form to the page, you need to enable the “With Login” option, if you want to add the login form along with the registration form.

Enable Login Form

Moreover, you need to select the type of form between Global, B2C, and B2B roles that you have created using the WholesaleX role creation feature.

Choosing Form Type

Selecting the Global option will allow all types of users (B2B and B2C) to use the form. You need to select other available options if you want to create separate registration forms for a specific user type.

Note: All of your B2B user roles will be available here, so you can create separate login forms for each of your B2B user roles if required.

Publish the Page

Once you are done with the configuration you can click on the Publish button to make it live. Then you can check it from a user perspective to make sure everything is working perfectly.

Final Output of Registration and Login Page

How to Create a Separate Registration & Login Page Via Shortcode

Creating a separate registration page using a shortcode use for the users who don’t use Gutenberg. It is very effective if you have a third-party builder like Elementor. 

So let’s explore the steps for that.

Step – 1. Copy Shortcode

First, go to the Registration Form builder and click on the “Get Shortcodes” button. Here, you can see all available options. 

Get Shortcode

As I told you before, you can choose the global form for making one registration page for all types of users and choose other options to make specific forms.

Copy Shortcode

For now, let’s go with the Global form option by clicking on the Copy Button. Don’t forget to click on the “With Login Form” checkbox to make it available along with the registration form.

Step – 2. Paste the Shortcode

Now, go to the page where you want to add the registration & login form. Then you can paste the shortcode in the editor and the form will be added to the page if you are using Gutenberg.

However, the process is a bit different if you use any third-party builder. If you are using any of the builders like Elementor, add the “Shortcode” widget and then paste the shortcode. That’s all the form will be available on the page.

Customization Options 

So as you have already explored the way of creating custom registration and login pages, now it’s time to explore the opportunities. With the WholesaleX form builder, you get numerous customization options. Let’s explore opportunities separately to get a better understanding.

Field Customization

Let’s start the field customization options. Once you select any of the fields you will see a gear icon (settings). Clicking on the icon will open the available options.

Here you can see two tabs one is for the field settings another is for making this field conditional. For now, we explore only the field settings options. 

Field Customization

At the top position three enable or disable the following options:

Field Status: Disabling this option will hide this field from the users.

Required: Enable this option if you want to make this field mandatory.

Hide Level: Enabling this option will hide the level text.

Then we exclude this field from any of the user groups by selecting the user role from the dropdown. So, the users of the selected will not see the field.

Moreover, we can add custom text Field Level, Placeholder, and Help Message. Field Level is the name of the field, Placeholder is an example of what the users need to type here.

And, the Help message is for adding any text to educate users of the requirements of the field. It is very effective in avoiding confusion about a field.

Custom Fields

If you want to add a custom field, click on the “+” icon. Here, you can see two options, Default and Extra fields. 

Custom Fields

For adding a custom field, you need to look for an appropriate option on the extra field options. Here are the available custom field options:

  • Text
  • Text Area
  • Radio
  • Checkbox
  • File
  • Select
  • Email
  • Number 
  • Date

So, choose your desired field and adjust it as per requirements. For example, you want to add a field for the Tax Identification Number. For that, you can add the Text field to your registration form. Then you need to change the name field name and placeholder text as per your requirements.

Custom Fields Customization

Similarly, you can add as many custom fields as you want. The custom fields have some additional settings. To explore them, click on the settings options of any custom field and scroll down to the WooCommerce option section.

Adding Custom Filed to Default Registration Form

Here you can see three options. You can use these options to add this specific field to the Default WooCommerce Registration and Billing Form (at the Checkout Page). Moreover, you can also make this field mandatory in the billing form.

Add Custom Field to Billing Form

Conditional Field Setup

The custom fields also come with the option to set conditions based on other fields. So you can display hide and custom fields based on predefined conditions. For example, I want to display only the Tax Identification Number field if someone selects the B2B Gold user role.

In this situation, I need to open the setting section of the Tax Identification Number and add the required condition. From the settings section, we need to select the Condition Tab. Here we can see the condition setting options.

Conditional Field Setup

First of all, we need to decide and select whether we want to show or hide the field upon condition completion. Then we need to select the operator between all or any. As we can add multiple conditions we need to select whether any specific or all conditions are required to show or hide this field.

Visibility and Operator

Now, we can set the conditions as per our requirements.  Here you can see three options, Field, Condition, and Value. From the field option, we need to select the dependent field,  from the condition option we need to select between Equal and Not Equal and add on triggering value in the value option.

So this specific field will be displayed or hidden once the value of the dependent field is equal or not equal to the value that we have added while configuring the conditional field.

Before you get confused, let me create an example conditional field. Let’s say we want to display the Tax Identification Number field once someone selects the B2B user roles.

In this type of scenario, we need to select the user role field. Select Equal Condition. And add the B2B user role ID in the value section.

Condition Configuration

You can get the user ID from the Select Role field. Just click on the settings section of the field and scroll down a bit. Here you can see the Role ID along with the Role name after the separator in the Options section.

Role Id

So similarly you can create conditional fields as per your requirements.

Column Option

You can use the column option if you want to display two fields side by side. Let’s say we want to add the First Name and Last name fields side by side. So we need to select the First Name field and then click on the two-column icon. Now, we can add the Last Name field by clicking on the plus icon.

Column Option

Rearrange Fileds

If you are not satisfied with the arrangement of the fields you can rearrange them effortlessly. Just click on a field and drag it to your desired position. 

rearrange fields

Styling & Formatting 

You have full customization freedom in the styling and formatting section. Starting with the premade template, you can also enable or disable the Form titles and Login Form.

Then you can choose between 8 input styles.

Input Styles

Moreover, you have the full customization options for:

  • Colors
  • Typography
  • Size and Spacing

Let’s explore all of the above-mentioned settings.  

Color Settings

From this section, you can select desired colors for Field, Button, and Container. Not only but you can also set different colors for Login and Registration forms.

You can open the full customization options by clicking the subitems. Once you click on two more sub-items, Login and Registration. So you can set different colors for the elements of the Login and Registration page.

Color Settings

Moreover, you can add separate color-adding options for the three states. Which are 

Normal: It is the default preview of the fields/elements of the registration and login forms. You are getting the following color-changing options for this state:

  • Level
  • Input Text
  • Background
  • Border
  • Place Holder

Active: It refers to the preview of a field/elements while filling up the fields. So the color changes you made will be visible to the users when start filling up a field. And here are the color-changing options:

  • Level
  • Input Text
  • Background
  • Border

Warning:  It refers to error detection of the field data validation. So if someone adds any wrong information it will show a warning. Here are the color-changing options for this state:

  • Level
  • Input Text
  • Background
  • Border

Similarly, you also have color-changing options for Buttons and Containers.

Typography Settings

From this section, you can customize the typography settings of the fields and buttons. Let’s see the available options:

Field: Here, you can change the font size, and weight and transform the text case of both Label and Input elements.

Button: For buttons also, you can change the font size, and weight and transform the text cases.

Typography Settings

Size and Spacing Settings

Last but not least, you have the option to customize the size and spacing of the Input, Button, and Container. Here are the available options:

  • Padding 
  • Max Width 
  • Border 
  • Border Radius
  • Padding
  • Separator
Size and Spacing Settings
Was this article helpful to you? Yes No

How can we help?