A practical example of how to use our .form_submitting class to build better User Experience for your Forms

When you submit a Siteglide Form, we apply two classes to the <form> element:

If the Form fails validation, both classes will be removed.

This Article explains how you can use this feature as a starting point to build more complex User Experiences with your Forms, for example, adding a Spinner while the Form is submitting to give Users confidence it is working as expected. These code snippets are intended as examples only and are not Siteglide Features in themselves. Feel free to use and adapt them in your own Sites, but front-end code is not covered by our Support Policy.

In this example, we'll show you how to add an SVG spinner icon using SVG animation. We'll then use the Siteglide classes to show the spinner only when needed.

This adds an SVG spinner within a container that centres the content. In this example, we nest the HTML inside the {% form %} tag (effectively inside the <form> HTML tag) so that we can centre the spinner inside the Form, however, you could add the spinner wherever you wish.

Note the most important part of this CSS example is the use of the Siteglide .form_submitting class. Only when the class is present, we add the styling needed to display and animate the spinner. You can of course change the CSS in any way you like.