Error reporting Freeform submission jumps to top of page

Question

When submitting a form with required fields and getting an error, the page jumps to the top, where it should jump to the top of the form.

In the standard Craft contact form I can add

<form method="post" action="#errortag">

To define a div or name anchor where the page should go to. How can I do this in freeform (without having to go completely manual)

Right now I'm using the standard tags:

{{ craft.freeform.form("proefles", {
    instructionsBelowField: true,
}).render() }}

Answer 1

By setting the action: "#errortag" seems to stop the form submitting if there are no errors.

So instead I have added the following code and this seems to work;

{% if form.hasErrors %}
{% includejs %}
$(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#formErrors').offset().top-110
    }, 1000);
});
{% endincludejs %}
{% endif %}

Answer 2

You can just add the action override: action: "#errortag"

So your template code would look something like this:

{{ craft.freeform.form("proefles", {
    instructionsBelowField: true,
    action: "#errortag"
}).render() }}

Answer 3

Freeform 3, with ajax enabled:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script type="text/javascript">
    // Find the form element, can be a specific ID or just look for any forms
    var form = $('form[data-id]');
    if (form) {

        form.on('freeform-render-success', function (event) {
            // Disable the default success rendering
            event.preventDefault();

            // We locate the 'form-wrapper' DIV element which contains our form
            // and we swap its contents (the whole form) with the HTML that we
            // fetch from the "form-success" template
            $('#form-wrapper').load('form-success');
        });


        form.on('freeform-ajax-error', function (event) {
       
            // for errors, listen to the ajax event for errors
            // scroll up to the form header`enter code here`
            document.getElementById('form-wrapper').scrollIntoView();

        });
    }

</script>