Beekeepersblog logo

Contact Form 7 WordPress plugin image icon

How to display Contact-Form-7 Validation message on top of the Form

/ Contact Form 7

You can display the validation message (also known as response message) to the top of the Form. Contact form comes with lot of tags, and one of them is [response] tag which is responsible for displaying the message.

By default the message will display at the bottom, you can force it to display it on top by going to your Form tab and add [response] tag at the top.

Contact-form-7 Form tab - image
Figure 1: Screenshot of Contact-Form-7 plugin Form page with response tag is placed at the top of the form.

Go to your front-end of the site and hit Send and this will display the validation message on top

Front end form page - image
Figure 2: Output of the Contact-Form-7 in a browser window with the validation message at the top.

If your form is longer or for some reason you want to add the message on top and also at the bottom, you can do that too. Just repeat the same tag at the bottom.

Contact-form-7 Form tab with multiple response code - image
Figure 3: Screenshot of Contact-Form-7 plugin Form page with multiple response tags placed at the top and the bottom of the form.