Making Contact Form 7 more usable

My top two recommendations for creating forms on your website are Contact Form 7 and WPForms. If you’ve chosen Contact Form 7, there’s a thing you might do to avoid user misunderstandings. I’ve been doing this on my own sites wherever I use one of these forms.

The problem is that by default, when someone submits a form and it succeeds, nothing much happens — they remain on the same page, the form is cleared to its default values, and there’s a little notice displayed below the submit button.

If the submission fails, the result is very similar. They remain on the same page, a little notice is displayed in the same place as the one that tells them about success, and required fields that weren’t filled in, are flagged with “Please fill out this field” in red. The error flagging isn’t obvious if the form is long and the required field is scrolled off the top of the screen.

In my experience, this often results in user error — they didn’t fill in a required field and the submission failed, but they don’t notice it failed so they go away thinking everything’s fine. Or the submission worked, but apparently nothing happened so the user thinks it failed. They re-enter the same information that was already successfully submitted, and submit a duplicate.

To prevent this, I like to make it a lot more obvious whether the submission succeeded. This is done by adding some CSS and JavaScript code to the form to respond to “events” posted by CF7. If the submission succeeded, I steer them to a “thank you” page that does nothing but tell them the form was received. And if the form failed, make the failure notice more obvious.

First create the “thank you” page.

• I gave it the slug “form-thanks”
• Make the text on it nice and large.
• Hide share buttons
• Specify it not be listed in internal search results using the checkbox provided by the Search Exclude plugin.
• Use the Advanced settings in the Yoast SEO section of the page editor to specify it not be indexed by search engines.

Then, in the Contact Form 7 form, add the following code:

<style>
.wpcf7 form.invalid .wpcf7-response-output {
   animation: 3s 1 normal pinkbg;
   position: relative;
   margin-top: -82px; /* may need to adjust these numbers */
   margin-left: 130px;
   z-index: 99;
   border-color: red
}
@keyframes pinkbg {
  from { background-color: pink; }
  to { background-color: transparent; }
}
</style>
<<<< body of form goes here >>>
[submit "Submit"]
<script>
var wpcf7Elm = document.querySelector( '.wpcf7' );
wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
  location.replace('/form-thanks/');
}, false );
</script>

The style code above the form moves the error message from its usual position a ways below the form, where as we saw it can get cut off, so it sits beside the Submit button. It also adds an animation that fades the background of the error box from pink to transparent to maybe catch the user’s attention. Tweak the left and top margin settings to position the notice correctly beside the button, depending on the length of the text in the button and your theme’s paragraph spacing.

The script code below the Submit button uses the CF7 DOM Events to add some of our own code when the form submit succeeds. This code navigates to the “form thanks” page so the user is left in no doubt the submission succeeded.

The new result looks like this: