Capture Form Data on the Login/Register Page

On a SuiteCommerce or SuiteCommerce Advanced website, the default registration form contains a set of basic fields to collect the minimum required user information: name, surname, email address, and password. If you want to collect additional information, you can create an extension that uses the LoginRegisterPage component.

The LoginRegisterPage component is available since SuiteCommerce 2019.1. It enables you to add custom fields to the login and registration forms and save the user input in NetSuite. It also provides custom events in the login/register flow that you can listen for – you can use these events to perform pre- or post-processing when either of the forms is submitted.

Note:

Instead of creating a custom extension, you may want to use the Advanced Sign Up extension by Oracle NetSuite. It lets you add custom fields to the Login/Register page on your website, as well as configure how the customer record is created and approved. See Advanced Sign Up for more information.

Overview of How to Capture Form Data

This topic describes how to create an extension based on a scenario in which a business wants to collect additional information from users before they register or log in on your website. You will see how to add an additional field to the registration form to obtain a company’s tax registration number. Because the business only sells to other businesses, you perform some basic validation to make sure the field is not blank. You will also see how to set up the custom fields in NetSuite to store the data.

Steps to Capture Form Data

Follow these steps to create an extension that captures form data on the Login/Register Page:

Create custom fields in NetSuite – The custom fields store the data entered by users on the Login/Register page.
Set up your extension files or create a baseline extension – see Create a Baseline Extension.
Update the entry point file – Instantiate the LoginRegisterPage component and add a child view.
Update the view file – Define a view for the form and create a template with the input fields.
Add input validation – Use the beforeRegister event provided by the LoginRegisterPage component to perform input validation before form submittal.

Create a Custom Field

An essential part of capturing form data on your website is storing the data in NetSuite. When a user registers on your website, the users details are saved on a lead record. If you want to obtain additional information about users, usually when they register or sign up on your website, you need to create custom fields in NetSuite to store the data.

When creating a custom field, you must specify an identifier (ID) for the field. You will then reference that field ID as the name property of a form element in the view template. All custom field IDs start with the prefix "custentity" – the string you type as the field ID is then appended to the prefix, for example, “custentity_myfield”.

Take note of the field ID – you will need to reference the ID in the template file that contains the HTML for the custom fields on the registration form.

To create a custom field in NetSuite

Go to Cusomization > Lists, Records, and Fields > Entity Fields > New.
In the Label field, enter the name of the field as you want it to appear on the customer record in NetSuite.
In the ID field, enter an identifier for the field.

Note:
Use an underscore as the first character of the ID to make the final ID easier to read. For example, if you enter “_comptaxnumber”, the final ID of the field will be “custentity_comptaxnumber”.
On the Applies To tab, check the Customer and the Web Site boxes.
Click Save.

See Creating a Custom Field for more information about custom fields.

Update the Entry Point File

If you created a baseline extension, you already have a starting point for developing your extension. In the main module file of the baseline extension, create an instance of the LoginRegisterPage component in the mountToApp() function (see Instantiating API Components for more information about creating an instance of a component). The LoginRegisterPage component inherits several methods from its parent component, so after checking that the component is not null, add a child view to the Register page with addChildView().

When adding a child view, you must specify the ID of the view placeholder element on the form to which you want to add the child view. The base theme (2019.1 and later) includes empty placeholder elements at the bottom of the login and registration forms. If you are using an earlier theme or another theme, you must add the elements to the theme. The view placeholder for the registration form is <div data-view=”Register.CustomFields”></div>, so pass that in as the first argument to addChildView(). The second argument to addChildView() is a function that returns an instance of the view.

NetSuite.CompanyTaxNumber.Main.js

              define(
  'Vendor.CompanyTaxNumber.MainModule',
  [Vendor.CompanyTaxNumber.MainModule.View],
  function(CompanyTaxNumberView) {
    'use strict';

    return {
      mountToApp: function mountToApp(container) {
        var loginRegisterPageComponent = container.getComponent('LoginRegisterPage');
        
        if (loginRegisterPageComponent) {
          loginRegisterPageComponent.addChildView('Register.CustomFields', function() {
            return new CompanyTaxNumberView(loginRegisterPageComponent);
          });
        }
      }
    }
  }
);

When returning an instance of the view, pass in the LoginRegisterPage component to the view constructor. You will need access to the component in the view to be able to listen for specific events on the Login/Register page.

              return new CompanyTaxNumberView(loginRegisterPageComponent);

Create a View

To capture user input, add a view to the Login/Register page that contains whatever form elements you want to use to capture data, such as text boxes or checkboxes. When the entry point file is called, the view is inserted at placeholders at the bottom of the login and register forms.

Define your view using the SCView class from the extensibility API – see SCView for an example of how to define a view with SCView. Note that in versions of SuiteCommerce Advanced prior to release 20.2, you must create a view with the native View module in Backbone.

The following example is a view for the registration form on the Login/Register page. The view has several dependencies including SCView and the template rendered by the view. The constructor function for the view accepts one argument which should be an instance of the LoginRegisterPage component. It also adds an event listener (beforeRegister) that can be used to validate user input.

NetSuite.CompanyTaxNumber.Main.View.js

              define(
  'NetSuite.CompanyTaxNumber.Main.View',
  [
    'SCView', 
    'jQuery',
    'netsuite_companytaxnumber_main.tpl'
  ],
  function(SCViewComponent, jQuery, netsuite_companytaxnumber_tpl) {
    'use strict';

    var SCView = SCViewComponent.SCView;

    function CompanyTaxNumberMainView(loginRegisterPageComponent) {
      SCView.call(this);

      this.template = netsuite_companytaxnumber_tpl;

      loginRegisterPageComponent.on('beforeRegister', function(formFields) {
        if (formFields.custentity_comptaxnumber == '') {
          alert('You must enter your company tax number.');
          return jQuery.Deferred().reject();
        }
      });
    }

    CompanyTaxNumberMainView.prototype = Object.create(SCView.prototype);
    CompanyTaxNumberMainView.prototype.constructor = CompanyTaxNumberView;

    CompanyTaxNumberMainView.prototype.getContext = function() {
      return {};
    }
    
    return CompanyTaxNumberMainView;
  }
);

In addition to defining the view, you must also update the template file for the view. The template includes a div that contains a text input field. Note that the name attribute of the input field must be exactly the same as the ID of the custom field record you created in the NetSuite account. The CSS class names are the same as those used for other fields on the form to match the overall look and feel of the form.

netsuite_newcompanytaxnumber_main.tpl

              <p class="login-register-register-form-description">
  We only serve business customers who are currently registered for tax in Canada, USA, and France.
</p>
<div class="login-register-register-form-controls-group" data-validation="control-group">
  <label class="login-register-register-form-label" for="company-tax-number"> Company Tax Number <small class="login-register-register-form-required">*</small></label>
  <div class="login-register-register-form-controls" data-validation="control">
    <input type="text" name="custentity_comptaxnumber" id="company-tax-number" class="login-register-register-form-input">
  </div>
</div>

Listen for Login/Register Events To Validate Data

The LoginRegisterPage component provides three custom events:

beforeLogin
beforeRegister
afterRegister

All 'before' events are cancelable events that happen just before the event. To validate user input on the registration form, use the beforeRegister event to ensure validation is performed before data is sent to the server. To use the beforeRegister event, call the on() method of the LoginRegisterPage component. The on() method allows you to attach an event handler to any of the component's events.

The beforeRegister event returns an object that contains the form data, which you can then pass as an argument to the event handler.

Additionally, because .on returns a deferred object, you must return a rejected promise in the event handler if validation fails. Returning anything else, such as null or an empty string allows the registration process to continue.

            loginRegisterPageComponent.on('beforeRegister', function(formFields) {
  if (formFields.custentity_comptaxnumber == '') {
    alert('You must enter your company tax number.');
    return jQuery.Deferred().reject();
  }});

In the example above, a browser alert is shown with the validation error message. You may want to experiment with other ways to show the validation message, for example, by showing a modal dialog, or by displaying the message next to the form field in the same format as other field validation messages. For example, you could append a <p> element to the form field with the appropriate data-* attribute from the base theme.

            jQuery('#company-tax-number').after('<p data-validation-error="block">You must enter your company tax number.</p>');

Test the Extension and Check Form Data Is Saved

You can test your extension at any time by starting a local server – see Test an Extension on a Local Server. If you enter all required fields and validation for your custom field does not fail, you should be able to view the data you entered in the custom field in the NetSuite account.

Go to Lists > Relationships > Leads.
Click View next to the lead name you entered on the registration form.
Select the Custom tab to view the custom field and the data you entered.

If the custom field is not visible, you may need to customize the form to show the field. See Custom Forms for more information.
Verify that the data you entered on the form is in the custom field.