How do built-in Magento modules add a custom block to the frontend customer registration form?

dmitry_fedyuk · May 30, 2019, 4:39am

1. Previous articles:

2. How to

You can add a custom block to the frontend customer registration form by placing your block inside the form_additional_info container.
The form_additional_info container’s contents is rendered by Magento automatically:

github.com

magento/magento2/blob/2.3.1/app/code/Magento/Customer/view/frontend/templates/form/register.phtml#L164-L164


<?= $block->getChildHtml('form_additional_info') ?>

github.com

magento/magento2/blob/2.3.1/app/code/Magento/Customer/view/frontend/layout/customer_account_create.xml#L18-L18


<container name="form.additional.info" as="form_additional_info"/>

3. Examples from built-in Magento modules

3.1. The «Remember Me» checkbox (the Magento_Persistent module)

github.com

magento/magento2/blob/2.3.1/app/code/Magento/Persistent/view/frontend/layout/customer_account_create.xml#L10-L12


<referenceContainer name="form.additional.info">
    <block class="Magento\Persistent\Block\Form\Remember" name="persistent.remember.me" template="Magento_Persistent::remember_me.phtml" before="-"/>
</referenceContainer>

github.com

magento/magento2/blob/2.3.1/app/code/Magento/Persistent/view/frontend/templates/remember_me.phtml#L16-L26


<div id="remember-me-box" class="field choice persistent">
    <?php $rememberMeId = 'remember_me' . $block->getRandomString(10); ?>
    <input type="checkbox" name="persistent_remember_me" class="checkbox" id="<?= $block->escapeHtmlAttr($rememberMeId) ?>"<?php if ($block->isRememberMeChecked()): ?> checked="checked"<?php endif; ?> title="<?= $block->escapeHtmlAttr(__('Remember Me')) ?>" />
    <label for="<?= $block->escapeHtmlAttr($rememberMeId) ?>" class="label"><span><?= $block->escapeHtml(__('Remember Me')) ?></span></label>
    <span class="tooltip wrapper">
        <a class="link tooltip toggle" href="#"><?= $block->escapeHtml(__('What\'s this?')) ?></a>
        <span class="tooltip content">
            <?= $block->escapeHtml(__('Check &quot;Remember Me&quot; to access your shopping cart on this computer even if you are not signed in.')) ?>
        </span>
    </span>
</div>

3.2. CAPTCHA

github.com

magento/magento2/blob/2.3.1/app/code/Magento/Captcha/view/frontend/layout/customer_account_create.xml#L10-L22


<referenceContainer name="form.additional.info">
    <block class="Magento\Captcha\Block\Captcha" name="captcha" after="-" cacheable="false">
        <action method="setFormId">
            <argument name="formId" xsi:type="string">user_create</argument>
        </action>
        <action method="setImgWidth">
            <argument name="width" xsi:type="string">230</argument>
        </action>
        <action method="setImgHeight">
            <argument name="width" xsi:type="string">50</argument>
        </action>
    </block>
</referenceContainer>

github.com

magento/magento2/blob/2.3.1/app/code/Magento/Captcha/view/frontend/templates/default.phtml#L12-L37


$captcha = $block->getCaptchaModel();
?>
<div class="field captcha required" role="<?= $block->escapeHtmlAttr($block->getFormId()) ?>">
    <label for="captcha_<?= $block->escapeHtmlAttr($block->getFormId()) ?>" class="label"><span><?= $block->escapeHtml(__('Please type the letters and numbers below')) ?></span></label>
    <div class="control captcha">
        <input name="<?= $block->escapeHtmlAttr(\Magento\Captcha\Helper\Data::INPUT_NAME_FIELD_VALUE) ?>[<?= $block->escapeHtmlAttr($block->getFormId()) ?>]" type="text" class="input-text required-entry" data-validate="{required:true}" id="captcha_<?= $block->escapeHtmlAttr($block->getFormId()) ?>" autocomplete="off"/>
        <div class="nested">
            <div class="field captcha no-label"
                 data-captcha="<?= $block->escapeHtmlAttr($block->getFormId()) ?>"
                 id="captcha-container-<?= $block->escapeHtmlAttr($block->getFormId()) ?>"
                 data-mage-init='{"captcha":{"url": "<?= $block->escapeUrl($block->getRefreshUrl()) ?>",
                                            "imageLoader": "<?= $block->escapeUrl($block->getViewFileUrl('images/loader-2.gif')) ?>",
                                             "type": "<?= $block->escapeHtmlAttr($block->getFormId()) ?>"}}'>
                <div class="control captcha-image">
                    <img alt="<?= $block->escapeHtmlAttr(__('Please type the letters and numbers below')) ?>" class="captcha-img" height="<?= /* @noEscape */ (float) $block->getImgHeight() ?>" src="<?= $block->escapeUrl($captcha->getImgSrc()) ?>"/>
                    <button type="button" class="action reload captcha-reload" title="<?= $block->escapeHtmlAttr(__('Reload captcha')) ?>"><span><?= $block->escapeHtml(__('Reload captcha')) ?></span></button>
                </div>
            </div>
            <?php if ($captcha->isCaseSensitive()) :?>
                <div class="captcha-note note">
                    <?= $block->escapeHtml(__('<strong>Attention</strong>: Captcha is case sensitive.'), ['strong']) ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>