How to Add a Customer Attribute Programmatically and Display it on Customer Registration Form in Magento 2

custom_attribute_in_customer_registration_form_magento_2

Magento 2 does not offer functionality to create customer attribute from admin panel itself. Often in your project, you want to add a customer attribute and show it on customer registration form. In this post, we will see how to add a customer attribute programmatically and display it on customer registration form.

Getting Started: Development

Step 1: Create InstallData.php file under app/code/Codextblog/Customattr/Setup directorty and enter below code

<?php

namespace Codextblog\Customattr\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
 
/**
 * @codeCoverageIgnore
 */
class InstallData implements InstallDataInterface
{
    /**
     * EAV setup factory
     *
     * @var EavSetupFactory
     */
    private $eavSetupFactory;
 
    /**
     * Init
     *
     * @param EavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }
 
    /**
     * {@inheritdoc}
     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
     */
    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        if (version_compare($context->getVersion(), '1.0.0') < 0){

				$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
				$customerSetup = $objectManager->create('Codextblog\Customattr\Setup\CustomerSetup');
				$customerSetup->installAttributes($customerSetup);

				

		}

    }
}

Step 2: Create CustomerSetup.php file under app/code/Codextblog/Customattr/Setup directory and enter below code

<?php

namespace Codextblog\Customattr\Setup;

use Magento\Eav\Model\Config;
use Magento\Eav\Model\Entity\Setup\Context;
use Magento\Eav\Setup\EavSetup;
use Magento\Framework\App\CacheInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Model\ResourceModel\Entity\Attribute\Group\CollectionFactory;

class CustomerSetup extends EavSetup {

	protected $eavConfig;

	public function __construct(
		ModuleDataSetupInterface $setup,
		Context $context,
		CacheInterface $cache,
		CollectionFactory $attrGroupCollectionFactory,
		Config $eavConfig
		) {
		$this -> eavConfig = $eavConfig;
		parent :: __construct($setup, $context, $cache, $attrGroupCollectionFactory);
	} 

	public function installAttributes($customerSetup) {
		$this -> installCustomerAttributes($customerSetup);
		$this -> installCustomerAddressAttributes($customerSetup);
	} 

	public function installCustomerAttributes($customerSetup) {
			

		$customerSetup -> addAttribute(\Magento\Customer\Model\Customer::ENTITY,
			'token',
			[
			'label' => 'Token',
			'system' => 0,
			'position' => 100,
            'sort_order' =>100,
            'visible' =>  true,
			'note' => '',
				

                        'type' => 'varchar',
                        'input' => 'text',
			
			]
			);

		$customerSetup->getEavConfig()->getAttribute('customer', 'token')->setData('is_user_defined',1)->setData('is_required',0)->setData('default_value','')->setData('used_in_forms', ['adminhtml_customer', 'checkout_register', 'customer_account_create', 'customer_account_edit', 'adminhtml_checkout']) -> save();

	} 

	public function installCustomerAddressAttributes($customerSetup) {
			
	} 

	public function getEavConfig() {
		return $this -> eavConfig;
	} 
} 

Step 3: Override frontend layout file in our custom module. Create customer_account_create.xml file under app/code/Codextblog/Customattr/view/frontend/layout directory and enter below code

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Customer\Block\Form\Register" name="customer_form_register" template="Codextblog_Customattr::form/register.phtml">
                <container name="form.additional.info" as="form_additional_info"/>
                <container name="customer.form.register.fields.before" as="form_fields_before" label="Form Fields Before" htmlTag="div" htmlClass="customer-form-before"/>
            </block>
        </referenceContainer>
    </body>
</page>

Step 4: Override customer registration form template file in our custom module to add the custom attribute html. Copy register.phtml file from vendor/magento/module-customer/view/frontend/templates/form directory and paste it under app/code/Codextblog/Customattr/view/frontend/templates/form directory. Enter below lines under the form tag.

<?php
//add token attribute
<div class="field">
    <label class="label" for="token"><span><?php /* @escapeNotVerified */ echo __('Token') ?></span></label>
    <div class="control">
        <input type="text" name="token">
    </div>
</div>

Hooray! Our customer attribute has been invoked in registration form! Same way you can add it on account information edit form.

customer_registration_form
customer_registration_form

if you have any questions, feel free to submit them in the comment section below!

Want to ask a question or leave a comment?

Leave a Comment

(2 Comments)

  • safeer

    Thank you for the post. How can we add a custom attribute to delivery address form? Could you please help?

  • manjula

    how to add custom attribute to login,forgot password and checkout page

  • All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

    Was this post helpful? Please support Us!

    Follow us on twitter or Like us on facebook.

     


    To Avoid Spam Downloads, We Want Your Email

    We will send you download link right
    away. Please submit form below.
    SEND ME DOWNLOAD LINK
    Close

    Increase Your
    Magento 2
    Knowledge

    Get Weekly Tutorial
    to your Inbox
    Subscribe Me
    close-link
    Subscribe Here