How to Add a Custom Field in Magento 2 Registration Form?

September 11, 2020

Today, we’re going to teach you guys how to add a custom field in Magento 2 registration form.

When it comes to Magento 2 based eCommerce stores, the default registration form looks dull and does not have all the required fields to collect complete customer information.

But the good news is, you can easily add a custom field to the Magento 2 registration form.

In this tutorial, we’ll show you the step-by-step process to add custom fields in Magento 2 Registration Form.

Steps to Add Custom Fields in Magento 2 Registration Form

Please follow the below-mentioned steps in order to learn how to add custom fields in Magento 2 registration form.

Create a New Customer Attribute:
- Develop a new datapatch for a custom attribute.
- Add a phone number attribute with specific properties.
- Bind the attribute to the desired form.
Display Customer Attribute in Registration Form:
- Modify customer_account_create.xml to reference the new attribute.
- Create extra_field.phtml for the additional textbox.
- Include the custom attribute in the registration form.
Activate the Customer Attribute:
- Run the command php bin/magento setup:upgrade.
- Verify successful addition of the "Phone Number" field in the registration form.

Let’s dive deep into each installation step.

Step 1. Create a New Customer Attribute

First of all, we need to create a brand-new attribute to store the data that the customers submit while registering the form.

So, we will create a new datapatch in order to create a new custom attribute. And after that, we will add this new customer attribute to the database.

For this, open the Setup/Patch/Data/AddPhoneAttribute.php file and copy the following code.

<?php
namespace Magedelight\CustomerAttribute\Setup\Patch\Data;

use Magento\Catalog\Ui\DataProvider\Product\ProductCollectionFactory;

use Magento\Customer\Model\Customer;

use Magento\Eav\Model\Config;

use Magento\Eav\Setup\EavSetupFactory;

use Magento\Framework\Setup\ModuleDataSetupInterface;

use Magento\Framework\Setup\Patch\DataPatchInterface;

use Magento\Framework\Setup\Patch\PatchRevertableInterface;

use Psr\Log\LoggerInterface;

/**

* Class AddPhoneAttribute

* @package Magedelight\CustomerAttribute\Setup\Patch\Data

*/

class AddPhoneAttribute implements DataPatchInterface, PatchRevertableInterface

{

   /**

    * @var ModuleDataSetupInterface

    */

   private $moduleDataSetup;

   /**

    * @var EavSetupFactory

    */

   private $eavSetupFactory;

   /**

    * @var ProductCollectionFactory

    */

   private $productCollectionFactory;

   /**

    * @var LoggerInterface

    */

   private $logger;

   /**

    * @var Config

    */

   private $eavConfig;

   /**

    * @var \Magento\Customer\Model\ResourceModel\Attribute

    */

   private $attributeResource;

   /**

    * AddPhoneAttribute constructor.

    * @param EavSetupFactory $eavSetupFactory

    * @param Config $eavConfig

    * @param LoggerInterface $logger

    * @param \Magento\Customer\Model\ResourceModel\Attribute $attributeResource

    */

   public function __construct(

       EavSetupFactory $eavSetupFactory,

       Config $eavConfig,

       LoggerInterface $logger,

       \Magento\Customer\Model\ResourceModel\Attribute $attributeResource,

       \Magento\Framework\Setup\ModuleDataSetupInterface $moduleDataSetup

   ) {

       $this->eavSetupFactory = $eavSetupFactory;

       $this->eavConfig = $eavConfig;

       $this->logger = $logger;

       $this->attributeResource = $attributeResource;

       $this->moduleDataSetup = $moduleDataSetup;

   }

   /**

    * {@inheritdoc}

    */

   public function apply()

   {

       $this->moduleDataSetup->getConnection()->startSetup();

       $this->addPhoneAttribute();

       $this->moduleDataSetup->getConnection()->endSetup();

   }

   /**

    * @throws \Magento\Framework\Exception\AlreadyExistsException

    * @throws \Magento\Framework\Exception\LocalizedException

    * @throws \Zend_Validate_Exception

    */

   public function addPhoneAttribute()

   {

       $eavSetup = $this->eavSetupFactory->create();



       $eavSetup->addAttribute(

           \Magento\Customer\Model\Customer:: ENTITY,

           'phone_number',

           [

               'type' => 'varchar',

               'label' => 'Phone Number',

               'input' => 'text',

               'required' => 1,

               'visible' => 1,

               'user_defined' => 1,

               'sort_order' => 999,

               'position' => 999,

               'system' => 0

           ]

       );

       $attributeSetId = $eavSetup->getDefaultAttributeSetId(Customer::ENTITY);

       $attributeGroupId = $eavSetup->getDefaultAttributeGroupId(Customer::ENTITY);

       $attribute = $this->eavConfig->getAttribute(Customer::ENTITY, 'phone_number');

       $attribute->setData('attribute_set_id', $attributeSetId);

       $attribute->setData('attribute_group_id', $attributeGroupId);

       $attribute->setData('used_in_forms', [

           'adminhtml_customer',

       ]);

       $this->attributeResource->save($attribute);

   }

   /**

    * {@inheritdoc}

    */

   public static function getDependencies()

   {

       return [];

   }

   /**

    *

    */

   public function revert()

   {

   }

   /**

    * {@inheritdoc}

    */

   public function getAliases()

   {

       return [];

   }

}

After you’ve copied the code, we will have to bind it to a specific form of Magento 2 by simply adding data into used_in_form.

Step 2. Display Customer Attribute in Registration Form

Once the new customer attribute is successfully created, you need to perform the following tasks in order to display it on the registration form page of your Magento 2 store.

Firstly, you need to add the phtml files to “form.additional.info” reference name.

For this, open the MageDelight/CustomerAttribute/view/frontend/layout/customer_account_create.xml file and copy the following code.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

     layout="1column"

     xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

   <body>

       <referenceContainer name="form.additional.info">

           <block class="Magento\Framework\View\Element\Template"

                  name="phone_number"

                  template="Magedelight_CustomerAttribute::extra_field.phtml"/>

       </referenceContainer>

   </body>

</page>

Secondly, you need to show an additional textbox. And for that, you need to open /view/frontend/templates/extra_field.phtml file and copy the following code.

<div class="field phone_number required">

   <label class="label" for="phone_number">

       <span><?= $block->escapeHtml(__('Phone number')) ?></span>

   </label>

   <div class="control">

       <input type="text" name="phone_number" id="phone_number" value="" title="<?= $block->escapeHtmlAttr(__('Phone number')) ?>" class="input-text" data-validate="{required:true}">

   </div>

</div>

Now, after you’ve performed all of the above tasks, the new customer attribute will be successfully displayed on the registration form of your Magento 2 store.

Step 3. Activate the Customer Attribute

After displaying the customer attribute in the registration form, you still need to activate the module.

For this, all you need to do is run a single command as given below:

php bin/magento setup:upgrade

And it’s done!

Go ahead and check the results!

As you can see in the above screenshot, we’ve successfully added the new custom field “Phone Number” into the registration form.

You can add more custom fields like this by following the same process. It will help you to collect more customer data and analyze insights to effectively improve your conversion rate.