This tutorial explains how to automatically position your web page at the USP Form after the form is submitted.

Problem

If you are displaying your USP Form near the bottom of the page, or somewhere else that is not at the top of the page, you’ll probably experience this issue:

“At the moment my USP form is close to the bottom of the page. When the submit button is pressed the page reloads at the top of the page. It’s not until the user scrolls down back down to see the form that they can see either a error or success message. Is there a way the page can reload so that they can see the form without having to scroll down?”

While there are numerous ways of handling this, the easiest is to use a hash fragment (named anchor) in the URL. Read on to learn how..

Solution

The easiest way to load a page at a specific location is to use a hash fragment. You’ve seen them before, here is an example:

http://example.com/#target

..that corresponds to this element in the HTML:

<div id="target">...</div>

So to implement this technique with USP Pro, you can change the following options in the plugin’s General settings:

  • Redirect for Success: http://example.com/path/to/your/page/#usp-pro
  • Redirect for Failure: http://example.com/path/to/your/page/#usp-pro

That way, when the form is submitted, the browser will automatically position the screen at the top of the USP Form. Important: for both of the settings mentioned above, http://example.com/path/to/your/page/ must correspond to the actual URL that displays your form (see next section for more information).

Caveat

The only downside to this technique is that the URL specified for “Redirect for Success” and “Redirect for Failure” need to match the URL that displays your form. So for example if your form is displayed at the following URL:

http://example.com/path/to/your/page/

..the only value that you can use for both settings, “Redirect for Success” and “Redirect for Failure”, would be this:

http://example.com/path/to/your/page/#usp-pro

So if you’re keeping the user at the same URL as the form, then you’re all good. Otherwise if you are redirecting the user to some other URL, the hash-fragment technique described in this article will not work. See this post for more information.