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.

  • Can you post your form as well? – Sukumar Gorai Aug 22 '18 at 8:30
  • You have not ended the form. Please end </form> – Sukumar Gorai Aug 22 '18 at 8:54
  • @teja its not duplicate, i followed the link you given, i faced issue with that – jafar pinjar Aug 22 '18 at 9:03
  • Did you find the solution – Jaisa Feb 8 at 9:01
  • @Jaisa, Below answer worked for me – jafar pinjar Feb 8 at 9:20
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>
  • FromId is the issue, its working fine now – jafar pinjar Aug 22 '18 at 8:55
  • Great! Happy Coding :) – Sukumar Gorai Aug 22 '18 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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