How to submit UForm Kit’s form using ajax

As you all probably know, Hexxu is proud author of a free, opensource UForm Kit package – https://marketplace.umbraco.com/package/uformkit

UForm Kit is an Umbraco package which enables you to create and manage multiple contact forms on your site, and customize the form and the mail contents flexibly with simple markup.

The main inspiration was drawn from ContactForm7 plugin for WordPress – https://wordpress.org/plugins/contact-form-7/ and we felt that the Umbraco community could benefit from similar solution.

In order to get started with UForm Kit, please visit its documentation pages: https://hexxu-services-ltd.gitbook.io/uform-kit-documentation

Once you create the form markup you can display the form on the page using one of the two methods:

1. Using a View Component
2. Using a macro

You can find the technical reference here: https://hexxu-services-ltd.gitbook.io/uform-kit-documentation/technical-documentation#displaying-form-on-a-page

Whichever method you use to display the form, by default, the forms generated by UForm Kit will be submitted by reloading the page.

With little extra effort you can submit the form data using ajax as well.

We will add few extra lines of JavaScript to form’s markup and use the Kit’s API endpoint to submit its data via ajax instead.

Whatever your form structure, the base JavaScript code is the same:

const form = document.querySelector('.u-form-kit form');
const submitButton = document.querySelector('.u-form-kit form');
const tokenField = document.querySelector('[name="__RequestVerificationToken"]')

form.addEventListener("submit", (event) => {
     event.preventDefault();

     if ($(event.target).valid()) {
         const payload = {
             action: "/umbraco/UFormKit/UForm/SendJson",
             data: new FormData(form),
             token: tokenField.value
         }
         postForm(payload);
     }
});

async function postForm(payload) {
     try {
         const response = await fetch(payload.action, {
             method: "POST",
             headers: {
                 "RequestVerificationToken": payload.token
             },
             body: payload.data,
         });
         const result = await response.json();
         console.log("Success:", result);
     } catch (error) {
         console.error("Error:", error);
     }
 }

Let’s explain the code above, step by step:

First, we gather references to the form element and the input holding the form’s verification token for the API end point.

Note that all UForm Kit form’s have u-form-kit class and that hidden input carrying the token has the name attribute set to __RequestVerificationToken

Once we do that, we prevent default form submit event and post the form via ajax using postForm function.

postForm function sends the POST request to /umbraco/UFormKit/UForm/SendJson endpoint registered by default by UForm Kit with the following:

1. RequestVerificationToken header set to the value of token field
2. body set to FormData key/value pairs representing form fields and their values – https://developer.mozilla.org/en-US/docs/Web/API/FormData

And that is basically all that is needed. Our code, after receiving the response from the endpoint, prints the result in JavaScript console.

You can, instead, display a message to the user by changing the display css attribute of the div added to the form’s markup – or do whatever you find suitable.

Also, note that the endpoint /umbraco/UFormKit/UForm/SendJson can be used in many different scenarios and use cases as it provides universal method of submitting the form from the frontend.

For any additional info, you can find UForm Kit’s GitHub page here: https://github.com/hexxu-dev/UFormKit

Feel free to drop us a note or report an issue here: https://github.com/hexxu-dev/UFormKit

Your feedback related to the package functionality or any feature request you might have means a lot.