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

<p>So instead I have added the following code and this seems to work;</p>

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

CC BY-SA 3.0
2017-01-25T09:51:43.650Z
Not sure about this, looks like a brilliant solution, but how does it respond to the freeform form? Tried this, but no change?
noregt
CC BY-SA 3.0
2017-01-25T09:53:08.153Z
PS: for now I'm using the html required attribute as an extra parameter: "useRequiredAttribute: true," This solves a lot; for Safari I needed some extra JS to do this.
noregt
CC BY-SA 3.0
2017-01-25T13:17:39.410Z
You might need to adapt the code to suit; so change the offset value. Mine is set to -110 as I have a fixed header with the nav. Also change the anchor tag from #formErrors to your #errortag.

I added this into my freeForm base template at the top.
Hope this helps...
Terry Upton
CC BY-SA 3.0
2017-01-24T18:26:30.450Z
2017-01-24T18:26:30.450Z
Terry Upton
<p>Freeform 3, with ajax enabled:</p>
<pre><code>&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    // 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 &quot;form-success&quot; 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();

        });
    }

&lt;/script&gt;
</code></pre>

CC BY-SA 4.0
2021-06-22T21:12:41.320Z
2021-06-22T21:12:41.320Z
Paloma Martinez
<p>You can just add the <a href="https://solspace.com/craft/freeform/docs/freeform.form/#param-action" rel="nofollow noreferrer">action</a> override:
<code>action: "#errortag"</code></p>

<p>So your template code would look something like this:</p>

<pre><code>{{ craft.freeform.form("proefles", {
    instructionsBelowField: true,
    action: "#errortag"
}).render() }}
</code></pre>

CC BY-SA 3.0
2017-01-11T12:29:22.297Z
I'm sorry, it appears not to solve the issue? This works if there is an error, but if there is no error, the form jumps to that div on submit instead of submitting the form?
noregt
CC BY-SA 3.0
2017-01-24T18:08:00.963Z
I am also seeing this issue. Any ideas on a fix?
Terry Upton
CC BY-SA 3.0
2017-01-25T03:36:38.583Z
This isn't really a complete solution. It ultimately allows you to override the action parameter, but yes, you'll run into other issues. The best approach in this situation would be with AJAX.
Solspace
CC BY-SA 3.0
2016-12-21T20:09:55.853Z
2016-12-21T20:09:55.853Z
Solspace
<p>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. </p>

<p>In the standard Craft contact form I can add </p>

<pre><code>&lt;form method="post" action="#errortag"&gt;
</code></pre>

<p>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)</p>

<p>Right now I'm using the standard tags:</p>

<pre><code>{{ craft.freeform.form("proefles", {
    instructionsBelowField: true,
}).render() }}
</code></pre>

<error-handling><plugin-freeform><solspace>
Error reporting Freeform submission jumps to top of page
# Error reporting Freeform submission jumps to top of page

(Asked by: username_0 on 2016-12-15)

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 


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() }}

**Tags:** error-handling, plugin-freeform, solspace

---

## 3 answers

### Answer by username_1 on 2017-01-24. Score: 2

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 %}

> **Comments:**
> **username_0**: Not sure about this, looks like a brilliant solution, but how does it respond to the freeform form? Tried this, but no change?  
> **username_0**: PS: for now I'm using the html required attribute as an extra parameter: "useRequiredAttribute: true," This solves a lot; for Safari I needed some extra JS to do this.  
> **username_1**: You might need to adapt the code to suit; so change the offset value. Mine is set to -110 as I have a fixed header with the nav. Also change the anchor tag from #formErrors to your #errortag.  I added this into my freeForm base template at the top. Hope this helps...  

---

### Answer by username_2 on 2021-06-22. Score: 1

Freeform 3, with ajax enabled:


---

### Answer by username_3 on 2016-12-21. Score: 1

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() }}

> **Comments:**
> **username_0**: I'm sorry, it appears not to solve the issue? This works if there is an error, but if there is no error, the form jumps to that div on submit instead of submitting the form?  
> **username_1**: I am also seeing this issue. Any ideas on a fix?  
> **username_3**: This isn't really a complete solution. It ultimately allows you to override the action parameter, but yes, you'll run into other issues. The best approach in this situation would be with AJAX.  

---

