Magento – Add Captcha to magento 2 contact form on cms page

captchacontact-formmagento2.2.4

I have to add captcha on the contact form. It's working on the default contact URL but not working with the contact form on CMS page.

<p>{{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}</p>

<referenceContainer name="form.additional.info">
<block class="Magento\Captcha\Block\Captcha" name="captcha" after="-" cacheable="false">
    <action method="setFormId">
        <argument name="formId" xsi:type="string">contact_us</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>
<referenceContainer name="after.body.start">
<referenceBlock name="head.components">
    <block class="Magento\Framework\View\Element\Js\Components" name="captcha_page_head_components" template="Magento_Captcha::js/components.phtml"/>
</referenceBlock>
</referenceContainer>

Please give me some suggestion or help.

Best Answer

There is no need to call <p>{{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}</p> in the content tab.

If you don't have any other content to show in the content tab, then you can use &nbsp; in the Content tab.

Steps to show captcha in contact form in CMS page are listed below:

Step 1: Open the CMS page in which you want to show the contact form with captcha and click on the Design tab.

Step 2: Paste the following code in the Layout Update XML textarea:

<referenceContainer name="content">
    <block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml">
        <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">contact_us</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>

<referenceContainer name="after.body.start">
<referenceBlock name="head.components">
    <block class="Magento\Framework\View\Element\Js\Components" name="captcha_page_head_components" template="Magento_Captcha::js/components.phtml"/>
</referenceBlock>
</referenceContainer>

Step 3: Save the page.

Note: After form submission, the page will redirect to default contact page. If you want to change it then override the controller.

Related Topic