Make wpcf7-response-output message visible after submit

  • Resolved hommealone

    (@hommealone)


    8 years, 7 months ago

    After submitting a form, the page tends to load with the top of the window far above the response message. The response message is not visible on the screen without scrolling, so many people don’t know that it’s there, and can’t tell what happened.

    I’d like to know some of the ways that people solve this problem, or if anyone has suggestions.

    I can use some javascript to accomplish what I want by scrolling the page after submission reload, but if there is a better way, that would be great.

    Adjust the first part of the “if” statement to suit your situation:

    // Contact Form 7 scroll to message after submit
jQuery(document).ready(function ( $ ) {
	if ( ($('body').hasClass('section-contact')) && ($('.wpcf7-response-output').length) ) {
		$('html, body').animate({
			scrollTop: $(".wpcf7-response-output").offset().top - 100
		}, 1000);
	};
});

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try switching to the default theme.

    Thread Starter hommealone

    (@hommealone)

    Hi Miyoshi,

    Thanks for your response – and especially for your wonderful plugin.

    I’m not saying that there is anything wrong with the way it works, and it might indeed work fine with a default theme. But in my experience, using many different themes, and especially with long forms, after form submission, the page reloads with the success message or alert well below the visible area of the page. Sometimes the page reloads with a URL containing a hash which ‘scrolls’ the page to the top of the form – which is often much too high to see the message. (I’d much prefer it if the reloaded page URL had a hash with an ID of the message area itself! That’s what people need to see after hitting submit. For that to work, the message area would itself need an ID attribute.)

    Anyway, I’m simply looking for ideas from people who might have creative ways of dealing with this. I hope many people might contribute ideas and suggestions.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
    https://contactform7.com/locating-response-message-box-anywhere/

    Thread Starter hommealone

    (@hommealone)

    Two very good suggestions – thanks! You of course “have all the bases covered” already! Thanks so much.

    Thread Starter hommealone

    (@hommealone)

    You were right to guess that the javascript was not loading – but I can’t figure out why. The functions wp_head() and wp_footer() are in place properly, in header.php and footer.php, and many other scripts are being called and loaded properly.

    I’ve run my pages through the W3C validator and the HTML structure is valid.

    So I am guessing that there might be a conflict with other javascript? (I get no JS errors in my Firebug console.) But would that keep the scripts from loading altogether?

    What else might be keeping them from loading, if wp_head() and wp_footer() are working properly?

    You can have a look at one of our many Contact forms here:
    https://astorservices.org/contact/webmaster-inquiry/

    Any other suggestions for troubleshooting would be much appreciated!

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    This is obviously not Contact Form 7’s form output. What plugin do you use and where did you get it from?

    Thread Starter hommealone

    (@hommealone)

    I am using another plugin which is supposed to be a ‘helper’ plugin for Contact Form 7, and it comes from the WordPress plugin repository:

    Bootstrap for Contact Form 7
    https://www.ads-software.com/plugins/bootstrap-for-contact-form-7/

    It seems to be a decently popular plugin (Active Installs: 20,000+).

    Thread Starter hommealone

    (@hommealone)

    [RESOLVED]

    During our development stage, one of our developers had temporarily set this constant in our wp-config.php file (but forgot to remove it):
    define('WPCF7_LOAD_JS', false);

    That obviously was the cause of the JS file not loading.

    For anyone in the future who might be reading this while troubleshooting their CF7 issues, having this constant defined in the config file might be the problem; look for it.

    Alternately it might be set in your functions.php file; read about that here:
    https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/

    Thanks, Takayuki, for pointing me in the right direction for our troubleshooting.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Make wpcf7-response-output message visible after submit’ is closed to new replies.