{"id":306063,"date":"2021-09-19T16:22:56","date_gmt":"2021-09-19T16:22:56","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=306063"},"modified":"2024-07-26T10:29:20","modified_gmt":"2024-07-26T10:29:20","slug":"create-dependent-attribute-fields-on-customer-registration-form","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/","title":{"rendered":"Create Dependent Attribute Fields on Customer Registration Form"},"content":{"rendered":"\n

Hello Friends!
In this blog, we are going to learn how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.<\/p>\n\n\n\n

In Magento 2, sometimes we need to get some additional information from customers.
For example, if we want to know from where customers got this reference of our store, then we can add custom fields on customer registration to get that information.<\/p>\n\n\n\n

We can add multiple options so that customers can choose. But, after all the options, if we want to provide an option to add another option from his end. Then, in that case, there will be a need to add the dependent field in the form.<\/p>\n\n\n\n

Here, I have created a boolean option to choose whether the customer wants to add his aadhaar number or not. If he will choose “Yes”, then the “Aadhaar Number” field will be displayed and he can fill in his aadhaar number.<\/p>\n\n\n\n

To achieve “custom dependent attributes on customer registration form<\/span>” functionality, please go through the following steps:<\/p>\n\n\n\n

1.<\/strong> First of all, create custom customer attributes in the database. So, create MyCustomerAttributes.php file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/Setup\/Patch\/Data\/ directory.<\/p>\n\n\n\n

<?php\n\/**\n* Copyright \u00a9 Vendor, Inc. All rights reserved.\n* See COPYING.txt for license details.\n*\/\n\nnamespace Vendor\\CustomModule\\Setup\\Patch\\Data;\n\nuse Magento\\Customer\\Model\\Customer;\nuse Magento\\Eav\\Model\\Config;\nuse Magento\\Eav\\Setup\\EavSetupFactory;\nuse Magento\\Framework\\Setup\\ModuleDataSetupInterface;\nuse Magento\\Framework\\Setup\\Patch\\DataPatchInterface;\nuse Magento\\Framework\\Setup\\Patch\\PatchRevertableInterface;\nuse Psr\\Log\\LoggerInterface;\n\n\/**\n* Class MyCustomerAttributes\n* @package Vendor\\CustomModule\\Setup\\Patch\\Data\n*\/\nclass MyCustomerAttributes implements DataPatchInterface, PatchRevertableInterface\n{\n   \/**\n    * @var ModuleDataSetupInterface\n    *\/\n   private $moduleDataSetup;\n\n   \/**\n    * @var EavSetupFactory\n    *\/\n   private $eavSetupFactory;\n  \n   \/**\n    * @var LoggerInterface\n    *\/\n   private $logger;\n\n   \/**\n    * @var Config\n    *\/\n   private $eavConfig;\n\n   \/**\n    * @var \\Magento\\Customer\\Model\\ResourceModel\\Attribute\n    *\/\n   private $attributeResource;\n\n   \/**\n    * constructor.\n    * @param EavSetupFactory $eavSetupFactory\n    * @param Config $eavConfig\n    * @param LoggerInterface $logger\n    * @param \\Magento\\Customer\\Model\\ResourceModel\\Attribute $attributeResource\n    *\/\n   public function __construct(\n       EavSetupFactory $eavSetupFactory,\n       Config $eavConfig,\n       LoggerInterface $logger,\n       \\Magento\\Customer\\Model\\ResourceModel\\Attribute $attributeResource,\n       \\Magento\\Framework\\Setup\\ModuleDataSetupInterface $moduleDataSetup\n   ) {\n       $this->eavSetupFactory = $eavSetupFactory;\n       $this->eavConfig = $eavConfig;\n       $this->logger = $logger;\n       $this->attributeResource = $attributeResource;\n       $this->moduleDataSetup = $moduleDataSetup;\n   }\n\n   \/**\n    * {@inheritdoc}\n    *\/\n   public function apply()\n   {\n       $this->moduleDataSetup->getConnection()->startSetup();\n       $this->addPhoneAttribute();\n       $this->moduleDataSetup->getConnection()->endSetup();\n   }\n\n   \/**\n    * @throws \\Magento\\Framework\\Exception\\AlreadyExistsException\n    * @throws \\Magento\\Framework\\Exception\\LocalizedException\n    * @throws \\Zend_Validate_Exception\n    *\/\n   public function addPhoneAttribute()\n   {\n       $eavSetup = $this->eavSetupFactory->create();\n\n       $eavSetup->addAttribute(\n           \\Magento\\Customer\\Model\\Customer::ENTITY,\n           'wk_custom_aadhaar_number',\n           [\n               'type' => 'varchar',\n               'label' => 'Aadhaar Number',\n               'input' => 'text',\n               'source' => '',\n               'required' => false,\n               'visible' => true,\n               'user_defined' => 1,\n               'sort_order' => 999,\n               'position' => 999,\n               'system' => false,\n               'backend' => ''\n           ]\n       );\n\n       $attributeSetId = $eavSetup->getDefaultAttributeSetId(Customer::ENTITY);\n       $attributeGroupId = $eavSetup->getDefaultAttributeGroupId(Customer::ENTITY);\n\n       $attribute = $this->eavConfig->getAttribute(Customer::ENTITY, 'wk_custom_aadhaar_number');\n       $attribute->setData('attribute_set_id', $attributeSetId);\n       $attribute->setData('attribute_group_id', $attributeGroupId);\n\n       $attribute->setData('used_in_forms', [\n           'customer_account_create',\n           'adminhtml_customer',\n           'customer_account_edit',\n           'customer_attributes_registration'\n       ]);\n\n       $this->attributeResource->save($attribute);\n\n\n       $eavSetup->addAttribute(\n           \\Magento\\Customer\\Model\\Customer::ENTITY,\n            'wk_custom_want_to_add_aadhaar',\n            [\n                'type' => 'int',\n                'label' => 'Do you want add your aadhaar number?',\n                'input' => 'boolean',\n                'source' => '',\n                'required' => false,\n                'visible' => true,\n                'position' => 333,\n                'system' => false,\n                'backend' => ''\n            ]\n        );\n       $attribute = $this->eavConfig->getAttribute(Customer::ENTITY, 'wk_custom_want_to_add_aadhaar');\n       $attribute->setData('attribute_set_id', $attributeSetId);\n       $attribute->setData('attribute_group_id', $attributeGroupId);\n\n       $attribute->setData('used_in_forms', [\n           'customer_account_create',\n           'adminhtml_customer',\n           'customer_account_edit',\n           'customer_attributes_registration'\n       ]);\n\n       $this->attributeResource->save($attribute);\n   }\n\n   \/**\n    * {@inheritdoc}\n    *\/\n   public static function getDependencies()\n   {\n       return [];\n   }\n\n   \/**\n    *\n    *\/\n   public function revert()\n   {\n   }\n\n   \/**\n    * {@inheritdoc}\n    *\/\n   public function getAliases()\n   {\n       return [];\n   }\n}<\/pre>\n\n\n\n
2. <\/strong>Create Element.php file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/Block\/Widget\/Form\/Renderer\/ directory.<\/p>\n\n\n\n
<?php\n\/**\n * @author Vendor\n * @copyright Copyright (c) 2021 Vendor\n * @package Vendor_CustomModule\n *\/\n\n\nnamespace Vendor\\CustomModule\\Block\\Widget\\Form\\Renderer;\n\nuse Magento\\Framework\\Data\\Form\\Element\\AbstractElement;\n\n\/**\n * @SuppressWarnings(PHPMD.DepthOfInheritance)\n *\/\nclass Element extends \\Magento\\Backend\\Block\\Widget\\Form\\Renderer\\Fieldset\\Element\n{\n    \/**\n     * Initialize block template\n     *\/\n    protected $_template = 'Vendor_CustomModule::widget\/form\/renderer\/fieldset\/element.phtml';\n    \/**\n     * @var Validation\n     *\/\n    private $validation;\n\n    \/**\n     * Element constructor.\n     * @param \\Magento\\Backend\\Block\\Template\\Context $context\n     *\/\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        array $data = []\n    ) {\n        parent::__construct($context, $data);\n    }\n\n    \/**\n     * @param AbstractElement $element\n     * @return string\n     *\/\n    public function render(AbstractElement $element)\n    {\n        $html = parent::render($element);\n        return $html;\n    }\n}<\/pre>\n\n\n\n
3. <\/strong>Create Fieldset.php file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/Block\/Widget\/Form\/Renderer\/ directory.<\/p>\n\n\n\n
<?php\n\/**\n * @author Vendor\n * @copyright Copyright (c) 2021 Vendor\n * @package Vendor_CustomModule\n *\/\n\nnamespace Vendor\\CustomModule\\Block\\Widget\\Form\\Renderer;\n\n\nclass Fieldset extends \\Magento\\Backend\\Block\\Widget\\Form\\Renderer\\Fieldset\n{\n    protected $_template = 'Vendor_CustomModule::widget\/form\/renderer\/fieldset.phtml';\n\n    public function getRelationJson()\n    {\n        $depends = $this->getElement()->getData('depends');\n        if (!$depends) {\n            return '';\n        }\n        foreach ($depends as &$relation) {\n            $relation['parent_attribute_element_uid'] = $this->getJsId(\n                'form-field',\n                $relation['parent_attribute_code']\n            );\n            $relation['depend_attribute_element_uid'] = $this->getJsId(\n                'form-field',\n                $relation['depend_attribute_code']\n            );\n        }\n        $this->getElement()->setData('depends', $depends);\n\n        return $this->getElement()->convertToJson(['depends']);\n    }\n}<\/pre>\n\n\n\n
4.<\/strong> Create Boolean.php file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/Block\/Data\/Form\/Element\/ directory.<\/p>\n\n\n\n
<?php\n\/**\n * @author Vendor\n * @copyright Copyright (c) 2021 Vendor\n * @package Vendor_CustomModule\n *\/\n\nnamespace Vendor\\CustomModule\\Block\\Data\\Form\\Element;\n\nclass Boolean extends \\Magento\\Catalog\\Block\\Adminhtml\\Product\\Helper\\Form\\Boolean\n{\n    \/**\n     * @return void\n     *\/\n    protected function _construct()\n    {\n        parent::_construct();\n        $values = $this->getValues();\n        if (!$this->getRequired()) {\n            array_unshift($values, ['label' => ' ', 'value' => '']);\n        }\n        $this->setValues($values);\n    }\n}<\/pre>\n\n\n\n
5.<\/strong> Create element.phtml file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/view\/frontend\/templates\/widget\/form\/renderer\/fieldset\/ directory.<\/p>\n\n\n\n
<?php\n\/**\n * @author Vendor\n * @copyright Copyright (c) 2021 Vendor\n * @package Vendor_CustomModule\n *\/\n?>\n\n<?php\n\/* @var $block \\Magento\\Backend\\Block\\Widget\\Form\\Renderer\\Fieldset\\Element *\/\n$element = $block->getElement();\n$note = $element->getNote() ? '<div class="note" id="' . $element->getId() . '-note">' . $element->getNote() . '<\/div>' : '';\n$elementBeforeLabel = $element->getExtType() == 'checkbox admin__control-checkbox' || $element->getExtType() == 'radio admin__control-radio';\n$addOn = ($element->getBeforeElementHtml() || $element->getAfterElementHtml()) && !$element->getNoWrapAsAddon();\n$fieldId = ($element->getHtmlContainerId()) ? ' id="' . $element->getHtmlContainerId() . '"' : '';\n$fieldClass = "admin__field field field-{$element->getId()} {$element->getCssClass()}";\n$fieldClass .= ($elementBeforeLabel) ? ' choice' : '';\n$fieldClass .= ($addOn) ? ' with-addon' : '';\n$fieldClass .= ($element->getRequired()) ? ' required _required' : '';\n$fieldClass .= ($note) ? ' with-note' : '';\n$fieldClass .= (!$element->getLabelHtml()) ? ' no-label' : '';\n\n$fieldAttributes = $fieldId . ' class="' . $fieldClass . '" '\n    . $block->getUiId('form-field', $element->getId())\n    . ($element->getFieldExtraAttributes() ? ' ' . $element->getFieldExtraAttributes() : '');\n?>\n\n<?php if (!$element->getNoDisplay()): ?>\n    <?php if ($element->getType() == 'hidden'): ?>\n        <?php echo $element->getElementHtml() ?>\n    <?php else: ?>\n    <div<?php \/* @escapeNotVerified *\/ echo $fieldAttributes ?>>\n        <?php if ($elementBeforeLabel): ?>\n            <?php echo $element->getElementHtml() ?>\n            <?php echo $element->getLabelHtml() ?>\n            <?php \/* @escapeNotVerified *\/ echo $note ?>\n        <?php else: ?>\n            <?php echo $element->getLabelHtml() ?>\n            <div class="admin__field-control control">\n                <?php \/* @escapeNotVerified *\/ echo($addOn) ? '<div class="admin__field">' . $element->getElementHtml() . '<\/div>' : $element->getElementHtml(); ?>\n                <?php \/* @escapeNotVerified *\/ echo $note ?>\n            <\/div>\n        <?php endif; ?>\n        <?php if ($element->getScopeLabel()): ?>\n            <div class="field-service" value-scope="<?php \/* @escapeNotVerified *\/ echo $element->getScopeLabel()?>">\n            <\/div>\n        <?php endif;?>\n    <\/div>\n    <?php endif; ?>\n<?php endif; ?><\/pre>\n\n\n\n
6.<\/strong> Create fieldset.phtml file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/view\/frontend\/templates\/widget\/form\/renderer\/ directory.<\/p>\n\n\n\n
<?php\n\/**\n * @author Vendor\n * @copyright Copyright (c) 2021 Vendor\n * @package Vendor_CustomModule\n *\/\n?>\n<?php\n    \/** @var $block \\Vendor\\CustomModule\\Block\\Widget\\Form\\Renderer\\Fieldset *\/\n    \/** @var $element \\Magento\\Framework\\Data\\Form\\Element\\Fieldset *\/\n    $element = $block->getElement();\n    $containerId = $element->getFieldsetContainerId();\n    $id = $element->getHtmlId();\n    $isCollapsable = $element->getCollapsable();\n    $isWrapped = $containerId || $element->getHeaderBar() || $isCollapsable;\n    $titleActions = '<div class="actions">' . $element->getHeaderBar() . '<\/div>';\n    $isField = $element->getFieldsetType() == 'field';\n    $advancedAfter = $element->getAdvancedPosition() == 'after'; \/\/ To place advanced options inside or after fieldset\n    $advancedLabel = $element->getAdvancedLabel();\n    if (!isset($advancedLabel)) {\n        $advancedLabel = __('Additional Settings');\n    }\n\n    $cssClass = ($isField) ? 'field ' . $element->getClass() : 'fieldset admin__fieldset ' . $element->getClass();\n\n    if ($isField) {\n        $count = $element->getCountBasicChildren();\n        $cssClass .= ($element->hasAdvanced()) ? ' complex' : '';\n    }\n?>\n\n<?php\n\/**\n * @todo investigate situations, when the following is needed:\n * echo $element->getHeaderBar();\n * echo $element->getSubFieldsetHtml();\n *\/ ?>\n\n<?php if ($isWrapped): ?>\n<div class="fieldset-wrapper <?php echo ($isCollapsable) ? 'admin__collapsible-block-wrapper ' : ''; ?>"\n     id="<?php \/* @escapeNotVerified *\/\n     echo $containerId ? $containerId : $id . '-wrapper'; ?>"\n     data-role="<?php \/* @escapeNotVerified *\/\n     echo $id ?>-wrapper">\n    <div class="fieldset-wrapper-title admin__fieldset-wrapper-title">\n        <strong <?php \/* @escapeNotVerified *\/\n        echo ($isCollapsable) ?\n            'class="admin__collapsible-title" data-toggle="collapse" data-target="#' . $id . '-content"' :\n            'class="title"'; ?>>\n            <span><?php \/* @escapeNotVerified *\/\n                echo $element->getLegend() ?><\/span>\n        <\/strong>\n        <?php \/* @escapeNotVerified *\/\n        echo $titleActions; ?>\n    <\/div>\n    <div class="fieldset-wrapper-content admin__fieldset-wrapper-content<?php echo ($isCollapsable) ? ' collapse' : ''; ?>"\n         id="<?php \/* @escapeNotVerified *\/\n         echo $id ?>-content"\n         data-role="<?php \/* @escapeNotVerified *\/\n         echo $id ?>-content">\n        <?php endif; ?>\n\n        <?php if (!$element->getNoContainer()): ?>\n        <fieldset style="display: none;" class="<?php \/* @escapeNotVerified *\/\n        echo $cssClass ?>" id="<?php \/* @escapeNotVerified *\/\n        echo $id ?>">\n            <?php if ($element->getLegend() && !$isWrapped): ?>\n                <div class="<?php \/* @escapeNotVerified *\/\n                echo $isField ? 'label admin__field-label' : 'admin__legend' ?> step-title">\n                    <span><?php \/* @escapeNotVerified *\/\n                        echo $element->getLegend() ?><\/span>\n                <\/div>\n            <?php endif; ?>\n            <?php endif; ?>\n\n            <div class="messages">\n                <?php if ($element->getComment() && !$isField): ?>\n                    <div class="message message-notice"><?php echo $block->escapeHtml($element->getComment()) ?><\/div>\n                <?php endif; ?>\n            <\/div>\n\n            <?php echo ($isField) ? '<div class="control admin__field-control">' : ''; ?>\n\n            <?php if ($element->hasHtmlContent() && !$isField): ?>\n                <?php echo $element->getHtmlContent(); ?>\n            <?php else: ?>\n\n            <?php if ($isField && $count > 1): ?>\n            <div class="fields-group-<?php \/* @escapeNotVerified *\/\n            echo $count ?>">\n                <?php endif; ?>\n\n                <?php echo $element->getBasicChildrenHtml(); ?>\n\n                <?php echo ($isField && $count > 1) ? '<\/div>' : '' ?>\n\n                <?php if ($element->getComment() && $isField): ?>\n                    <div class="note"><?php echo $block->escapeHtml($element->getComment()) ?><\/div>\n                <?php endif; ?>\n\n                <?php if ($element->hasAdvanced() && !$isField): ?>\n                    <?php echo (!$element->getNoContainer() && $advancedAfter) ? '<\/fieldset>' : '' ?>\n                    <details data-mage-init='{"details": {}}' class="details admin__collapsible-block-wrapper"\n                             id="details<?php \/* @escapeNotVerified *\/\n                             echo $id ?>">\n                        <summary class="details-summary admin__collapsible-title"\n                                 id="details-summary<?php \/* @escapeNotVerified *\/\n                                 echo $id ?>">\n                            <span><?php \/* @escapeNotVerified *\/\n                                echo $advancedLabel ?><\/span>\n                        <\/summary>\n                        <div class="details-content admin__fieldset" id="details-content<?php \/* @escapeNotVerified *\/\n                        echo $id ?>">\n                            <?php echo $element->getAdvancedChildrenHtml(); ?>\n                        <\/div>\n                    <\/details>\n                <?php elseif ($element->hasAdvanced() && $isField): ?>\n                    <div class="nested" id="nested<?php \/* @escapeNotVerified *\/\n                    echo $id ?>">\n                        <?php echo $element->getAdvancedChildrenHtml(); ?>\n                    <\/div>\n                <?php endif; ?>\n\n                <?php echo ($isField) ? '<\/div>' : ''; ?>\n\n                <?php endif; ?>\n\n\n                <?php if (!$element->getNoContainer() && !$advancedAfter): ?>\n        <\/fieldset>\n    <?php endif; ?>\n\n        <?php if ($isWrapped): ?>\n    <\/div>\n<\/div>\n<?php endif; ?>\n<script>\n    require([\n        'jquery',\n        "mage\/calendar",\n        "Vendor_CustomModule\/js\/view\/relation"\n    ], function ($, calendar, relation) {\n        var currentBeforeSelector,\n            beforeBlockSelectors;\n\n        currentBeforeSelector = "form#form-validate .actions-toolbar";\n\n        beforeBlockSelectors = [\n            'form#form-validate > fieldset.create.account > .field.gdpr',\n            'form#form-validate > fieldset.create.account > .field.captcha',\n            'form#form-validate > fieldset.create.account > .actions-toolbar'\n        ];\n\n        $.each(beforeBlockSelectors, function (index, value) {\n            if ($(value).length > 0) {\n                currentBeforeSelector = value;\n                return false;\n            }\n        });\n\n        if ($(currentBeforeSelector).length) {\n            if ($(currentBeforeSelector).before($('#group-fields-customer-attributes').show())) {\n                <?php if ($block->getRelationJson()) : ?>\n                \/\/ execute relations after block is pasted\n                relation.init(<?php echo $block->getRelationJson() ?>);\n                <?php endif; ?>\n            }\n        }\n    });\n<\/script><\/pre>\n\n\n\n
7.<\/strong> Create relation.js file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/view\/frontend\/web\/js\/view\/ directory.<\/p>\n\n\n\n
define([\n    'jquery'\n], function($) {\n        'use strict';\n        return {\n            config : {},\n            indexedElements : [],\n            \/**\n             * @param {Object[]} options\n             * @returns {jquery}\n             *\/\n            init: function (options) {\n                this.config = options.depends;\n                this.initInputElements();\n                return this;\n            },\n            \/\/ init parent element listeners\n            initInputElements: function() {\n                var different = [];\n                $.each(this.config, function(key, parentrelation) {\n                    var element = this.getElement(parentrelation.parent_attribute_element_uid);\n                    if (element != void(0) && element.length && $.inArray(element.selector, different) == -1) {\n                        different.push(element.selector);\n                        element.on('change', function (event) {\n                            this.observer(event);\n                            this.indexedElements = [];\n                        }.bind(this));\n                        \/\/ for custom check\n                        element.on('check_relations', this.observer.bind(this));\n                        element.find('select').each(function (key, input) {\n                            $(input).trigger("check_relations");\n                        });\n                        this.indexedElements = [];\n                    }\n                }.bind(this));\n            },\n            getElement: function (id) {\n                return $('[data-ui-id="' + id + '"]');\n            },\n            observer: function (event) {\n                var element = $(event.target);\n                var block = $(event.currentTarget);\n                if (element && block) {\n                    var elementId = block.attr('data-ui-id');\n                    this.checkDependencies(element, elementId);\n                }\n            },\n            checkDependencies: function (element, elementId) {\n                \/\/ Find dependents elements\n                var elementDependencies = this.findElementDependencies(elementId);\n                \/\/ Iterate throw elements and show required elements\n                $.each(elementDependencies, function(key, relation) {\n                    if (this.getElement(relation.depend_id).length) {\n                            \/\/ Multiselect and select\n                        if (this.canShow(relation)) {\n                            this.showBlock(relation.depend_id);\n                        } else if (this.indexedElements.indexOf(relation.depend_id) < 0) {\n                            this.hideBlock(relation.depend_id);\n                        }\n\n                    }\n                }.bind(this));\n            },\n            canShow: function (relationToShow) {\n                var parentRelations = this.findElementParentDependencies(relationToShow);\n                var result = true;\n\n                \/\/ check all parent elements\n                $.each(parentRelations, function(key, relation) {\n                    var block = this.getElement(relation.parent_id);\n                    if (result && block.length) {\n                        result = !!(this.checkSelect(block.find('select'), relation));\n                    }\n                }.bind(this));\n\n                return result;\n            },\n           \n            \/*\n             * check for select, multiselect\n             *\/\n            checkSelect: function (element, relation) {\n                if (!element.length) {\n                    return false;\n                }\n                return element.val() != void(0) && element.val().indexOf(relation.value) != -1 && element.is(":visible")\n            },\n\n            hideBlock: function (id) {\n                var element = this.getElement(id);\n                element.hide();\n                element.find('select').each(function (key, input) {\n                    $(input).trigger("check_relations");\n                });\n            },\n            showBlock: function (id) {\n                var element = this.getElement(id);\n                element.show();\n                this.indexedElements.push(id);\n                element.find('select').each(function (key, input) {\n                    $(input).trigger("check_relations");\n                });\n            },\n            findElementDependencies: function (elementUId) {\n                var elements = [];\n                $.each(this.config, function(key, item) {\n                    if (item.parent_attribute_element_uid == elementUId) {\n                        var el = {\n                            'depend_id': item.depend_attribute_element_uid,\n                            'value': item.parent_option_id\n                        };\n                        elements.push(el);\n                    }\n                });\n                return elements;\n            },\n            findElementParentDependencies: function (elementId) {\n                var elements = [];\n                $.each(this.config, function(key, item) {\n                    if (item.depend_attribute_element_uid == elementId.depend_id\n                        && item.parent_option_id == elementId.value\n                    ) {\n                        var el = {\n                            'parent_id': item.parent_attribute_element_uid,\n                            'depend_id': item.depend_attribute_element_uid,\n                            'value': item.parent_option_id\n                        };\n                        elements.push(el);\n                    }\n                });\n                return elements;\n            }\n        }\n    }\n);<\/pre>\n\n\n\n
8.<\/strong> Create customer_account_create.xml file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/view\/frontend\/layout\/ directory.<\/p>\n\n\n\n
<?xml version="1.0"?>\n<!--\n\/**\n * @author Vendor\n * @copyright Copyright (c) 2021 Vendor\n * @package Vendor_CustomModule\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <body>\n        <referenceContainer name="form.additional.info">\n            <block class="Vendor\\CustomModule\\Block\\Customer\\Form\\CustomerAttributes" name="attributes_customer_register" template="customer_attributes.phtml" cacheable="false"\/>\n        <\/referenceContainer>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
9. <\/strong>Create customer_attributes.phtml file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/view\/frontend\/templates\/ directory.<\/p>\n\n\n\n
<?php\n\/**\n * Webkul Software.\n *\n * @category  Webkul\n * @package   Webkul_CustomModule\n * @author    Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license   https:\/\/store.webkul.com\/license.html\n *\/\n$customerData = $block->getCustomerData();\n$aadharNumber = $customerData["wk_custom_aadhaar_number"] ?? "";\n$isAadhar = $customerData["wk_custom_want_to_add_aadhaar"] ?? 0;\n?>\n<legend class="legend"><span>Additional Information<\/span><\/legend>\n<div class="field">\n    <label for="wk_custom_want_to_add_aadhaar" class="label">\n    <span><?= $block->escapeHtml(__('Do you want add your aadhar number?')) ?><\/span><\/label>\n    <div class="control">\n        <select name="wk_custom_want_to_add_aadhaar" id="wk_custom_want_to_add_aadhaar" class="select">\n            <option value="1" <?= \/* @noEscape*\/ ($isAadhar==1)?'selected':'';?> ><?= $block->escapeHtml(__('Yes')) ?><\/option>\n            <option value="0" <?= \/*noEscape *\/ ($isAadhar==0)?'selected':'';?>><?= $block->escapeHtml(__('No')) ?><\/option>\n        <\/select>\n    <\/div>\n<\/div>\n<div class="field">\n    <label class="label" for="Aadhaar Number">\n        <span><?= \/** @noEscape *\/ __('Aadhaar Number');?><\/span>\n    <\/label>\n    <div class="control">\n        <input type="text" name="wk_custom_aadhaar_number" id="wk_custom_aadhaar_number" \n               title="<?= \/** @noEscape *\/ __('Aadhaar Number');?>" class="input-text"\n               maxlength="12"\n        value="<?= \/* @noEscape *\/ $aadharNumber ?>">\n    <\/div>\n<\/div><\/pre>\n\n\n\n
10.<\/strong> Create CustomerAttributes.php file inside the <magento-root-dir>\/app\/code\/Vendor\/CustomModule\/Block\/Customer\/Form\/ directory.<\/p>\n\n\n\n
<?php\nnamespace Vendor\\CustomModule\\Block\\Customer\\Form;\n\nuse Magento\\Backend\\Block\\Template\\Context;\nuse Magento\\Framework\\Registry;\nuse Magento\\Framework\\Data\\FormFactory;\nuse Vendor\\CustomModule\\Block\\Widget\\Form\\Renderer\\Element;\nuse Vendor\\CustomModule\\Block\\Widget\\Form\\Renderer\\Fieldset;\nuse Magento\\Eav\\Model\\Entity\\Attribute;\nuse Magento\\Customer\\Model\\AttributeMetadataDataProvider;\nuse Magento\\Framework\\ObjectManagerInterface;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Catalog\\Block\\Adminhtml\\Form;\nuse Magento\\Customer\\Model\\Session;\nuse Magento\\Framework\\DataObjectFactory;\n\nclass CustomerAttributes extends Form\n{\n    \/**\n     * @var StoreManagerInterface\n     *\/\n    private $storeManager;\n\n    \/**\n     * @var Session\n     *\/\n    private $session;\n\n    \/**\n     * @var DataObjectFactory\n     *\/\n    private $dataObjectFactory;\n\n    \/**\n     * @var Element\n     *\/\n    private $elementRenderer;\n\n    \/**\n     * @var AttributeMetadataDataProvider\n     *\/\n    private $attributeMetadataDataProvider;\n\n    \/**\n     * @var ObjectManagerInterface\n     *\/\n    private $objectManager;\n\n    \/**\n     * @var  array\n     *\/\n    private $_customerData;\n\n    \/**\n     * @var Fieldset\n     *\/\n    private $fieldsetRenderer;\n\n    \/**\n     * Attributes constructor.\n     *\n     * @param Context $context\n     * @param Registry $registry\n     * @param Session $session\n     * @param FormFactory $formFactory\n     * @param Fieldset $fieldsetRenderer\n     * @param Element $elementRenderer\n     * @param ObjectManagerInterface $objectManager\n     * @param DataObjectFactory $dataObjectFactory\n     * @param AttributeMetadataDataProvider $attributeMetadataDataProvider\n     * @param array $data\n     *\/\n    public function __construct(\n        Context $context,\n        Registry $registry,\n        Session $session,\n        FormFactory $formFactory,\n        Fieldset $fieldsetRenderer,\n        Element $elementRenderer,\n        ObjectManagerInterface $objectManager,\n        DataObjectFactory $dataObjectFactory,\n        AttributeMetadataDataProvider $attributeMetadataDataProvider,\n        array $data = []\n    ) {\n        parent::__construct($context, $registry, $formFactory, $data);\n        $this->session           = $session;\n        $this->fieldsetRenderer  = $fieldsetRenderer;\n        $this->elementRenderer   = $elementRenderer;\n        $this->objectManager     = $objectManager;\n        $this->storeManager      = $context->getStoreManager();\n        $this->dataObjectFactory = $dataObjectFactory;\n        $this->attributeMetadataDataProvider = $attributeMetadataDataProvider;\n    }\n\n    \/**\n     * Check whether attribute is visible on front\n     *\n     * @param Attribute $attribute\n     *\n     * @return bool\n     *\/\n    public function isAttributeVisibleOnFront(Attribute $attribute)\n    {\n        return $attribute->getIsVisible();\n    }\n\n    protected function _prepareForm()\n    {\n        \/** @var \\Magento\\Framework\\Data\\Form $form *\/\n        $form = $this->_formFactory->create();\n        $type = 'customer_attributes_registration';\n\n        $attributes = $this->attributeMetadataDataProvider->loadAttributesCollection(\n            'customer',\n            $type\n        );\n\n        if (!$attributes || !$attributes->getSize()) {\n            return;\n        }\n        $fieldset = $form->addFieldset(\n            'group-fields-customer-attributes',\n            [\n                'class' => 'user-defined',\n                'legend' => __('Additional Information')\n            ]\n        );\n        $fieldset->setRenderer($this->fieldsetRenderer);\n\n        $this->_setFieldset($attributes, $fieldset);\n        $this->prepareDependentAttributes($attributes, $fieldset);\n\n        $this->setForm($form);\n    }\n\n    \/**\n     * @inheritdoc\n     *\/\n    protected function _initFormValues()\n    {\n        if ($form = $this->getForm()) {\n            if ($this->getCustomerData()) {\n                $form->addValues($this->getCustomerData());\n            }\n            \/** @var \\Magento\\Customer\\Block\\Form\\Register $registerForm *\/\n            $registerForm = $this->getLayout()->getBlock('customer_form_register');\n            if (is_object($registerForm) && $registerForm->getFormData() instanceof \\Magento\\Framework\\DataObject) {\n                $form->addValues($registerForm->getFormData()->getData());\n            }\n        }\n\n        return parent::_initFormValues();\n    }\n\n    \/**\n     * Set Fieldset to Form\n     *\n     * @param array|\\Magento\\Customer\\Model\\ResourceModel\\Form\\Attribute\\Collection $attributes\n     * $attributes - attributes that will be added\n     * @param \\Magento\\Framework\\Data\\Form\\Element\\Fieldset $fieldset\n     * @param array $exclude\n     * @return void\n     *\/\n    protected function _setFieldset($attributes, $fieldset, $exclude = [])\n    {\n        $this->_addElementTypes($fieldset);\n\n        foreach ($attributes as $attribute) {\n            \/** @var $attribute \\Magento\\Eav\\Model\\Entity\\Attribute *\/\n            if (!$this->isAttributeVisibleOnFront($attribute)) {\n                continue;\n            }\n            $attribute->setStoreId($this->storeManager->getStore()->getId());\n\n            if ($inputType = $attribute->getFrontend()->getInputType()) {\n                $rendererClass = $attribute->getFrontend()->getInputRendererClass();\n                \n                if ($inputType == "boolean") {\n                    $fieldType = 'Webkul\\CustomModule\\Block\\Data\\Form\\Element\\\\' . ucfirst($inputType);\n                } else {\n                    $fieldType = 'Magento\\Framework\\Data\\Form\\Element\\\\' . ucfirst($inputType);\n                }\n                \n                if (!empty($rendererClass)) {\n                    $fieldType = $inputType . '_' . $attribute->getAttributeCode();\n                    $fieldset->addType($fieldType, $rendererClass);\n                }\n\n                $data = [\n                    'name' => $attribute->getAttributeCode(),\n                    'label' => $attribute->getStoreLabel(),\n                    'class' => $attribute->getFrontend()->getClass(),\n                    'required' => $attribute->getIsRequired() || $attribute->getRequiredOnFront(),\n                    'note' => $attribute->getNote()\n                ];\n               \n                $element = $fieldset->addField(\n                    $attribute->getAttributeCode(),\n                    $fieldType,\n                    $data\n                )->setEntityAttribute(\n                    $attribute\n                );\n\n                $element->setValue($attribute->getDefaultValue());\n                $element->setRenderer($this->elementRenderer);\n                $element->setAfterElementHtml($this->_getAdditionalElementHtml($element));\n\n                \/* add options format *\/\n                $this->_applyTypeSpecificConfig($inputType, $element, $attribute);\n            }\n        }\n    }\n\n    \/**\n     * {@inheritdoc}\n     *\/\n    protected function _applyTypeSpecificConfig($inputType, $element, Attribute $attribute)\n    {\n        switch ($inputType) {\n            case 'select':\n                $element->addElementValues($attribute->getSource()->getAllOptions(true, false));\n                break;\n            case 'multiselect':\n                $element->addElementValues($attribute->getSource()->getAllOptions(false, false));\n                $element->setCanBeEmpty(true);\n                break;\n            default:\n                break;\n        }\n    }\n\n    \/**\n     * @param \\Magento\\Customer\\Model\\ResourceModel\\Form\\Attribute\\Collection $attributes\n     * @param \\Magento\\Framework\\Data\\Form\\Element\\Fieldset $fieldset\n     *\/\n    protected function prepareDependentAttributes($attributes, $fieldset)\n    {\n        $depends = [];\n        $attributeIds = $attributes->getColumnValues('attribute_id');\n        if (empty($attributeIds)) {\n            return;\n        }\n       \n        \/\/you can add array options dynamically as per your need\n        $depends[] = [\n            'parent_attribute_id' => 163,\n            'parent_attribute_code' => 'wk_custom_want_to_add_aadhaar',\n            'parent_option_id' => 1,\n            'depend_attribute_id' => 162,\n            'depend_attribute_code' => 'wk_custom_aadhaar_number'\n        ];\n      \n        if (!empty($depends)) {\n            $fieldset->setData('depends', $depends);\n        }\n    }\n\n    \/**\n     * @return array\n     *\/\n    private function getCustomerData()\n    {\n        if (!isset($this->_customerData)) {\n            $this->_customerData = [];\n            if ($this->session->isLoggedIn()) {\n                $this->_customerData = $this->session->getCustomer()->getData();\n            }\n        }\n\n        return $this->_customerData;\n    }\n}<\/pre>\n\n\n\n
11.<\/strong> Now, run the following commands.<\/p>\n\n\n\n
php bin\/magento setup:upgrade\n\nphp bin\/magento setup:static-content:deploy\n\nphp bin\/magento cache:flush<\/pre>\n\n\n\n
12.<\/strong> Now, check the result(refer to the following images):<\/p>\n\n\n\n
\"customAttributesInDb\"<\/figure>\n\n\n\n
\"patchListinDb\"<\/figure>\n\n\n\n
\"Create-New-Custo\"<\/figure>\n\n\n\n
\"Create-New-Custo-2\"<\/figure>\n\n\n\n
Hope this will be helpful. Thanks \ud83d\ude42<\/p>\n\n\n\n
Next Blog:<\/strong> Display dependent fields on the customer account edit page.<\/a>

Previous Blog: <\/strong>Make Submenu position right adjacent of parent menu at frontend in Magento 2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Hello Friends!In this blog, we are going to learn how we can create dependent fields for custom customer attributes on the customer registration form at the frontend. In Magento 2, sometimes we need to get some additional information from customers.For example, if we want to know from where customers got this reference of our store, […]<\/a><\/p>\n","protected":false},"author":249,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[1230,12074,460,12073,1335,12072],"class_list":["post-306063","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-custom-attribute","tag-custom-customer-attributes","tag-custom-customer-fields","tag-dependent-attributes","tag-dependent-custom-option","tag-dependent-fields"],"yoast_head":"\nCreate Dependent Attribute Fields on Customer Registration Form - Webkul Blog<\/title>\n<meta name=\"description\" content=\"how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Dependent Attribute Fields on Customer Registration Form - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-19T16:22:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T10:29:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb-1200x439.png\" \/>\n<meta name=\"author\" content=\"Khushboo Sahu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Khushboo Sahu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\"},\"author\":{\"name\":\"Khushboo Sahu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca\"},\"headline\":\"Create Dependent Attribute Fields on Customer Registration Form\",\"datePublished\":\"2021-09-19T16:22:56+00:00\",\"dateModified\":\"2024-07-26T10:29:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\"},\"wordCount\":420,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb-1200x439.png\",\"keywords\":[\"custom attribute\",\"custom customer attributes\",\"custom customer fields\",\"dependent attributes\",\"dependent custom option\",\"dependent fields\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\",\"name\":\"Create Dependent Attribute Fields on Customer Registration Form - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb-1200x439.png\",\"datePublished\":\"2021-09-19T16:22:56+00:00\",\"dateModified\":\"2024-07-26T10:29:20+00:00\",\"description\":\"how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb.png\",\"width\":1782,\"height\":652,\"caption\":\"customAttributesInDb\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Dependent Attribute Fields on Customer Registration Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca\",\"name\":\"Khushboo Sahu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Khushboo Sahu\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/khushboo-sahu062\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Dependent Attribute Fields on Customer Registration Form - Webkul Blog","description":"how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/","og_locale":"en_US","og_type":"article","og_title":"Create Dependent Attribute Fields on Customer Registration Form - Webkul Blog","og_description":"how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.","og_url":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-09-19T16:22:56+00:00","article_modified_time":"2024-07-26T10:29:20+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb-1200x439.png","type":"","width":"","height":""}],"author":"Khushboo Sahu","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Khushboo Sahu","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/"},"author":{"name":"Khushboo Sahu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca"},"headline":"Create Dependent Attribute Fields on Customer Registration Form","datePublished":"2021-09-19T16:22:56+00:00","dateModified":"2024-07-26T10:29:20+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/"},"wordCount":420,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb-1200x439.png","keywords":["custom attribute","custom customer attributes","custom customer fields","dependent attributes","dependent custom option","dependent fields"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/","url":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/","name":"Create Dependent Attribute Fields on Customer Registration Form - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb-1200x439.png","datePublished":"2021-09-19T16:22:56+00:00","dateModified":"2024-07-26T10:29:20+00:00","description":"how we can create dependent fields for custom customer attributes on the customer registration form at the frontend.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/09\/customAttributesInDb.png","width":1782,"height":652,"caption":"customAttributesInDb"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-dependent-attribute-fields-on-customer-registration-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Dependent Attribute Fields on Customer Registration Form"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f94b8f53397bf85810761d76c98fadca","name":"Khushboo Sahu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cabac965df656d114e6bf340df07518c990eda03bb09265dbd5c17f1097adaae?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Khushboo Sahu"},"url":"https:\/\/webkul.com\/blog\/author\/khushboo-sahu062\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/306063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=306063"}],"version-history":[{"count":9,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/306063\/revisions"}],"predecessor-version":[{"id":454987,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/306063\/revisions\/454987"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=306063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=306063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=306063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}