Magento 2.3 – Contact Form in Modal Popup Not Showing Google Recaptcha

magento2recaptcha

I have written a module that loads the default contact form in to a default Magento modal window (I load the form in to the footer first):

/app/code/Sulman/PopupContactForm/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Sulman_PopupContactForm::css/contact-popup.css" />
    </head>
    <referenceContainer name="footer">
        <block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml">
            <container name="form.additional.info" label="Form Additional Info"/>
        </block>
        <block class="Magento\Framework\View\Element\Template" name="popup-button" template="Sulman_PopupContactForm::popup-button.phtml"></block>
    </referenceContainer>
</page>

/app/code/Sulman/PopupContactForm/view/frontend/templates/popup-button.phtml

<div class="contact-popup-button" style="">
    <a href="#" id="open-contact-popup">Contact Us</a>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#contact-form'));
            $( "#open-contact-popup" ).click(function() {
               $('#contact-form').modal('openModal');
            });

        }
    );
</script>

This is working correctly and loads the contact form in the popup just fine.

But now I want to add the default Magento Google recaptcha to the contact form. I have enabled it and it is showing correctly on the contact form (/contact) but it does not show on the contact popup. Any ideas?

I can see the code to load the recaptcha in the source of the main contact page:

<script type="text/x-magento-init">
{
    "#msp-recaptcha-container": {
        "Magento_Ui/js/core/app": {"components":{"msp-recaptcha":{"component":"MSP_ReCaptcha\/js\/reCaptcha","zone":"contact","settings":{"siteKey":"xxx","size":"normal","badge":null,"theme":"light","lang":null,"enabled":{"login":true,"create":true,"forgot":true,"contact":true}}}}}    }
}
</script>

But it is not appearing on the popup source.

Best Answer

Solved. I just needed to add the MSP block to the form.additional.info container in my modules default.xml:

    <referenceContainer name="form.additional.info">
        <block class="MSP\ReCaptcha\Block\Frontend\ReCaptcha" name="msp-recaptcha" after="-"
               template="MSP_ReCaptcha::msp_recaptcha.phtml">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="msp-recaptcha" xsi:type="array">
                            <item name="component" xsi:type="string">MSP_ReCaptcha/js/reCaptcha</item>
                            <item name="zone" xsi:type="string">contact</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>

So my final default.xml looks like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Sulman_PopupContactForm::css/contact-popup.css" />
    </head>
    <referenceContainer name="footer">
        <block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml">
            <container name="form.additional.info" label="Form Additional Info"/>
        </block>
        <block class="Magento\Framework\View\Element\Template" name="popup-button" template="Sulman_PopupContactForm::popup-button.phtml"></block>
    </referenceContainer>

    <referenceContainer name="form.additional.info">
        <block class="MSP\ReCaptcha\Block\Frontend\ReCaptcha" name="msp-recaptcha" after="-"
               template="MSP_ReCaptcha::msp_recaptcha.phtml">

            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="msp-recaptcha" xsi:type="array">
                            <item name="component" xsi:type="string">MSP_ReCaptcha/js/reCaptcha</item>
                            <item name="zone" xsi:type="string">contact</item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </block>
    </referenceContainer>
</page>

Google recaptcha now works on the popup correctly.

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Anyway I have solved it myself.The captcha is not rendering due to I haven't override captcha layout xml so overriding it to your theme will solved issue.

Override Module-Contact View and Controller in Magento 2

You need to create small module for this.

Using di.xml can rewrite the controller Post.php

First ,Create module registration file registration.php at app\code\VendorName\ModuleName. Code is below:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'VendorName_ModuleName',
    __DIR__
);

Then create module main config module.xml file at app\code\VendorName\ModuleName\etc. Code is below:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="VendorName_ModuleName" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Contact"/>
        </sequence>
    </module>
</config>

3rd, create di.xml where you define configuration that which class will rewrite and which class rewriting and di.xml located at app\code\VendorName\ModuleName\etc and code is below:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Contact\Controller\Index\Post" type="VendorName\ModuleName\Controller\Index\Post" />
</config>

4th, write the rewrite class which located at Post.php app\code\VendorName\ModuleName\Controller\Index.

<?php
namespace VendorName\ModuleName\Controller\Index;

class Post extends \Magento\Contact\Controller\Index\Post
{
    /**
     * Post user question
     *
     * @return void
     * @throws \Exception
     */
    public function execute()
    {
        $post = $this->getRequest()->getPostValue();
        if (!$post) {
            $this->_redirect('*/*/');
            return;
        }

        $this->inlineTranslation->suspend();
        try {
            $postObject = new \Magento\Framework\DataObject();
            $postObject->setData($post);

            $error = false;

            if (!\Zend_Validate::is(trim($post['name']), 'NotEmpty')) {
                $error = true;
            }
            if (!\Zend_Validate::is(trim($post['comment']), 'NotEmpty')) {
                $error = true;
            }
            if (!\Zend_Validate::is(trim($post['email']), 'EmailAddress')) {
                $error = true;
            }
            if (\Zend_Validate::is(trim($post['hideit']), 'NotEmpty')) {
                $error = true;
            }
            if ($error) {
                throw new \Exception();
            }

            $storeScope = \Magento\Store\Model\ScopeInterface::SCOPE_STORE;
            $transport = $this->_transportBuilder
                ->setTemplateIdentifier($this->scopeConfig->getValue(self::XML_PATH_EMAIL_TEMPLATE, $storeScope))
                ->setTemplateOptions(
                    [
                        'area' => \Magento\Backend\App\Area\FrontNameResolver::AREA_CODE,
                        'store' => \Magento\Store\Model\Store::DEFAULT_STORE_ID,
                    ]
                )
                ->setTemplateVars(['data' => $postObject])
                ->setFrom($this->scopeConfig->getValue(self::XML_PATH_EMAIL_SENDER, $storeScope))
                ->addTo($this->scopeConfig->getValue(self::XML_PATH_EMAIL_RECIPIENT, $storeScope))
                ->setReplyTo($post['email'])
                ->getTransport();

            $transport->sendMessage();
            $this->inlineTranslation->resume();
            $this->messageManager->addSuccess(
                __('Thanks for contacting us with your comments and questions. We\'ll respond to you very soon.')
            );
            $this->_redirect('YOUR_CMS_PAGE_Identifier'); // change here 
            return;
        } catch (\Exception $e) {
            $this->inlineTranslation->resume();
            $this->messageManager->addError(
                __('We can\'t process your request right now. Sorry, that\'s all we know.')
            );
            $this->_redirect('YOUR_CMS_PAGE_Identifier');  // change here 
            return;
        }
    }
}

Now you need to enable php bin/magento module:status

php bin/magento module:enable VendorName_ModuleName for enable the module.
and run php bin/magento setup:upgrade for enabled modules are properly registered.

Then clear cache.

NOte:This module is tested

Best Answer

Related Solutions

Magento – magento 2 captcha not rendering if I override layout xml

Override Module-Contact View and Controller in Magento 2

Related Topic