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

1 ACCEPTED SOLUTION

Accepted Solutions

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

View solution in original post

4 REPLIES 4

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.

Was my answer helpful? You can accept it as a solution.
175+ Professional Extensions for M1 & M2
Need a developer?Just visit Contact Us Now

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 .