Okay
  Public Ticket #510012
Contact form 7 in a modal popup
Closed

Comments

  • Saulius started the conversation
    August 24, 2015 at 1:49pm

    I'm building single-web-page.

    We will have a contact form (Call for action), wich would be best to implement in a popup modal window. I've seen the proposed scenario on http://themeforest.net/item/salient-responsive-multipurpose-theme/4363266/comments?page=128 but this only helps to show image in a lightbox. I need modal window to accomodate whole Contact form 7 inquiry.

  •  9,013
    Tahir replied
    August 25, 2015 at 11:24pm

    Hey ,

    You can use inline html content also in prettyphoto. See Prettyphoto documentation: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation .

    Thanks

    ThemeNectar Support Team 

  • mokumax replied
    June 5, 2017 at 5:11pm

    This link is broken. Any chance of updated place for documentation on how to do this?


  •  9,013
    Tahir replied
    June 6, 2017 at 11:32am

    Hey,

    Here is the correct LInk : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/ .

    Thanks 

    ThemeNectar Support Team 

  • Bryan replied
    June 14, 2017 at 4:22pm

    This does not work in the latest version of Salient theme. 

    See test page below for code example.

    http://simplepleasurestravel.com/test-page/

    Interestingly enough, the code below worked great prior to upgrade.

    href="http://simplepleasurestravel.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=84vtg3&iframe=true&width=600&height=1000"

    Now gives an error "image could not load".

    PrettyPhoto JS installs with the theme so not adding to <head> as prescribed. Instead calling it on the page as:

    <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
      });
    </script>

    Please advise on when this will be fixed and/or how to resolve.

    Thanks so much for your help!

  •  9,013
    Tahir replied
    June 15, 2017 at 12:42pm

    @Bryan,

    Unfortunately Prettyphoto is a deprecated library and it is recommended to use Magnific Lightbox Instead with Salient. 

    To Switch To Magnific Simply select it in the Dropdown in Salient Theme Options Panel -> General Settings -> Functionality.

    Thanks

    ThemeNectar Support Team 

  • Bryan replied
    June 15, 2017 at 2:04pm

    Did you test the ability to use Magnific for form popups before deciding to deprecate PrettyPhoto?

    Where can we find a working example of a Magnific popup for a form on the Salient theme?

    Thanks

  • Bryan replied
    June 15, 2017 at 3:19pm

    Found example of Magnific Popup working on non-Salient theme site here.

    Which was linked to the Magific author's guidance page found here.

    Have updated the sample code on the test page:

    http://simplepleasurestravel.com/test-page/

    Code sample does not work.

    Please advise on how to resolve/when this will be fixed.

    Thank you.

  •  9,013
    Tahir replied
    June 16, 2017 at 11:50am

    Assigning this to the Developer so this can be looked into for upcoming updates. 

    Please note that I cannot provide an ETA as to the turn around time in regards to a resolution for this request, but you will be notified as soon as any findings become available on this support request 

    Thanks 

    ThemeNectar Support Team 

  • Andrei replied
    July 10, 2017 at 7:12pm

    Hey Bryan,

    I've managed to make the sample work. By trimming the jQuery code as shown bellow: 

    $('#open-popup').magnificPopup({
        items: [
          {
            src: '#my-popup', // CSS selector of an element on page that should be used as a popup
            type: 'inline'
          }
        ],
        gallery: {
          enabled: true
        },
        type: 'image' // this is a default type
    });

    In case it doesn't work like that put the code in a .js file (popup.js) and use a child theme so you can set the scripts' loading order. Bellow is the code you should put in the functions.php file from the child theme.

    function load_scripts() {
      wp_register_script( 'jquery-popup', get_stylesheet_directory_uri() . '/js/popup.js', array( 'jquery' ), false, true );
      wp_enqueue_script( 'jquery-popup' );
    }

    add_action('wp_enqueue_scripts', 'load_scripts', 40);
    ?>

  • Bryan replied
    August 2, 2017 at 7:01pm

    Andrei, thanks so much for taking the time to work on this concern. You're guidance has helped, but am still at a loss as to how to create a form pop-up using the CTA button/code.

    You can see from the test page that the magnificPopup does create a popup of the the Gravity Form. This is a good first step, but again doesn't address our root issue: creating a popup form from the CTA button.

    In the previous build, we were able to insert the following URL into the footer.php file:

    href="http://simplepleasurestravel.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=84vtg3&iframe=true&width=600&height=1000" rel="prettyPhoto[iframes]

    Now this does not work because support for prettyPhoto has been "deprecated".

    Have been unable to transfer this test-page code to work with the built-in Salient Theme CTA button, and apply styling. 

    Would you have any thoughts on how to make this work? Open to investing in your help. PM me to discuss.

    Tahir, what's the status of getting this resolved in the next build?

    Am at a loss as to why you chose to break prettyPhoto integration in the current theme. Deprecating PrettyPhoto support when it worked perfectly for this solution makes no sense. 

    Completely frustrated as breaking the integration has caused significant loss in leads generated by the website.