Open form in a lightbox popup

Yes it works to open a form within Magnific Popup but it’s not simple.
I did it here: http://www.sqli-enterprise.com/solutions/customer-relationship-management/ (click on the big red image ‘workshop gratuit’.
It’s a Gravity form inside but it could be whatever you like.
I’ll give you more details how I did this.
First here the code in my function.php :

function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
    	$('.inline_popup').magnificPopup({
    	  type:'inline',
    	  midClick: true,
    	  preloader: false,
    	  focus: '#input_12_13',
    	  callbacks: {
            beforeOpen: function() {
              if($(window).width() < 700) {
                this.st.focus = false;
              } else {
                this.st.focus = '#input_12_13';
              }
            }
          }
    	});
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');

All the informations are available here :
http://dimsemenov.com/plugins/magnific-popup/
http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type

I will give you how I setup my page later.

Hello and now the details:

In this page: http://www.sqli-enterprise.com/solutions/customer-relationship-management/ I use two trigger to open the Magnific Popup:
1- A image with a link
2- A simple link

First, the most important thing to remember is that both of them are using the CSS class: ‘inline_popup‘
– The simple link trigger is: <a class="inline_popup" href="#content-to-open">workshop gratuit</a>
– The image link trigger is:

It’s important because this CSS class is declared in the JS code of my function.php : $('.inline_popup').magnificPopup({

The HREF of those two links is : #content-to-open and it is the target (a color section) that wrap my Gravity form in a Enfold Block Code.

So in your page, add a Color Section and within it, add a block code:

Edit this Color Section and:
– give the ID field this value: content-to-open
– give the CSS class field this value: mfp-hide (mfp-hide is CSS class that come from the core of Magnific Popup, the role of it, is to hide each elements found on a page that have this class > your form should not be visible when the page load, but only within the Magnific Popup):

At the end, edit the Enfold Block Code, and put your own Form shortcode:

That’s all… :)

—
The code I used in my function.php come from the autor of Magnific Popup but I give you some informations :
focus: ‘#input_12_13’ > should be the Input Name of you first Input field of your form, this tips give the focus to it.
The autor said: ‘When elemened is focused, some mobile browsers in some cases zoom in. It looks not nice, so we disable it‘ More information can be found here http://dimsemenov.com/plugins/magnific-popup/ (look for the ‘Popup with form” example source code.