Sitecore 9 Forms and AJAX with SXA

I’m currently working on porting the rbaconsulting.com website over to Sitecore 9 using SXA and one of the new features I’ve been really excited to work with is the new Experience Forms module!  I know that it has…um…a few known issues, but I figured I could work around those.  One requirement I had, which works nicely functions in WFFM (does WFFM do ANYTHING “nicely”?), is the ability to submit a form with AJAX and display a confirmation/success message.  Out of the box, this does not work with the initial release of Experience Forms in Sitecore 9, but I have a workaround for now.  But first things first…

Enabling AJAX

First off, creating a form was very easy! I created a test form and placed a few fields on it with the drag-and-drop interface, added a submit button and used the Save Data submit action.  I also noticed that AJAX enabled is selected by default under the Settings of the form itself.  Good deal, because that’s what I wanted anyway.

Also, adding that form to a page using SXA was really easy as well.

Using the Forms section of the Toolbox, drag the Sitecore Forms Wrapper into a placeholder.

After that, drag an Mvc Form to the Sitecore Forms Wrapper.  Notice that there are Placeholder Restrictions in place, so you can only place an Mvc Form inside a Sitecore Forms Wrapper.  After dragging the Mvc Form onto the page, select your form, and you’re good to go!

Yay! That was super easy!  Publish the site, visit the page and your form is there is all its simple glory!

Now, click Submit.

Form validation isn’t working.  Ajax isn’t working.  You’re getting redirected to /formbuilder…  Not cool!  I contacted support and they pointed me to this document explaining how to add a new Sitecore 9 form to an MVC page.  This document is wonderful and does a great job explaining how to do it in a non-SXA, MVC implementation.  However, I’m using SXA for my site.

The gist of this article is that I’m missing the javascript necessary for the ajax-enabled forms.  So, rather than creating the Outer Layout.cshtml that they suggested, I found the SxaLayout.cshtml and added the necessary HTML extension methods.  However, this did not work.  The extension methods didn’t add the necessary javascript includes.  I talked to Dawid Rutkowski from the SXA team on Slack and those scripts should be added by the Sitecore Forms Wrapper.  But as of SXA 1.5, they are not.  They will be in version 1.6, to be released shortly, but they aren’t right now.  So, I just added the following javascript includes to /Views/SxaLayout/SxaLayout.cshtml view and went about my business for now.

<!-- Adding Sitecore Forms scripts manually as a workaround for SXA at the moment -->
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery-2.1.3.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/form.validate.js"></script>
<script src="/sitecore%20modules/Web/ExperienceForms/scripts/form.tracking.js"></script>

Don’t judge me, you know you’ve done it too.

Displaying a Confirmation Message

Now that our form is working as an AJAX post, we  want to display something to the user that the submission was successful.  Out of the box, there is a Redirect to a Page submit action that works well, if you disable AJAX.  However, this is not optimal as I do not want to create “thank you” pages for all of our forms.  Nor do I want to redirect a user to a generic page.  So, using SXA, I created a workaround:

1. Add the form and a confirmation message to the page
2. Intercept the form submit in javascript, hide the form, then display the confirmation message

Confirmation Message

First off, on my page, I add my form to the page using the Sitecore Forms Wrapper and Mvc Form components from the Toolbox.  Then, underneath the form, in the same placeholder, I drag a Rich Text component from the toolbox for my message.

Now, I want to be able to access these items via javascript, so I need to add some sort of identifying class names.  Using the Forms Builder, on the Settings tab, I can add CSS classes to the Styling section, so I add the rba-form class.  This has no styling applied to it and will only be used with the jQuery selector.

Now, for my confirmation message, I need to add an identifiable css class to access it as well.  I start by copying the Default​ Rendering Variant for the Rich Text component and just adding rba-form-thank-you to the Css Class field:

On my instance of my confirmation message, I set the variant.

Intercept the Form in JavaScript

Now that I have my structure in place, I need to add a little bit of CSS and javascript.  I start with setting the default visibility:

.rba-form-thank-you {
   display: none;
}

.on-page-editor {
   .rba-form-thank-you {
      display: block; //Let's make it visible in Experienced Editor
   }
}

Then, following the javascript pattern established by the SXA team, I add a little bit of custom javascript to my theme.

XA.component.rbaForms = (function ($) {
  var api = {};

  api.init = function () {
    $(window).bind('load', function () {
      var form = $('.rba-form');
      if (form) {
        form.on("submit", function() {
          $('.rba-form input.btn').prop("disabled", true);
          $('.sitecore-form').toggleClass('hidden');
          $('.rba-form-thank-you').toggle();
        });
      }
    });
  };
  return api;

}(jQuery, document));
XA.register("rbaForms", XA.component.rbaForms);

There you have it!

Conclusion

I know this approach feels a little hacky, but it will work until the Experience Forms team at Sitecore adds this functionality.  Which, I’m sure, is in the next release… 🙂

Happy Sitecore trails, my friend!