From the Blogabout me

Contact Form 7 Confirmation Message Tip

Do you use Contact Form 7 for WordPress? If so, this quick tip will be helpful for you.

A number of my clients as for customizations and tweaks to be done to the plugin to make it function a little differently than the default, but there is one customization that is hidden but anybody can do.

Success Message Position

Many of my clients who use Contact Form 7 ask about the success message. So if you have ever wanted to move the Contact Form 7 Confirmation Message from the bottom of the form to anywhere else on the form, it may be much easier than you think. Just add the
[response]
shortcode to your form where you want it to display.

Let’s just say you have a form that requests First Name, Last Name, Email Address, and a standard Text Box. A form like that, will look something like this:

Generic Contact Form 7 Form

And your backend Contact Form 7 form settings and layout would look something like this:

<p>First Name (required)<br />
[text* first-name placeholder"First Name"] </p>
<p>Last Name (required)<br />
[text* last-name placeholder"Last Name"] </p>
<p>Email Address (required)<br />
[email* your-email placeholder"user@domain.com"] </p>
<p>Message (required)<br />
[textarea* your-message] </p>
<p>[submit "Send"]</p>

Good so far? Now if you were to click send right now you would get a little confirmation message on the screen that says something generic and it would be at the bottom of the form:

Generic Standard Contact Form 7 Message

This is pretty and everything, but we have a problem… Maybe your form is too long or you think your visitors will not see the confirmation… Now what?


The fix:

There is a built-in feature that is not shared by the developer very well, but is very useful. Simply add in the shortcode [response] wherever you would like the success message to be displayed after clicking Send and it will display there.

<p>[response]</p>

<p>First Name (required)<br />
[text* first-name placeholder"First Name"] </p>
<p>Last Name (required)<br />
[text* last-name placeholder"Last Name"] </p>
<p>Email Address (required)<br />
[email* your-email placeholder"user@domain.com"] </p>
<p>Message (required)<br />
[textarea* your-message] </p>
<p>[submit "Send"]</p>

The Success Message is going to be at the very top of the form now

New placement of Contact Form 7 Success Message

Leave a Reply

%d bloggers like this: