Hello,
I have Magento ver. 1.9.1.0. I am trying to show a "Contact Us" form inside a pop-up window. I have managed to create the pop-up window by following these instructions, but I am not sure how to show the "Contact Us" form inside the window. Obviously, I prefer to use an existing Magento Contact form (only the labels/fields and the button). Any suggestions?
Thank you
Solved! Go to Solution.
http://getbootstrap.com/dist/css/bootstrap.min.css
https://github.com/vast-engineering/jquery-popup-overlay/blob/gh-pages/jquery.popupoverlay.js
Download js and css in your website from below path.
magento_root\skin\frontend\MyPackage\MyTheme\css
magento_root\skin\frontend\MyPackage\MyTheme\js
Add js and css in the path.
Step 1:
magento_root\app\design\frontend\MyPackage\MyTheme\layout\contacts.xml
Edit and add the below code after line number 32 in head section.
<action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name><params /></action> <action method="addItem"><type>skin_js</type><name>js/jquery.popupoverlay.js</name></action>
Step 2:
magento_root\app\design\frontend\MyPackage\MyTheme\template\contacts\form.phtml
Edit the file and replace with below code.
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div> <h2>Contact Us</h2> <p class="lineheight"> <a class="initialism fade_open btn btn-success" href="#fade">Contact Form</a> </p> <!-- Fade --> <div id="fade" class="well"> <div class="page-title"> <h1><?php echo Mage::helper('contacts')->__('Contact Us') ?></h1> </div> <form action="<?php echo $this->getFormAction(); ?>" id="contactForm" method="post" class="scaffold-form"> <div class="fieldset"> <h2 class="legend"><?php echo Mage::helper('contacts')->__('Contact Information') ?></h2> <p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p> <ul class="form-list"> <li class="fields"> <div class="field"> <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label> <div class="input-box"> <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" /> </div> </div> <div class="field"> <label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label> <div class="input-box"> <input name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" /> </div> </div> </li> <li> <label for="telephone"><?php echo Mage::helper('contacts')->__('Telephone') ?></label> <div class="input-box"> <input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text" type="tel" /> </div> </li> <li class="wide"> <label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Comment') ?></label> <div class="input-box"> <textarea name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea> </div> </li> </ul> </div> <div class="buttons-set"> <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" /> <button type="submit" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button> </div> </form> <button class="fade_close btn btn-default">Close</button> </div> <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function () { $j('#fade').popup({ transition: 'all 0.3s', scrolllock: true }); }); </script> <script type="text/javascript"> //<![CDATA[ var contactForm = new VarienForm('contactForm', true); //]]> </script>
Once the code is added check your front-end Contact Us page.
Hope this helps you.
Hi @Under1009,
Add the following js file:
<!-- Include jQuery --> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <!-- Include jQuery Popup Overlay --> <script src="http://vast-eng.github.io/jquery-popup-overlay/jquery.popupoverlay.js"></script>
And add the Contact Form ID here:
<script> $(document).ready(function() { // Initialize the plugin $('#contactFormId').popup(); }); </script>
Note: if you already have the jQeruy-1.8.2.min.js or newer version then no need to add it again.
Let me know if need further help.
I don't have the "Contact Us" form. I would like to use an existing Megento's Contact form and just show it in the pop-up window. Any suggestions?
http://getbootstrap.com/dist/css/bootstrap.min.css
https://github.com/vast-engineering/jquery-popup-overlay/blob/gh-pages/jquery.popupoverlay.js
Download js and css in your website from below path.
magento_root\skin\frontend\MyPackage\MyTheme\css
magento_root\skin\frontend\MyPackage\MyTheme\js
Add js and css in the path.
Step 1:
magento_root\app\design\frontend\MyPackage\MyTheme\layout\contacts.xml
Edit and add the below code after line number 32 in head section.
<action method="addItem"><type>skin_css</type><name>css/bootstrap.min.css</name><params /></action> <action method="addItem"><type>skin_js</type><name>js/jquery.popupoverlay.js</name></action>
Step 2:
magento_root\app\design\frontend\MyPackage\MyTheme\template\contacts\form.phtml
Edit the file and replace with below code.
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->toHtml() ?></div> <h2>Contact Us</h2> <p class="lineheight"> <a class="initialism fade_open btn btn-success" href="#fade">Contact Form</a> </p> <!-- Fade --> <div id="fade" class="well"> <div class="page-title"> <h1><?php echo Mage::helper('contacts')->__('Contact Us') ?></h1> </div> <form action="<?php echo $this->getFormAction(); ?>" id="contactForm" method="post" class="scaffold-form"> <div class="fieldset"> <h2 class="legend"><?php echo Mage::helper('contacts')->__('Contact Information') ?></h2> <p class="required"><?php echo Mage::helper('contacts')->__('* Required Fields') ?></p> <ul class="form-list"> <li class="fields"> <div class="field"> <label for="name" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Name') ?></label> <div class="input-box"> <input name="name" id="name" title="<?php echo Mage::helper('contacts')->__('Name') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserName()) ?>" class="input-text required-entry" type="text" /> </div> </div> <div class="field"> <label for="email" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Email') ?></label> <div class="input-box"> <input name="email" id="email" title="<?php echo Mage::helper('contacts')->__('Email') ?>" value="<?php echo $this->escapeHtml($this->helper('contacts')->getUserEmail()) ?>" class="input-text required-entry validate-email" type="email" autocapitalize="off" autocorrect="off" spellcheck="false" /> </div> </div> </li> <li> <label for="telephone"><?php echo Mage::helper('contacts')->__('Telephone') ?></label> <div class="input-box"> <input name="telephone" id="telephone" title="<?php echo Mage::helper('contacts')->__('Telephone') ?>" value="" class="input-text" type="tel" /> </div> </li> <li class="wide"> <label for="comment" class="required"><em>*</em><?php echo Mage::helper('contacts')->__('Comment') ?></label> <div class="input-box"> <textarea name="comment" id="comment" title="<?php echo Mage::helper('contacts')->__('Comment') ?>" class="required-entry input-text" cols="5" rows="3"></textarea> </div> </li> </ul> </div> <div class="buttons-set"> <input type="text" name="hideit" id="hideit" value="" style="display:none !important;" /> <button type="submit" title="<?php echo Mage::helper('contacts')->__('Submit') ?>" class="button"><span><span><?php echo Mage::helper('contacts')->__('Submit') ?></span></span></button> </div> </form> <button class="fade_close btn btn-default">Close</button> </div> <script> var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. $j(document).ready(function () { $j('#fade').popup({ transition: 'all 0.3s', scrolllock: true }); }); </script> <script type="text/javascript"> //<![CDATA[ var contactForm = new VarienForm('contactForm', true); //]]> </script>
Once the code is added check your front-end Contact Us page.
Hope this helps you.
Thanks for the detail information.
How do we generate popup in all pages . For ex whenever i click contact us link in footer i want to open the pop up in all pages.
Once again thanks for knowledge sharing .