contact form popup

Hey Andrii,
To create a lightbox popup for your contact form, first add this code to the end of your functions.php file in Appearance > Editor:

function popup_inline() { ?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});
});
</script>
<?php }

add_action('wp_head', 'popup_inline');

Then add this code in the General Styling > Quick CSS field:

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

please adjust the max-width to suit

Then in a code block on your page add this code for the lightbox:

<div id="test-popup" class="white-popup mfp-hide">
<p>PLACE CONTENT HERE</p>
</div>

Then in a second window, open a new post in the default editor and using the wand tool, create a contact form so you can copy the shortcode for it.

Paste the shortcode in your popup, replacing the text “PLACE CONTENT HERE”

Now to create the button to open the popup, we need to add the class “open-popup-link” to the link inside the button and make the link point to “#test-popup” this can be a little tricky so I’ve added and example button”

 <div class="avia-button-wrap avia-button-center  avia-builder-el-99"><a href="#test-popup" class="open-popup-link avia-button   avia-icon_select-no avia-color-theme-color avia-size-medium avia-position-center "><span class="avia_iconbox_title">I’d like more info, please</span></a></div>

If you want some help creating a custom button, first make a button you like on a test page and post the url so we can copy the html and add the class for you.
Then add the button code in a code block element where you want it on your page. The popup code block, from above, can be anywhere on your page, and that is all there is to it.

To open other links in a lightbox, simply add this to the end of your links”

?iframe=true

Here are some examples, to make a link for an image to open in lightbox:

<a href="http://127.0.0.1/wp-content/uploads/2015/07/portfolio-9.jpg" rel="prettyPhoto" title="">Image</a>

To open pages in lightbox using an iframe:

<a href="http://127.0.0.1/pages/blank-pages/coming-soon-page/?iframe=true">Page</a>

If you link to one of your pages, such as a FAQ, try to disable the header, sidebar, & footer for that page in the page layout options.
This is the format for opening a Youtube video in lightbox:

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /></a>

Let us know if you have any questions

Best regards,
Mike

Hi,
1: To fix the styling of the contact form in the light box, add the class “main_color” to the popup like this:

<div id="test-popup" class="white-popup mfp-hide main_color">
<p>PLACE CONTENT HERE</p>
</div>

This also fixes the styling of the success message.

2: The contact form shows the success message until the user leaves the page, thus refreshing the session cookie, because a real person would not stay on the same page sending multiple messages, a spam bot would though. The popup contact form behaves the same way, closing the box doesn’t refresh it, the session cookie is set until the page is refreshed.
I hope this explains the reason the success message preforms this way, and I would not recommend changing this function, but if you really wanted to the solution would be to add some javascript to refresh the page on popup close, which will refresh the whole page.

3: To prevent the page from scrolling while the popup is open, please add this code to the top of your code block element above your popup code:

<script>$(document).ready(function() {
$('.white-popup')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('body').css('overflow', 'hidden');
    });
$('.mfp-close')
    .css('cursor', 'pointer')
    .click(function(e) {
        e.preventDefault();
        $('body').css('overflow', 'auto');
    });
});</script>

Best regards,
Mike

Hi,
To style the form error, please add this code in the General Styling > Quick CSS field:

#top .white-popup .valid .text_input,#top .white-popup .valid .text_area,#top .white-popup .valid .select {
    border: 1px solid #9AA600
}

#top .white-popup .error .text_input,#top .white-popup .error .text_area,#top .white-popup .error .select {
    border: 1px solid #DF653E
}

#top .white-popup .ajax_alert .text_input,#top .white-popup .ajax_alert .text_area,#top .white-popup .ajax_alert .select {
    border: 1px solid #ffb628
}

#top .white-popup .valid .input_checkbox_label {
    color: #9AA600
}

#top .white-popup .error .input_checkbox_label {
    color: #DF653E
}

After I open the popup I am unable to scroll the window.
But when I open the popup the page does scroll a little bit on it’s own. Is this what you are talking about?

Best regards,
Mike

Hi,
I’ve tried working on this, but didn’t find a solution, so I will ask the rest of the team to take a look.
Thanks for your patience.

Best regards,
Mike