cancel
Showing results for 
Search instead for 
Did you mean: 

Show "Contact Us" form inside a popup window.

SOLVED

Show "Contact Us" form inside a popup window.

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

4 REPLIES

Re: Show "Contact Us" form inside a popup window.

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.

Found something useful, please give "Kudos" or "Accept as Solution" for Token of Appreciation.
Free Magento Extensions : https://magecomp.com/free-magento-extensions.html

Re: Show "Contact Us" form inside a popup window.

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?

Re: Show "Contact Us" form inside a popup window.

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.

 

 

Query solved? Accept as Solution.Thanks
Eric Baily

Re: Show "Contact Us" form inside a popup window.

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 .