# 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.

- Type: PHP
- Runs: Frontend only
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: contact-form-7, ux, scroll
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/cf7-scroll-to-response/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Scroll to the Contact Form 7 Response Message" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/