CAPTCHA form not visible, after applying theme

by

The question:

I’m using magento 2.2, I’ve enabled Admin-Panel -> Store -> Customers -> Customer Configuration -> CAPTCHA and enabled it for following forms: “Create user”, “Login”, “Forgot password”.

The “Login” case:
The captcha works well on default theme (LUMA theme).But when I’m using another theme, the Captcha image (or the Captcha form with message and image) is not showed up, and I’m ending up with “Incorrect CAPTCHA”.

I tried to find any related forum thread about this, but I wasn’t able to find something that is well described.
I checked all file permissions and those are OK, I’ve checked magento logs no exception there.

My theme has the following structure:
/app/code
/app/design/frontend/Theme_name/some_name/

  • This contain (beside others folders and files like /etc and so on) a theme.xml file that point to the parent_theme folder
    /app/design/frontend/Theme_name/parent_theme

On the parent_theme I have the
/parent_theme/Magento_Customer/layout – this contains “customer_account_login.xml” which is almost identical with the one from -> customer_account_login.xml and to what I have on Magento-CE-2.2.2-2017-12-11-09-19-32/vendor/magento/module-customer/view/frontend/layout/customer_account_login.xml

From what I could understand here will fill with the captcha form.

<container name="customer.login.container.before" htmlTag="div" htmlClass="col-sm-6 col-xs-12" before="-">
                    <block class="MagentoCustomerBlockFormLogin" name="customer_form_login" template="form/login.phtml">
                        <container name="form.additional.info" as="form_additional_info"/>
                    </block>
</container>





     parent_theme/Magento_Customer/layout/templates/form/login.phtml    - which is similar to [login.phtml][1]
  • In this file I have the getChildHtml(‘form_additional_info’) ?>, only design is different.

I tried everything, I also overwrite those file with default one (from https://github.com/magento/magento2/blob/2.2-develop/app/code/Magento/Customer/view/frontend/), design was changing but Captcha form wasn’t showing up.

I tend to think that my theme is missing something, I read somewhere that captcha layout should be overwrite in order to make it visible but no detailed on how to do that.

Can someone who hit this problem, or has experience on making themes let me know what I’m missing?

Thanks,

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

I was facing the same issue before and in my case it was caused by my theme’s customer_account_login.xml file.

For example, if your theme is extending Magento_Blank theme (which in most cases it probably is), then you don’t need to copy the entire contents of the customer_account_login.xml file to your theme to make changes to it –> this will just “bug out” the CAPTCHA form.

The proper way to make changes is to use:

  • <block and <container> elements to add new elements (blocks or containers)
  • <referenceBlock>, <referenceContainer> to add new elements to existing ones, change their properties or just remove them
  • <move> to move existing elements in the layout

You can read instructions here on how to do that: http://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-instructions.html

If you are facing the same issue, you can quickly test it by renaming or removing your theme’s customer_account_login.xml and clearing cache.

Then you can make the customizations the proper way based on the official documentation.

Method 2

Add the following captcha block into your customer_account_login.xml

        <block class="MagentoCaptchaBlockCaptcha" name="captcha" after="-" cacheable="false">
            <action method="setFormId">
                <argument name="formId" xsi:type="string">user_login</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>

Method 3

Can someone be a little more specific on how to implement it exactly? I just want to add a

<meta name="robots" content="NOINDEX,NOFOLLOW"/>

to the head section of my customer login page. But when I override the complete file customer_account_login.xml, it adds my meta tag alright, but stops displaying recaptcha. I’m not sure how and where to use <referenceBlock>. Is the above file overriden with just a small piece of code, if yes, then how? Would appreciate a detailed answer. Thanks.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment