Not Redirecting to Confirmation Section After The Form Is Submitted

Hi luvjenni,

I apologize for the trouble!

I took a look, and I see what you mean. The anchor functionality you’ve described is functionally correct, but it appears that this site’s theme is preventing the autoscroll from working properly — this is most often caused by the theme setting an unusual load order.

As a workaround, I’d recommend considering a Thank You page. This would redirect your users to a new page when the form is submitted, and provides a good opportunity to direct them to next steps. Here’s our article on how to set up and maximize the use of Thank You page confirmation.

I hope that helps! ??

Hello Jess,

Perhaps I’m missing something. I don’t understand how it can link to an anchor link that is not there. It is linking to #wpforms-1064, which doesn’t exist on the page. I don’t understand how this can be correct functionality. When an anchor link exists, it autoscrolls correctly, but this one doesn’t exist.

Please help me to understand this.

Thank you!

Just to clarify, #wpforms-confirmation-1064 is what exists on my page, not #wpforms-1064. So it can’t link to something that doesn’t exist.

Hi luvjenni,

Thanks for the clarification, and I apologize for my misunderstanding. I can definitely understand the confusion there, though this is actually all correct functionality. That smaller id (#wpforms-1064) is anchored to the longer one (#wpforms-confirmation-1064) within the JavaScript that causes this anchor action.

If you’re curious, you can find this script in your site files under /wp-content/plugins/wpforms/assets/js/wpforms-confirmation.js:

/* globals jQuery */
;(function($){
	$(function(){
		if (window.location.hash) {
			var hash = window.location.hash.substring(1),
				$form;
			hash = hash.split('-');
			if ( 'undefined' !== hash[0] && 'wpforms' === hash[0] && 'undefined' !== hash[1] ) {
				$form = $('#wpforms-confirmation-'+hash[1]);
				$('html,body').animate({
					scrollTop: ($form.offset().top)-100
				}, 1000);
			}
		}
	});
}(jQuery));

Essentially, this code pulls that form ID out of the URL and uses it to find the full anchor ID (in this case, #wpforms-confirmation-1064). So we just keep things nice and short in the URL and handle the rest in the code.

I hope that makes more sense. If you have any questions, please let me know ??