jquerywordpresssecurityshadowbox

Hacking Contact Form 7 with shadowbox popup in Wordpress


I am creating a landing page for a client where someone enters info, and it sends and emails and a thank you lightbox pops up then onclick of that they are redirected to the main site.

They are already on a WordPress installation, so i figured i would use contact form 7 like I usually do.

This has worked fine and I got the system to function properly, however, I manually injected the shadowbox pop code to fire after the beginning of the send function...

This probably isn't the safest method, and it has proved to present problems when anyone tries to login to worpdress we get white screen of death. I can rename the plugin to get in, but that is not a long term solution.

My question is, what is the correct way to add the shadow box popup to this plugin?

Here is the modified function, with the injected jQuery shadow box.

function form_response_output() {
    $class = 'wpcf7-response-output';
    $content = '';

    if ( $this->is_posted() ) { // Post response output for non-AJAX
        if ( isset( $_POST['_wpcf7_mail_sent'] ) && $_POST['_wpcf7_mail_sent']['id'] == $this->id ) {
            if ( $_POST['_wpcf7_mail_sent']['ok'] ) {
                $class .= ' wpcf7-mail-sent-ok';
                $content = $_POST['_wpcf7_mail_sent']['message'];
                $url = get_bloginfo('url');
                echo "<script type=\"text/javascript\">
                Shadowbox.init({
                // skip the automatic setup again, we do this later manually
                   skipSetup: true
                });
                window.onload = function() {
                    Shadowbox.open({
                        content:'<a href=\"".$url."\" onclick=\"Shadowbox.close()\"><img src=\"".$url."/wp-content/themes/IGS/images/success.png\" /></a>',
                        player: \"html\",
                        title: \"\",
                        height: 479,
                        width: 636
                      });
                };
                </script>";
            } else {
                $class .= ' wpcf7-mail-sent-ng';
                if ( $_POST['_wpcf7_mail_sent']['spam'] )
                    $class .= ' wpcf7-spam-blocked';
                $content = $_POST['_wpcf7_mail_sent']['message'];
            }
        } elseif ( isset( $_POST['_wpcf7_validation_errors'] ) && $_POST['_wpcf7_validation_errors']['id'] == $this->id ) {
            $class .= ' wpcf7-validation-errors';
            $content = $this->message( 'validation_error' );
        }
    } else {
        $class .= ' wpcf7-display-none';
    }

    $class = ' class="' . $class . '"';

    return '<div' . $class . '>' . $content . '</div>';
}

As you can see, it's not the prettiest, but it does work. Now, if I could only get it to function correctly with WordPress...


Solution

  • When editing the form, check on the last box called "Additional Settings", there you can add this call:

    on_sent_ok: "your_js_function();"
    

    There you can replace "your_js_function" with a function call that would fire the modal pop up or anything you need.