Redirect Link for Popup Pro

Hi, I cant seem to get my form redirect to work. If i dont put the form in the pop up it works, otherwise it doesnt, I think the form is not letting me redirect it or is over riding the redirect

  • Dimitris

    Hey there Tej,

    hope you're having a beautiful day and thanks for reaching us! :slight_smile:

    Have you tried the different options in the popup settings? See next screenshot

    If this still gives you troubles, could you please grant us with support access to your website via "WPMUDEV Dashboard" plugin as described here https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/?

    Also please inform us on the specific popup, if there're more than one, and the plugin/page where you have setup your contact form, so you could have a look and maybe try to replicate in our test installations. :slight_smile:

    Looking forward for your feedback!
    Warm regards,
    Dimitris

  • Adam Czajczyk

    Hello Tej!

    I accessed your site and mirrored popup and form settings on my sandbox site. I was able to replicate the issue fully so I started to dig a bit deeper in order to find out what's causing this.

    The issue here is that both plugins use complex JS code and AJAX calls to handle form submissions. The Contact Form doesn't put an "inline JS" to run the redirect (such JS should be handled by PopUp pro) and the PopUp Pro has to parse both the form and its return to be able to display form content and it's return values properly.

    It results in that the redirect (and most of the "native Contact Form 7" "Additional Settings" JS code) won't work here. Changing this would require serious changes in a code of any of these two plugins to either make PopUp pro handle it other way or to make Contact Form 7 handle JS code in a more "direct" ("oldschool") way. In both cases it would require custom development that't be outside the scope of this forum so you may want to post a question on our "Jobs & Pros" job board (please note: no WPMU DEV staff involved!) here:

    https://premium.wpmudev.org/wordpress-development/

    There is a workaround however. It's kind of "dirty hack" but does the trick on my test setup:

    - create a separate page (not post) on your site
    - if there are page templates available use the most "clean" one (no sideabars, full widht etc); if there's no page templates, you would want to create a custom page template like that for this page
    - put only the form shortcode there (no other content)
    - edit form's "Additional Settings" and instead of

    on_sent_ok: "location="http://yoursite.com/some-url"

    use

    on_sent_ok: "parent.location="http://yoursite.com/some-url"

    - edit popup and instead of a form shortcode use an "iframe element to load that page, like this:

    <iframe src="http://yoursite.com/page_with_form">

    The downside is that there'll still be a page available via direct URL with that form on it and it won't look "nice" if loaded directly, but I think that if there'll be no link to that page anywhere on the site (except that iframe in popup of course) that shouldn't be a big deal.

    There'll be also some additional CSS styling necessary:
    - to make "iframe" element fit and match the popup nicely
    - to hide all visible parts of the page with form, except the form itself.

    I think you could give it a try and in case you needed some help with CSS styling, let me know and I should be able to help you with this.

    Best regards,
    Adam

  • Tej

    Hi Adam,
    Thank you so much for this detailed report. Is there any other method to tzckle this in a simpler way? For example using another contact form plug in maybe?
    Is there an alternative way to include a form in the pop up.
    I am open to using another form plugin or another solution.
    I basically need to capture people's information as they land on these two sites.
    Any recommendations and help will be greatly appreciated.

  • Adam Czajczyk

    Hello Tej!

    I'm not quite aware about other forms/popup plugins "combos" performance with this scenario but I think in most cases you may encounter similar issues unless you go for a fully custom developed solution that would be integrated and designed to work that way.

    There is actually another and much simpler way to submit a form and redirect using the PopUp Pro and Contact Form 7 but it has a significant downside: it breaks form validation. That means that the form gets send but it's not checked for required fields and/or if data in the fields is right.

    It could however be "extended" to validate fields "outside of the Contact Form 7". Basic way would be to:
    - remove the redirect code from "Additional Settings" of the form
    - put a form shortcode into popup but with an additional parameter, like this:

    [contact-form-7 id="7918" title="Form Title" html_id="my_unique_id"]

    - put this code in the same popup below the shortcode (in "Text" mode of popup editor):

    <button onclick="document.getElementById('myform').submit();window.top.location.href='http://YOUR-REDIRECT-URL-HERE';">SUBMIT></button>

    The "myform" in code above must be the same as the value of "html_id" shortcode attribute and you would want to replace the "YOUR-REDIRECT-URL-HERE" with a target URL to which you wan't to redirect.

    - add this CSS to popup to hide original submit button:

    .wpcf7-submit {display:none;}

    As I said, it works but unfortunately it breaks the form validation. However, the whole code for "onclick=" is a pure JavaScript and this can be used to introduce your own validation.

    Still though, that's a bit - though much simpler than development of fully dedicated solution - of custom coding. I think if that would work for you and there wouldn't be many fields on the form I may be able to provide you with some more tips on validation for such form.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Tej!

    The code that you used doesn't follow exactly the code I suggested. The "ID" part has to be fixed.

    In your code you used ID that's the ID of the contact form ("2374") which is not what you need. You wan't to add the "html_id" attribute to the contact form shortcode and specify your own HTML element ID there so the shortcode like this

    [contact-form-7 id="2374" title="Contact Us pop up form Luxury Honeymoon" html_id="honeymoon_form"]

    will as result render HTML form (you can see it in page source code) like this

    <form id="honeymoon_form"....

    Then as a value of "getElementById()" function you would use "honeymoon_form" like this

    document.getElementById('honeymoon_form').submit();

    Also, I missed one other important setting (I'm sorry for that): the popup "Form submit" option should better be set to "Refresh popup or close (default)".

    I fixed the code and popup setting for your so please check your popup to see how it should look like. You can repeat that for your other popups but make sure that instead of "honeymoon_form" everywhere you use a unique string for each form.

    I also send to test e-mails (the sender would be "Adam WPMU TEST" and "Adam WPMU TEST II") so please check your inbox (they may have went to a SPAM inbox so check it as well please) and let me know if you received them.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Tej!

    Thank you for your replay.

    I just tested it more and you are right. While I was testing it previously I just checked wrong e-mails by mistake. I sincerely apologize for this and I'm sorry I gave you a non-working solution.

    I have tried some more options but I must say I wasn't able to make it work well. I have already asked our 2-nd line support guys to take a look at it and I hope they'll be able to lend us a hand on this.

    Please keep an eye on this thread and and I'll update it as soon as I get a replay.

    Kind regards,
    Adam

  • Lindeni Mahlalela

    Hello Tej,

    I hope you are doing well today and I am sorry for the delayed response from our side. While doing some maintenance on old threads I noticed that this one is still open and you were waiting for our response. I am sorry for the delay.

    I would like to know if you still need help with this or not. If you confirm that you need help we will continue with troubleshooting and find a usable solution for you if possible. Please let us know if you still need help, it will be very helpful if you grant Support Access again.

    Looking forward to hearing from you and hope you enjoy the rest of your day.

    Cheers,
    Mahlamusa

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.