captcha issue in custom form Magento2

Question

I have followed the below link to add captcha in custom form

Magento 2 - How to add captcha to a custom form

Here is my config.xml of [Vendor]/[Module]/etc

  <default>
    <customer>
        <captcha>
            <shown_to_logged_in_user>
                <captcha_form>1</captcha_form>
            </shown_to_logged_in_user>
            <always_for>
                <captcha_form>1</captcha_form>
            </always_for>
        </captcha>
    </customer>
    <captcha translate="label">
        <frontend>
            <areas>
                <captcha_form>
                    <label>Captcha Form</label>
                </captcha_form>
            </areas>
        </frontend>
    </captcha>
</default>

This is the code in layout file

app/design/frontend/[Vendor]/[Theme]/Magento_Customer/layout/customer_account_renew.xml

 <referenceContainer name="content">
    <block class="Vendor\Module\Block\Customer\Renewal" name="customer_form_renewal" template="Magento_Customer::form/renewal.phtml" cacheable="false">
            <container name="form.additional.info" label="Form Additional Info">
                <block class="Magento\Captcha\Block\Captcha" name="captcha" after="-" cacheable="false">
                    <action method="setFormId">
                        <argument name="formId" xsi:type="string">custom_form</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>
            </container>
    </block>        
</referenceContainer>
    <referenceBlock name="head.components">
        <block class="Magento\Framework\View\Element\Js\Components" name="captcha_page_head_components" template="Magento_Captcha::js/components.phtml"/>
    </referenceBlock>

I have used below code in my renewal.phtml like below

 <form action="<?php echo $this->getUrl('customer/account/renewPost') ?>" method="post" id="form-validate">

  <ul class="form-list">
        <li>
            <label for="charity_name" class="required"><em>*</em><?php echo __('Charity/Organisation Name') ?></label>
            <div class="input-box">
                <input type="text" name="charity_name" id="charity_name" value="<?php echo $block->escapeHtml($this->getCustomer()->getCharityName()) ?>" title="<?php echo __('Charity/Organisation Name') ?>" class="input-text required-entry" readonly="readonly" maxlength="50"/>
            </div>
        </li>
        <li>
            <label for="charity_email"><?php echo __('Charity E-mail Address') ?> </label>
            <div class="input-box">
                <input type="text" name="charity_email" id="charity_email" value="<?php echo $this->getCompanyEmail(); ?>" title="<?php echo __('Charity E-mail Address') ?>" class="input-text" maxlength="200"/>
            </div>
        </li>
   <?php echo $block->getChildHtml('form.additional.info'); ?>
   <div class="buttons-set form-buttons">
    <button type="button" class="button" title="<?php echo __('Save') ?>" onclick="var validator = jQuery('#form-validate').validate(); validator.form();checkEmailAddresses()"><span><span><?php echo __('Save') ?></span></span></button>
</div>


  <script type="text/javascript">

 function checkEmailAddresses()
  {
    var url = '<?php echo $this->getCheckEmailUrl(); ?>';
    var mgmntEmail = jQuery('#manage\\:email').val();
    var adminEmail = jQuery('#admin\\:email').val();
    jQuery.ajax({
        method: 'POST',
        url: url,
        data: {mgmntEmail: mgmntEmail, adminEmail: adminEmail},
        success: function(response) {
            if(response.indexOf("ok") > -1)
            {
                jQuery('#form-validate').submit();
            }
            else
            {   
                alert(response);
            }
        }
    }); 

   }
 </script>

It is showing in admin panel in customer configuration and i have enabled the setting, but i can't see the captcha inside my custom page.

Answer 1

You need to change your xml form id like below:

<referenceContainer name="content">
    <block class="Vendor\Module\Block\Customer\Renewal" name="customer_form_renewal" template="Magento_Customer::form/renewal.phtml" cacheable="false">
            <container name="form.additional.info" label="Form Additional Info">
                <block class="Magento\Captcha\Block\Captcha" name="captcha" after="-" cacheable="false">
                    <action method="setFormId">
                        <argument name="formId" xsi:type="string">captcha_form</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>
            </container>
    </block>        
</referenceContainer>
<referenceBlock name="head.components">
    <block class="Magento\Framework\View\Element\Js\Components" name="captcha_page_head_components" template="Magento_Captcha::js/components.phtml"/>
</referenceBlock>