The Contact Form 7 plugin is one of the most popular plugins when it comes to integrating a contact form into a website created with WordPress. The plugin is quite easy to use – and easy to extend. With various small additional plugins, Contact Form7 can be extended for all kinds of applications.

However, the user experience with Form7 lacks a bit behind. As a rule, the form is displayed empty after submission. The message “Your message has been sent” is displayed below the form, but is often out of sight.

With a few simple steps or actually a few lines of code, the user experience can be significantly improved. What we want to do:

• The form should no longer be displayed after submission.
• The feedback message “Message has been sent” should be in the field of vision.

Do not show the form after submitting

With Contact Form 7, we can add custom code to the code output. We can place a DIV around the form code, which can then be hidden via CSS as soon as the form has been submitted.

<div class="visible-only-if-not-sent">
…Formular…
</div>

The Contact Form 7 plugin adds the “sent” class to the classes of the FORM tag after the form has been submitted. We can make use of this.

The following lines are added to the stylesheet of the theme or child theme:

.wpcf7 form.sent div.visible-only-if-not-sent {
    display: none;
}

This means that the form (or whatever is inside the div-container) is no longer displayed once it has been sent.

Show selected content after submitting the form

Conversely, if you want to display things as soon as the form has been submitted, you can add the following lines to the CSS:

.wpcf7 form div.visible-only-if-sent {
    display: none;
}

.wpcf7 form.sent div.visible-only-if-sent {
    display: block;
}

This can be used, for example, to display additional text fields – or a download link – if you want to link the download of a PDF with the submission of the form in a simple way.

For this to work, the corresponding area must of course first be marked with the “.visible-only-if-sent” class.

This can be summarized as follows:

.wpcf7 form div.visible-only-if-sent {
display: none;
}

.wpcf7 form.sent div.visible-only-if-sent {
display: block;
}

.wpcf7 form div.visible-only-if-not-sent {
display: block;
}

.wpcf7 form.sent div.visible-only-if-not-sent {
display: none;
}

Scroll to the form feedback

Another problem in terms of an optimized user experience can be that you are a bit lost after submitting the form – because the browser window may not show the feedback that the form has been generated.

Fortunately, with a small jQuery snippet, we can relatively easily make the browser window scroll to a specific area after a certain action. In this case, the action is of course the submission of the form – the scroll point is the feedback.

// scroll to form sent message
    jQuery(function ($) {
        $(document).ready(function ()
        {
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        if(wpcf7Elm) {
            wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
            setTimeout(function() {
            $([document.documentElement, document.body]).animate({
            scrollTop: $(".wpcf7-response-output").offset().top - 360

        }, 500);
        }, 500);
        //console.log("Submited");
        }, false );
        }
        });
    });

In this case the brower window would scroll to the top of the response output “.wpcf7-response-output” minus 360 pixels. You could of course define any other html element instead.

The script must of course be placed in the functions.php file again and the individual variables must then be adapted to the special requirements of the theme or Chil theme used.