See the method posted by Thomas here, it works with some simple updates to the main view for the form: https://our.umbraco.org/forum/umbraco-pro/contour/60788-Umbraco-Forms-and-Ajax#comment-233528

2018 now and this solution came in handy. I reworked it slightly to suit the change of class names to "umbraco-forms" and to make it more generic (so this would go in a generic JS file).

$(document).ready(function() {
    //Intercept Submit button in order to make ajax call instead of a postback
    $('.umbraco-forms-form form').preventDoubleSubmission();
});

// jQuery plugin to prevent double submission of forms
    jQuery.fn.preventDoubleSubmission = function () {
        $(this).on('submit', function (e) {
            e.preventDefault();

            var $form = $(this);

            if ($form.data('submitted') === true) {
                // Previously submitted - don't submit again
            } else {
                if ($form.valid()) {
                    // Mark it so that the next submit can be ignored
                    $form.data('submitted', true);

                    // Make ajax call form submission
                    $.ajax({
                        url: $form.attr('action'),
                        type: 'POST',
                        cache: false,
                        data: $form.serialize(),
                        success: function (result) {
                            var thankYouMessage = $(result).find('.umbraco-forms-submitmessage').first();
                            $form.html(thankYouMessage);
                        }
                    });
                }
            }
        });

        // Keep chainability
        return this;
    };

Hi Danny

Thank you so much for sharing!!!

Alex

Do you guys think it would be useful to turn this into a package or Forms theme? I remember the first time implementing this for contour years ago and it was a challenge to even find where to put these scripts.

Would be nice if it were more plug and play and could be updated in one place as the markup / scripts for Forms evolve.

I'd be happy to do it if so.

-Amir

I don't think this will work with multi-steps forms and be compatible with thank you pages redirection tho!

Spent a few hours on this and here are my findings:

• https://github.com/jeppe-smith/umbraco-ajax-form seems a good place to start if you want ajax. I didn't test it but the code seems to support multi-steps forms
• ajax protocol can't detect redirects, the browser makes it invisible for it. This can be done with a new API called fetch which has around 85% users support according to canisue
• Seems a bit of a can of worms. I don't think you'll be able to remove the "redirect to page" functionality from forms itself, so fundamentally you'd be breaking a core functionality of Umbraco Forms. Bad karma.
• What I thought I could do in my case was to rely on something on the page so that I know that the response is a different URL (e.g. I've been redirected). Canonical meta tags are a good candidate. I could just do
  • Get result html
  • Get canonical meta value
  • Is it the same url ? (handle fragments, query strings and protocols here)
  • If different it was a redirect, redirect to that page.
  • This sounds a bit hacky and would avoid if not necessary

I've just tested this solution which as un-sexy as it is is dead simple and works with all Umbraco Forms functionality

USE CODE FROM MY NEXT ANSWER INSTEAD!

// Find a submit message that is not wrapped in a form (the message is always present even when not visible
// as the form has just been loaded.
let message = $('.umbraco-forms-submitmessage:not(form .umbraco-forms-submitmessage)').first();
if(message)
{
  // Scroll page to the submit message. Here 20 is just to add some margin, but you could need to add
  // the height of your sticky navbar too.
  let targetOffset = message.offset().top - 20;
  $('html,body').animate({scrollTop: targetOffset});
}

This however doesn't scroll down to the 2nd+ step of forms, so I'll have a look at that now

awesome finding Stefano, didn't try umbraco-ajax-form but it looks interesting

I'll one up myself by supporting multi pages forms, and I've opened a ticket in regards to previous pages hidden field not being populated:

$(document).ready(function () {
    function scrollToFormIfInteractedWith() {
      // Find a target to scroll to if the user is interacting with forms. This happens in different ways:
      // - Find a submit message that is not wrapped in a form (the message is always present even when not visible
      // as the form has just been loaded.
      // - If the message wasn't found then try to target a form containing a hidden field that indicates that the form's
      // step/page is not the first(0) one.
      // - If that wasn't found either then try to find a form that has PreviousClicked = true where the user just
      // navigated back. This is CURRENTLY NOT WORKING possibly because of an Umbraco Forms issue for which I've raise
      // a github issue here https://github.com/umbraco/Umbraco-CMS/issues/4443.
      let target = $('.umbraco-forms-submitmessage:not(form .umbraco-forms-submitmessage)')[0]
          || $('input[type="hidden"][name="FormStep"]:not([value="0"]),'
              + 'input[type="hidden"][name="PreviousClicked"][value="true"]').parent('form')[0];

      // If we have found a target to scroll to then smooth scroll there.
      if (target) {
        // Scroll page to the target. Here 20 is just to add some margin, but you could need to add
        // the height of your sticky navbar too.
        let targetOffset = $(target).offset().top - 20;
        $('html,body').animate({scrollTop: targetOffset});
      }
    }

    scrollToFormIfInteractedWith();
  });

Just to expand on the AJAX approach, which still doesn't address the issue with multi step forms & redirections, but thought I should document my tweaks here as this will come up for others also.

Our original AJAX solution doesn't work with posting files to the server and with handling Recaptcha errors. A long way from perfect, but my basic code tweak is below:

$(document).ready(function() {
    //Intercept Submit button in order to make ajax call instead of a postback
    $('.umbraco-forms-form form').preventDoubleSubmission();
});

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
    $(this).on('submit', function (e) {
        e.preventDefault();

        var $form = $(this);

    if ($form.data('submitted') === true) {
        // Previously submitted - don't submit again
    } else {
        if ($form.valid()) {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);

            // Make ajax call form submission
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                cache: false,
                data: new FormData(this),
                processData: false,
                contentType: false,
                success: function (result) {
                    var thankYouMessage = $(result).find('.umbraco-forms-submitmessage').first();
                    //Handles edge case where Recaptcha wasn't checked

                    if (thankYouMessage.length == 0) {
                        $(result).find('.field-validation-error').each(function (i, v) {
                            window.alert($(v).text());
                        });

                        $form.data('submitted', false);
                    }
                    else {
                        $form.html(thankYouMessage);
                    }
                }
            });
        }
    }
});

// Keep chainability
return this;
};

Has anyone tried this solution with the latest version of forms? I'm trying this with 8.6 and the page still reloads on submit. The return message shows first and then the page reloads almost as if it's ignoring preventDefault? I've tried to figure this out all day and have had no lucky. Any suggestions?

is working on a reply...