Show "Contact Us" form inside a popup window.

[Under1009]

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

[theMageComp]

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.

[Under1009]

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?

[AddWebSolution · Accepted 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.

[g_jagadeesan]

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 .