0

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.

1

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.

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.