3

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.

8
  • Can you post your form as well? Aug 22, 2018 at 8:30
  • You have not ended the form. Please end </form> Aug 22, 2018 at 8:54
  • @teja its not duplicate, i followed the link you given, i faced issue with that Aug 22, 2018 at 9:03
  • Did you find the solution
    – Jaisa
    Feb 8, 2019 at 9:01
  • @Jaisa, Below answer worked for me Feb 8, 2019 at 9:20

1 Answer 1

2

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>
2
  • FromId is the issue, its working fine now Aug 22, 2018 at 8:55
  • Great! Happy Coding :) Aug 22, 2018 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.