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.

test-form

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

form-wrapper

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

mvc-form

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!

form-done

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

Now, click Submit.

oh-noes

giphy

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.

thank-you-layout

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.

form-class

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:

variant-definition

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

message-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!

  One thought on “Sitecore 9 Forms and AJAX with SXA

  1. December 13, 2017 at 11:46 am

    This is great Jason! Thanks for sharing.

    Liked by 1 person

  2. slangevinouellet
    December 14, 2017 at 8:50 am

    Cool new feature, much more modern, thanks for the post.

    Liked by 1 person

  3. December 16, 2017 at 6:09 am

    Great. Works like a charm. Thanks for sharing!

    Liked by 1 person

  4. December 22, 2017 at 5:54 am

    Thanks Jason, great post!

    Liked by 1 person

  5. June 13, 2018 at 12:10 pm

    Namaste Mr. Wilkerson. I was hoping something like this wouldn’t be the answer. lol.

    Like

    • June 13, 2018 at 12:41 pm

      I’m pretty sure the ajax issue was already addressed in 9.0.1. And the confirmation message approach doesn’t need to be nearly as complicated as I made it. You can add a second “page” to your form that is the confirmation message. But all of your actions would be placed on the button on the first page and just have it “navigate” to the second page. Make sense?

      Liked by 1 person

      • June 13, 2018 at 3:33 pm

        Yes. Devastatingly simple! Thanks! We’re on a 9.0.1 install and from the peek a took – it didn’t look like the “ajax” version was doing anymore than returning a net-new empty form (?). But your solution is great. My pangs are lessened. Also – no SXA on our side fwiw.

        Like

  6. November 13, 2018 at 11:25 am

    Great post. Just the info I was looking for!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: