Easy Integration of UForm Kit and Database Extension Kit

UFormKit allows you to hook  into the workflow process and execute some code every time a form has been successfully sent via email. This can be achieved by using our custom notification – UFormEmailSentNotification.

By default, UFormKit stores submitted messages in the database using Umbraco content nodes. However, in scenarios where there is a huge volume of data, you may prefer an alternative approach, such as storing data in custom database tables.

In this article, we will illustrate how to achieve this using the Database Extension Kit package by Hexxu, which enables the creation of custom database tables and ensures efficient data management.

You can find out more about the Database Extension Kit package on https://www.dbextensionkit.com/ and also install it from Umbraco Marketplace at https://marketplace.umbraco.com/package/databaseextensionkit

The first step is to create a contact form using UFormKit. This form should include fields for name, email, feedback category, and message.

 

Once created, navigate to the Additional Settings tab panel of the contact form and select the option “Do not store data.” This action ensures that the default behavior of storing data in Umbraco content nodes is bypassed.

The next step involves using the Database Extension Kit to create a new object, such as ‘Contact,’ which corresponds to our contact form. This integration allows for the seamless storage of form submissions in custom database tables.

 

Most fields are configured as Umbraco Label property fields, restricting direct editing. However, they are adaptable and can be customized to suit your requirements.

Once you have your form and database entity prepared, you can create a notification handler to save form data to your entity. 

The UFormEmailSentNotification class is defined like this:

public class UFormEmailSentNotification : INotification
{
    public IFormCollection Form { get; set; }
    public string Message { get; set; }
    public UFormEmailSentNotification(IFormCollection form, string message)
    {
        Form = form;
        Message = message;
    }
}

Here’s how you can make use of the custom notification by defining a handler for it:

public class EmailSentNotificationHandler : INotificationHandler
{
  private IScopeProvider scopeProvider;
  private IContentService ctService;
  public EmailSentNotificationHandler(IScopeProvider scopeProvider, IContentService ctService)
  {
    this.scopeProvider = scopeProvider;
    this.ctService = ctService;
  }
  public async void Handle(UFormEmailSentNotification notification)
  {
    var formId = int.Parse(notification.Form["formId"]);
    var formContent = ctService.GetById(formId);
    var formName = formContent.Name;


    if (formName == "Contact")
    {
    var entry = new Contact
{
        Name = notification.Form["name"],
        Email = notification.Form["email"],
        FeedbackCategory = notification.Form["category"],
        Message = notification.Form["message"],
        Valid = 1,
        SortOrder = 0
};


      using (var scope = scopeProvider.CreateScope())
      {
        scope.Database.Save(entry);
        scope.Complete();
      }
    }
  }
}

This begins with the creation of a new class that implements the INotificationHandler<T> interface, where ‘T’ in this case is UFormEmailSentNotification. When implementing this interface, we automatically gain access to the instance of the notification within the Handle method, which is invoked whenever this notification is dispatched.

We then verify if the form’s name is “Contact”. If it matches, we instantiate a new Contact object and populate its properties with data extracted from the form. Subsequently, the Contact object is saved to the database using the Umbraco database API within a scoped database transaction.

To ensure our NotificationHandler is registered for handling the corresponding Notification, we need to include the registration in the Program.cs file. Here’s how you can do it:

builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .AddNotificationHandler<UFormEmailSentNotification, EmailSentNotificationHandler>()
    .Build();

Everything is set up and ready for testing your form and populating some data. You can review the entries in the “DB Extension Kit” section in the back office. Since we configured the category as a dropdown list, you can easily filter all submissions by a specific category.

 

By clicking on individual submissions, you can view their details

 

To wrap it up, utilizing UformKit and Database Extension Kit simplifies form creation and data storage within Umbraco projects. These tools offer practical solutions for designing forms and managing submissions, enabling developers to efficiently handle form-related tasks without extensive coding or complex configurations.