Bits of Xperience: Displaying Rich Text After a Form Submission
Tags: xperience, kentico, csharp, aspnet
Published: 2022-09-06 12:54:54

---
title: Bits of Xperience: Displaying Rich Text After a Form Submission
published: true
description: Learn how to customize Kentico Xperience to display Rich Text content after a form submission so marketing professionals can provide a "richer" experience for visitors to your site.
tags: xperience, kentico, csharp, aspnet
series: Bits of Xperience
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/91a47vt9de7x1jkcfrl8.jpg
---

Kentico Xperience's [Form Builder](https://docs.xperience.io/managing-website-content/forms/composing-forms) enables marketing professionals to quickly build and manage forms in a no-code UI for use across their website 👩🏾‍💼.

The experience for site visitors submitting a form can be customized for successful submissions 👍🏽.

Let's look at what's possible and how a few lines of customized code can extend the functionality even more 😮!

## 📚 What Will We Learn?

- What happens after a Form is submitted
- How to customize the Form management UI
- How to customize Razor Class Libraries

## ❓ What Happens After a Form is Submitted?

Forms on a website are one of the most common ways for marketers to engage with visitors.

Let's take the Dancing Goat demo site Contact Form as an example:

![Filled out Contact form on a website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx5wm7t5o91e7qq632pg.png)

When a visitor fills out this Form and submits it, what exactly happens 🤔?

1. If the form is not valid (based on [form field validation](https://docs.xperience.io/managing-website-content/forms/composing-forms#Composingforms-Addingfieldvalidation)) Xperience will re-render the form with validation error UI and messages
2. If the form is valid, Xperience looks for an existing form entry for the submitter (if the visitor is [identified as an existing Contact](https://docs.xperience.io/managing-website-content/forms/using-smart-fields-in-forms#Usingsmartfieldsinforms-Contacttrackingrequirement)) and updates it, or adds a new Form submission to the database.
3. If the Form's Redirect Url is populated, redirect the page to a new URL (usually to display some "thank you" content).
4. If Form's Display Text is populated, return Display Text and replace the Form with the Display Text.

Redirecting to a new page gives a marketer a lot of control over the visitor's experience 💪🏻, but it also requires maintaining an additional page on the site 😞.

Using the Display Text is simpler and more convenient 🤗!

Unfortunately, the Display Text field only accepts plain text. What if we want to respond to a form submission with a helpful message, links, and maybe a Call To Action with an accessible design 🤷🏼‍♂️?

![Form metadata in Kentico Xperience administration interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqkivan8kfc51orqo9qg.png)

It seems as though we'll need to customize what kind of content we can author here and how it's displayed on the site after a submission 🤓!

## 🗃 How to Customize the Form Management UI

The first thing we need to look for is a way to change the Display Text field's Text input to a Rich Text input.

This UI element can be found at `CMS\CMSModules\BizForms\Tools\BizForm_Edit_General.aspx`:

![Visual Studio Solution Explorer showing path to Form metadata UI control file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5t4vphca6nnmgrajitbf.png)

The key customization we need to make to this file is to register a new "Rich Text" User Control (called `HtmlAreaControl`) at the top of the file:

```html
<%@ Register 
    Src="~/CMSFormControls/Basic/HtmlAreaControl.ascx"
    TagName="HtmlArea" 
    TagPrefix="cms" %>
```

![ASPX markup for Form metadata UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xylfv4fk9ip0zwq4xdlp.png)

With that registration added, we can refer to the control further down the file, replacing the `<cms:LocalizableTextBox />` currently being used for Display Text input with a `<cms:HtmlAreaControl />`:

```html
<cms:CMSRadioButton ... />

<div class="selector-subitem">
    <cms:LocalizableTextBox ID="txtDisplay" runat="server" MaxLength="200" />
</div>
```

is replaced by:

```html
<cms:CMSRadioButton ... />

<div class="selector-subitem">
    <cms:HtmlArea ID="txtDisplay" runat="server" MaxLength="200" />
</div>
```

![Change to ASPX markup with HtmlArea control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zngwgnl0hqfg00hkg2x6.png)

With these two changes, we can rebuild the CMS application and go back to the Form "General" tab and add Rich Text as our Display Text 🦾!

![Rich Text editor replacing a text field for Form Display Text value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqj2ye2ewy2bgg4hkphm.png)

## 📅 How to Customize Razor Class Libraries

Even though we're now storing Rich Text as our Form's Display Text, we won't get very far if we don't change how that Display Text is rendered on the live site 😏.

Fortunately, ASP.NET Core includes a feature that allows us to [override a View included in our project from a Razor Class Library](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio#override-views-partial-views-and-pages) by adding a View file with the exact same name and path as the file from the Razor Class Library 🧐.

The View that controls how the Form Display Text is rendered after a successful submission is in the Razor Class Library at the following path:

```
~/Views/Shared/Kentico/Widgets/FormWidget/_FormWidgetTextConfirmation.cshtml
```

We don't have a file at that path in our project, so let's create a new empty one 🙃.

> Make sure you use the same path and filename, otherwise ASP.NET Core will see your View as a new one and not a replacement for the View coming from the library!

The Razor in the original View from the library looks this like:

```html
@model string

<div class="formwidget-submit-text">@Model</div>
```

Which we are going to replace with the following:

```html
@model string

<div class="formwidget-submit-text">@Html.Raw(Model)</div>
```

![Authoring new Razor View file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwnv00jhkixmo2lkhrgg.png)

By rendering the `Model` with `Html.Raw()` we ensure our Rich Text Display Text won't be escaped when displayed on the page.

At this point we can rebuild our ASP.NET Core application and we're all set 🙌🏿!

## 🏁 Conclusion

With our 2 simple customizations, we can try out the Contact form to see our Rich Text message displayed on the page:

![Thank you message with a link displayed on a website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyam3hns0ujze31wmm8c.png)

It worked 🎉!

We can use any content or design to our Display Text that can be authored in Rich Text and craft a "richer" experience (pun intended 😆) without having to go through the process of creating a completely separate page to redirect to.

As always, thanks for reading 🙏!

## References

- [Form Builder](https://docs.xperience.io/managing-website-content/forms/composing-forms) - Xperience Docs
- [Form Builder field validation](https://docs.xperience.io/managing-website-content/forms/composing-forms#Composingforms-Addingfieldvalidation) - Xperience Docs
- [Form Builder Smart Fields](https://docs.xperience.io/managing-website-content/forms/using-smart-fields-in-forms#Usingsmartfieldsinforms-Contacttrackingrequirement) - Xperience Docs
- [Overriding Razor Class Library Views](https://docs.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-6.0&tabs=visual-studio#override-views-partial-views-and-pages) - ASP.NET Core Docs

---

We've put together a list over on [Kentico's GitHub account](https://github.com/Kentico/Home/blob/master/RESOURCES.md) of developer resources. Go check it out!

If you are looking for additional Kentico content, checkout the Kentico or Xperience tags here on DEV.

{% tag kentico %}

{% tag xperience %}

Or my [Kentico Xperience blog series](https://dev.to/seangwright/series), like:

- [Kentico Xperience Xplorations](https://dev.to/seangwright/series/8185)
- [Kentico Xperience MVC Widget Experiments](https://dev.to/seangwright/series/9483)
- [Kentico Xperience Design Patterns](https://dev.to/seangwright/series/10963)