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.
