Why is there a # in the url on thank you page?

The growing number of different devices and the requirements for responsiveness websites, make really hard to tell for sure whether your form will be shown above the fold on any devices.

This is our entire contact page. The actual view-port of a large screen desktop computer allows to show barely a half of the whole content. The view-port is marked in blue in the image below.





So, an user scrolls down the page up to the contact form.





He fills out the form and submit it.
The page reloads, and the view-port returns at the top of the page.





The user may think that the form has been sent successfully, so he leaves the website.
If only he had scrolled down, he would have seen the errors indicating that the form has not been sent.





This behaviour would terribly lower your conversion ratio.
Luckily for you, that's where the Fragment Identifier comes to the rescue.
Also called "In-Page Anchor Links", "Hash Tag Links" or "Jump Links", this is typically a matter of scrolling the window down, but note that if the page requires horizontal scrolling to make the element visible, the browser will do that as well.

The fragment part # at the end of the URL of the Thank You page ensures that the pages automatically scrolls vertically making the form visible to attract the user’s attention. It doesn't matter whether it shows an error message or a successful message. The user has just pressed a submit button, and the result of the submissions must be visible.


The offset problem with a fixed header or menu bar

As explained above, the in-page anchor link causes the page to scroll to a particular section where the form is visible, and the viewport will be positioned correctly to show the form at the top of the visible area.
The problem is that if you have a fixed, non-scrolling header, it would cover part of the form, as shown in the screenshot below.



Your goal is to have the browser scroll down until the form is fully visible, taking into account the height of the fixed element.

To achieve this, we have added a piece of CSS code to our main stylesheet: media/com_foxcontact/css/foxcontact.css


The actual height of the offset depends on the height of your menu bar, increased by an extra space you may want as a further separation between the menu bar itself and the form.
In this example the menu bar height is 80 pixels, but we want to add 40 more pixels as a further separation. This brings the offset to 120px. You are free to edit that value to fit your needs.


What about SEO impact?

There is no SEO impact.
The URL of your contact page does not contain the fragment identifier (eg: mysite.com/contact-us.html)
The fragment identifier appears in the URL bar after submitting the form, but the search engines' crawlers never submit forms.


What about tracking goals with Google Analytics?

This is not a problem of fragment identifier.
The contact page has the same URL before filling out the form, and after submit. They differ only by the fragment identifier. You must set your form to use a custom Thank You page to make them different and track the successful submissions.