Lightbox for mailchimp form

Hey 1039 Online!

Please turn on debugging mode – http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/ and then create your form and copy its shortcode from the field below ALB. Add Code Block element to your page and then add following code inside it

<a href="#test-popup" class="open-popup-link">Click this button to open form in lightbox</a>

<div id="test-popup" class="white-popup mfp-hide">
YOUR SHORTCODE GOES HERE
</div>

and then add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

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

and finally, add following code to Functions.php file in Appearance > Editor

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

Cheers!
Yigit

• This reply was modified 8 years, 9 months ago by Yigit.

Hi!

You are welcome.
If it does not work correctly, feel free to let us know :)
Enjoy your weekend!

Cheers!
Yigit