Scroll to the Contact Form 7 Response Message
Scrolls the page to the Contact Form 7 success or error message after submitting, so visitors on long pages and phones see the result.
Opens WPIDE on
Code
add_action( 'wp_footer', function () {
if ( ! wp_script_is( 'contact-form-7', 'enqueued' ) ) {
return;
}
?>
<script>
document.addEventListener( 'wpcf7submit', function ( event ) {
var output = event.target.querySelector( '.wpcf7-response-output' );
if ( ! output ) { return; }
var reduce = window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
setTimeout( function () {
output.scrollIntoView( { behavior: reduce ? 'auto' : 'smooth', block: 'center' } );
output.setAttribute( 'tabindex', '-1' );
output.focus( { preventScroll: true } );
}, 50 );
}, false );
</script>
<?php
} );Notes
Jumps instantly instead of animating for visitors who prefer reduced motion.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.