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

3 Answers 3


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 %}
  • Not sure about this, looks like a brilliant solution, but how does it respond to the freeform form? Tried this, but no change?
    – noregt
    Commented Jan 25, 2017 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
    Commented Jan 25, 2017 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... Commented Jan 25, 2017 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() }}
  • 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
    Commented Jan 11, 2017 at 12:29
  • I am also seeing this issue. Any ideas on a fix? Commented Jan 24, 2017 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
    Commented Jan 25, 2017 at 3:36

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

            // 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.on('freeform-ajax-error', function (event) {
            // for errors, listen to the ajax event for errors
            // scroll up to the form header`enter code here`



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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