Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #375305

    Hi,

    We use FormidablePRO to generate our forms across our website and we would like to have some of the forms opening in a lightbox popup style window.

    Is there an easy way to do this through the theme itself? I saw some old posts using old plugins that are not updated for a while.

    Thank you

    #375355

    Hey!

    Refer to this topic:
    https://kriesi.at/support/topic/inline-content-in-magnific-popup/

    The idea is to wrap the content to be lightboxed inside a color section (with a custom ID) and then simply put a link like this:

    <a class="open-popup-link" href="#contact-form">
    

    Regards,
    Josue

    #375391

    Thank you Josue,

    Isn’t there an easier and more flexible solution?

    I do not see how I can put the custom link as the example above when I am using the Button element for example.

    #375801

    Hi!

    For a button you can do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, to add the CSS class to it. Or just copy the button markup from your page source code and paste that into a codeblock element and add the class to it that way.

    Cheers!
    Elliott

    #378079

    Hi Josue,
    I added the following:

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

    into my functions.php as instructed here: https://kriesi.at/support/topic/inline-content-in-magnific-popup/

    Then I created the following link: Open Google but nothing happened.

    Sorry for the silly question but do I need to install IW Magnific Popup or any other plugin for this to work?

    Thank you

    #378103

    Hi!

    No, you don’t need to install Magnific Popup, it is already installed but there is a little misunderstandment, if you want to open an external page/website you wouldn’t need to modify functions.php, just link it this way (note iframe?true at the end of the URL):

    <a href='http://google.com?iframe=true'>Open Google</a>
    

    However, if the content you want to lightbox is on the same page where the link is (ex: a hidden section with an ID of content-to-open), then you’d need to have the link this way (+ the code in functions.php):

    <a href='#content-to-open' class='open-popup-link'>Open Inline Content</a>
    

    Best regards,
    Josue

    #378197

    Thank you Josue,
    I was able to open the pages in a pop-up, however, the code changes every time I open / change the page contents.
    The ‘ are converted into ” after saving. Any workaround for this?
    Thank you

    #378198

    Hey!

    Try using a Code Block element.

    Cheers!
    Josue

    #378201

    Hi,

    The problem with the code block is that we may have links to open in the middle of regular text for example where the code block is not so easy to use. Is there a way to force WordPress / Enfold to NOT replace ‘ by ” ?

    A second query:
    Based on Elliott’s help, I was able to add the CSS code to the buttons.
    Is there a way to add an “iframe” class somewhere in the code and then simply apply that class to make all buttons / links that need to open in an iframe to simply use the iframe css code? Check the screenshot please: http://d.pr/i/12MYZ/1ACA6nCQ

    Thank you

    #378209

    Hey!

    Yes, that would work too and would solve the quote issue, change the code to this(iframe-links would be the class):

    function add_custom_script(){
    ?>
    <script>
    jQuery(window).load(function(){
    
    jQuery('.iframe-links a').magnificPopup({
      type:'inline',
      midClick: true 
    });
          
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_script');

    Regards,
    Josue

    #378213

    Hi Josue,

    Unfortunately the button stopped working when I add the class. Please check the sshot if I did something wrong: http://d.pr/i/1kHNi/4uaWpr6J

    #378674

    Hi again,
    I tried a few other options but none work so far.
    Any update on how it’s possible to use the pop-up lightbox as a class?

    Thank you

    #379109

    Hey!

    The idea was to give the iframe-links class to a color section and affect all buttons / links inside that color section.

    Best regards,
    Josue

    #379362

    Thank you Josue,
    I am not sure if I understood how the color section will work but I will give a try.
    However, the result I was expecting was to have a lightbox / popup when pressing a button. Can I use it in a similar way such as the iframe-links method by applying a css style?

    Thank you

    #379572

    Hi!

    Yes, the idea i had was something like this – http://screencast.com/t/1DzlApTBdj, but i’m just guessing there, it would helpful if you could share us your page layout structure so we can give a better advice.

    Best regards,
    Josue

    #379699
    This reply has been marked as private.
    #381327

    Hi,
    Is there any update please?
    Thank you

    #382179

    Hi,

    Sorry for my late reply, the link is not longer working. Also, can you please create us a WordPress administrator account? post it here as a private reply.

    Regards,
    Josue

    #399214

    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.

    #399232

    Pretty neat result, thanks for sharing your solution :)

    Regards,
    Josue

    #399497

    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
    Two triggers

    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:
    Image trigger

    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:
    Form container

    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):
    Form section container

    At the end, edit the Enfold Block Code, and put your own Form shortcode:
    form container section bloc code

    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.

Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Open form in a lightbox popup’ is closed to new replies.