Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-25T09:51:43.650Z
Answers.Text: Not sure about this, looks like a brilliant solution, but how does it respond to the freeform form? Tried this, but no change?
Answers.UserDisplayName: noregt
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-25T09:53:08.153Z
Answers.Text: 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.
Answers.UserDisplayName: noregt
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-25T13:17:39.410Z
Answers.Text: 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...
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-24T18:26:30.450Z
Answers.LastActivityDate: 2017-01-24T18:26:30.450Z
Answers.UserDisplayName: Terry Upton
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-06-22T21:12:41.320Z
Answers.LastActivityDate: 2021-06-22T21:12:41.320Z
Answers.UserDisplayName: Paloma Martinez
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-11T12:29:22.297Z
Answers.Text: 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?
Answers.UserDisplayName: noregt
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-24T18:08:00.963Z
Answers.Text: I am also seeing this issue. Any ideas on a fix?
Answers.UserDisplayName: Terry Upton
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-01-25T03:36:38.583Z
Answers.Text: 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.
Answers.UserDisplayName: Solspace
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-12-21T20:09:55.853Z
Answers.LastActivityDate: 2016-12-21T20:09:55.853Z
Answers.UserDisplayName: Solspace
Body: <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>
  
Tags: <error-handling><plugin-freeform><solspace>
Title: Error reporting Freeform submission jumps to top of page
ThreadText: # 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
  
  ```
  <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() }}
  
  ```
  
  **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:
  
  ```
  <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>
  
  ```
  
  
  ---
  
  ### Answer by username_3 on 2016-12-21. Score: 1
  
  You can just add the [action](https://username_3.com/craft/freeform/docs/freeform.form/#param-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.  
  
  ---
  
  