Skip to content

Captcha showing only on form route but not on CMS page

I followed this (with some fixes, since it wasn’t working) and created a functioning form that I call as a block in a CMS page created in the backoffice from Content > Pages.

Later I followed this to add a native Magento captcha to the form. And here comes the problem: After step 5 I should be able to see the captcha (even if it doesn’t work) and in fact I see it… but only when I visit the route of the form module (e.g.: myecommerce.domain/formabcd). On the opposite, when I visit the CMS page where I’m calling the block, there is no captcha.

Technical info

After the last modification I made on the files I ‘ve already tried the following magento command:

  • clean and flush the cache;
  • reindex
  • upgrade
  • compile the di

and I cleaned the browser’s cache.

In the backoffice, under STORES > Settings > Configuration > CUSTOMERS > Customer Configuration > CAPTCHA I selected Custom Form in the Form select menu and I saved.

Magento version: 2.4.4

Deploy mode: developer

The code

Block/CaptchaForm.php

<?php

namespace VendornameFormabcdBlock;

class CaptchaForm extends MagentoFrameworkViewElementTemplate
{
    public function getFormAction()
    {
        return $this->getUrl('formabcd/index/post', ['_secure' => true]);
    }
}

etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <customer>
            <captcha>
                <shown_to_logged_in_user>
                    <custom_form>1</custom_form>
                </shown_to_logged_in_user>
                <always_for>
                    <custom_form>1</custom_form>
                </always_for>
            </captcha>
        </customer>
        <captcha translate="label">
            <frontend>
                <areas>
                    <custom_form>
                        <label>Form Abcd</label>
                    </custom_form>
                </areas>
            </frontend>
        </captcha>
    </default>
</config>

view/frontend/templates/captchaform.phtml

<form class="form contact"
      action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
      id="contact-form"
      method="post"
      data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>
    <fieldset class="fieldset">
        <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Write Us') ?></span></legend><br />

        <div class="field name required">
            <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('TEST FORM') ?></span></label>
            <div class="control">
                <input name="name" id="name" title="<?php /* @escapeNotVerified */ echo __('Name') ?>" value="" class="input-text" type="text" data-validate="{required:true}"/>
            </div>
        </div>
        <div class="field email required">
            <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></label>
            <div class="control">
                <input name="email" id="email" title="<?php /* @escapeNotVerified */ echo __('Email') ?>" value="" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}"/>
            </div>
        </div>
        <?php echo $block->getChildHtml('form.additional.info'); ?>
    </fieldset>
    <div class="actions-toolbar">
        <div class="primary">
            <input type="hidden" name="hideit" id="hideit" value="" />
            <button type="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
                <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
            </button>
        </div>
    </div>
</form>

view/frontend/layout/formabcd_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Form Abcd</title>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="VendornameFormabcdBlockCaptchaForm" name="contactForm" template="Vendorname_Formabcd::captchaform.phtml">
                <container name="form.additional.info" label="Form Additional Info">
                    <block class="MagentoCaptchaBlockCaptcha" 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="MagentoFrameworkViewElementJsComponents" name="captcha_page_head_components" template="Magento_Captcha::js/components.phtml"/>
        </referenceBlock>
    </body>
</page>

I call the form as a block in the CMS page whith the following line

{{block class="VendornameFormabcBlockCaptchaForm" template="Vendorname_Formabc::captchaform.phtml"}}

I found this and this but there’s no working solution.