I need to show the default contact form in a modal and then submit the form using Ajax then show the contents of a static block in the modal to display a "thank you" message. I believe when I'm going wrong is in my controller. This is what I have:
<?php namespace AdamGreenwell\ContactUs\Controller\Index; use Magento\Contact\Model\ConfigInterface; use Magento\Contact\Model\MailInterface; use Magento\Framework\App\Action\Context; use Magento\Framework\App\Request\DataPersistorInterface; use Magento\Framework\Controller\Result\Redirect; use Magento\Framework\Exception\LocalizedException; use Magento\Framework\HTTP\PhpEnvironment\Request; use Psr\Log\LoggerInterface; use Magento\Framework\App\ObjectManager; use Magento\Framework\DataObject; use Magento\Framework\UrlFactory; use Magento\Framework\Controller\ResultFactory; use Magento\Customer\Model\Session\Interceptor; class Ajaxcontact extends \Magento\Contact\Controller\Index { /** * @var DataPersistorInterface */ private $dataPersistor; /** * @var Context */ private $context; /** * @var MailInterface */ private $mail; /** * @var LoggerInterface */ private $logger; /** * @var \Magento\Framework\Json\Helper\Data $helper */ protected $helper; /** * @var \Magento\Framework\Controller\Result\JsonFactory */ protected $resultJsonFactory; /** * @var \Magento\Framework\Controller\Result\RawFactory */ protected $resultRawFactory; /** * @param Context $context * @param ConfigInterface $contactsConfig * @param MailInterface $mail * @param DataPersistorInterface $dataPersistor * @param LoggerInterface $logger * @param \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory * @param \Magento\Framework\Controller\Result\RawFactory $resultRawFactory */ public function __construct( Context $context, ConfigInterface $contactsConfig, MailInterface $mail, DataPersistorInterface $dataPersistor, LoggerInterface $logger = null, \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory, \Magento\Framework\Controller\Result\RawFactory $resultRawFactory, UrlFactory $urlFactory ) { parent::__construct($context, $contactsConfig); $this->context = $context; $this->mail = $mail; $this->dataPersistor = $dataPersistor; $this->resultJsonFactory = $resultJsonFactory; $this->resultRawFactory = $resultRawFactory; $this->configInterface = $contactsConfig; $this->logger = $logger ?: ObjectManager::getInstance()->get(LoggerInterface::class); $this->urlModel = $urlFactory->create(); } /** * Post user question * * @return Redirect */ public function execute() { if (!$this->isPostRequest()) { return $this->resultRedirectFactory->create()->setPath('*/*/'); } try { $this->sendEmail($this->validatedParams()); $this->messageManager->addSuccessMessage( __('Thanks for contacting us with your comments and questions. We\'ll respond to you very soon.') ); $this->dataPersistor->clear('contact_us'); } catch (LocalizedException $e) { $this->messageManager->addErrorMessage($e->getMessage()); $this->dataPersistor->set('contact_us', $this->getRequest()->getParams()); } catch (\Exception $e) { $this->logger->critical($e); $this->messageManager->addErrorMessage( __('An error occurred while processing your form. Please try again later.') ); $this->dataPersistor->set('contact_us', $this->getRequest()->getParams()); } return $this->_view->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('contact_submission_successful')->toHtml(); } /** * @param array $post Post data from contact form * @return void */ private function sendEmail($post) { $this->mail->send( $post['email'], ['data' => new DataObject($post)] ); } /** * @return bool */ private function isPostRequest() { /** @var Request $request */ $request = $this->getRequest(); return !empty($request->getPostValue()); } /** * @return array * @throws \Exception */ private function validatedParams() { $request = $this->getRequest(); if (trim($request->getParam('firstname')) === '') { throw new LocalizedException(__('First name is missing')); } if (trim($request->getParam('lastname')) === '') { throw new LocalizedException(__('Last name is missing')); } if (trim($request->getParam('comment')) === '') { throw new LocalizedException(__('Message is missing')); } if (false === \strpos($request->getParam('email'), '@')) { throw new LocalizedException(__('Invalid email address')); } if (trim($request->getParam('hideit')) !== '') { throw new \Exception(); } return $request->getParams(); } }
This is how I am sending the request:
<script> require([ 'jquery', 'mage/mage' ], function ($) { var dataForm = $('#contact-form'); dataForm.mage('validation', {}); $('.contact-submit').on('click', function () { if (dataForm.validation('isValid')) { var formData = new FormData(); $.ajax({ url: '<?php echo $this->getUrl('contactus/index/ajaxcontact'); ?>', data: formData, processData: false, contentType: "application/json", showLoader: true, type: 'POST', dataType: 'json', success: function (response) { if (!response.errors) { if (response.redirectUrl) { location.href = response.redirectUrl; } } else { $(' .contact-us .messages .message div').text(response.message); $(' .contact-us .messages .message').show(); setTimeout(function () { $('.contact-us .messages .message').hide(); }, 5000); } } }); return false; } }) }); </script>
But it's not working. Where am I going wrong?
Solved! Go to Solution.
Try this
<p><a href="javascript:void(0)" class="open-contact-form">Open Contact Form</a></p> <div id="popup-modal"> <div class="contact-form-popup" style="display: none;"> <?php echo $this->getLayout() ->createBlock("Magento\Contact\Block\ContactForm") ->setTemplate("Magento_Contact::form.phtml") ->toHtml(); ?> </div> <div class="static-block-message" style="display: none;"> <?php echo $this->getLayout() ->createBlock('Magento\Cms\Block\Block') ->setBlockId('your_block_identifier') ->toHtml(); ?> </div> </div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function($, modal) { jQuery(document).ready(function(){ var options = { type: 'popup', responsive: true, innerScroll: true, title: 'Contact Form', buttons: [{ text: $.mage.__('Close'), class: '', click: function () { this.closeModal(); } }] }; var openModal = modal(options, $('#popup-modal')); jQuery('body').on('click', '.open-contact-form', function(){ jQuery('.contact-form-popup').show(); jQuery('.static-block-message').hide(); jQuery('#popup-modal').modal('openModal'); }); jQuery('body').on('click', '#contact-form .action.submit', function(e){ e.preventDefault(); e.stopImmediatePropagation(); jQuery.ajax({ type: 'post', url: '<?php echo $block->getUrl("contact/index/post") ?>', data: jQuery('#contact-form').serialize(), cache: false, showLoader: 'true', success: function(response) { alert('success'); jQuery('.contact-form-popup').hide(); jQuery('.static-block-message').show(); } }); return false; }); }); } ); </script>
Try this
<p><a href="javascript:void(0)" class="open-contact-form">Open Contact Form</a></p> <div id="popup-modal"> <div class="contact-form-popup" style="display: none;"> <?php echo $this->getLayout() ->createBlock("Magento\Contact\Block\ContactForm") ->setTemplate("Magento_Contact::form.phtml") ->toHtml(); ?> </div> <div class="static-block-message" style="display: none;"> <?php echo $this->getLayout() ->createBlock('Magento\Cms\Block\Block') ->setBlockId('your_block_identifier') ->toHtml(); ?> </div> </div> <script> require( [ 'jquery', 'Magento_Ui/js/modal/modal' ], function($, modal) { jQuery(document).ready(function(){ var options = { type: 'popup', responsive: true, innerScroll: true, title: 'Contact Form', buttons: [{ text: $.mage.__('Close'), class: '', click: function () { this.closeModal(); } }] }; var openModal = modal(options, $('#popup-modal')); jQuery('body').on('click', '.open-contact-form', function(){ jQuery('.contact-form-popup').show(); jQuery('.static-block-message').hide(); jQuery('#popup-modal').modal('openModal'); }); jQuery('body').on('click', '#contact-form .action.submit', function(e){ e.preventDefault(); e.stopImmediatePropagation(); jQuery.ajax({ type: 'post', url: '<?php echo $block->getUrl("contact/index/post") ?>', data: jQuery('#contact-form').serialize(), cache: false, showLoader: 'true', success: function(response) { alert('success'); jQuery('.contact-form-popup').hide(); jQuery('.static-block-message').show(); } }); return false; }); }); } ); </script>
Wonderful! Thank you very much!
I was making the whole process much harder than it had to be. Thank you again, that helped tremendously.