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

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 %}
|improve this answer|||||
  • Not sure about this, looks like a brilliant solution, but how does it respond to the freeform form? Tried this, but no change? – noregt Jan 25 '17 at 9:51
  • 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 Jan 25 '17 at 9:53
  • 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 Jan 25 '17 at 13:17

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() }}
|improve this answer|||||
  • 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 Jan 11 '17 at 12:29
  • I am also seeing this issue. Any ideas on a fix? – Terry Upton Jan 24 '17 at 18:08
  • 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 Jan 25 '17 at 3:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.