Letting customers register to become members of your store is essential to retaining visitors and turning them into loyal customers. Besides, a form with Magento’s default supported features cannot provide enough customization features for your store. So, this article will guide you on how to add custom field in Magento 2 registration form for your store with more advanced tools.
How to Add Custom Field in Magento 2 Registration Form
Table of Contents
Step 1: Create a New Customer Attribute
Firstly, we have to create a new attribute that stores the information that consumers enter while registering the form.
To build a new custom attribute, we will first create a new datapatch. After that, we will enter customer attributes into the database.
In Setup/Patch/Data/AddPhoneAttribute.php, use the following code:
<?php
namespace BSS\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 BSS\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 [];
}
}
Step 2: Show Customer Attribute in the Customer Registration Form
In the next step, we need to display customer attributes in the registration form with 2 steps.
Firstly, in the BSS/CustomerAttribute/view/frontend/layout/customer_account_create.xml, add phtml files to “form.additional.info” reference name by 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>
After that, use this command in /view/frontend/templates/extra_field.phtml to show an additional textbox.
<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, the attribute will be shown on the customer registration page.
Step 3: Activate the Customer Attribute
We are almost complete with adding a new field in the customer registration form Magento 2, the last step is only to activate it. Do it with the following command:
php bin/magento setup:upgrade
Now, the guide on how to create custom registration form in Magento 2 is done! Check the results.
In BSS Commerce, we also provide an extension with a various advanced feature for B2B registration forms, that do not require coding knowledge. CHECK NOW! >>> Magento 2 Registration Form Extension or Explore other Magento Add-ons in our store
Wrap-Up
Above is how to add custom field in Magento 2 registration form. Hopefully, with this guide, you can easily add a new field in the customer registration form Magento 2 with what you need.
If you continue to receive the problem, thoroughly review the procedures outlined above to ensure that you followed them correctly.
If you’re looking for an even easier way to customize your registration form, consider using the Magento 2 Registration Form Extension by BSS Commerce. This extension simplifies the process of adding custom fields, provides advanced configuration options, and helps you create a tailored user onboarding process without extensive coding. Take the first step in building stronger customer relationships today by enhancing your Magento 2 registration form!
Don’t forget that we are always available to help when you need anything further to improve your Magento store.
Throughout more than 11 years of being active in the eCommerce field, BSS Commerce has helped numerous clients enhance their online business with our dedicated Magento development services. Thus, we are proud to achieve a 90% customer return rate and a 5-star rating on well-known review platforms like Trustpilot. Specifically, our experts are proficient at conducting various Magento services such as:
- Hyva theme development
- Magento integration service
- Magento technical audit
- Magento speed optimization service
If you wish to optimize your Magento performance, don’t hesitate to contact us!
