> For the complete documentation index, see [llms.txt](https://hexxu-services-ltd.gitbook.io/uform-kit-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hexxu-services-ltd.gitbook.io/uform-kit-documentation/getting-started.md).

# Getting Started

## **Overview** <a href="#id-2p4ylpspjcft" id="id-2p4ylpspjcft"></a>

UFormKit is a package for Umbraco 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

UFormKit is heavily inspired and influenced by the ContactForm7 plugin for WordPress - <https://wordpress.org/plugins/contact-form-7/> and we feel that the Umbraco community would benefit from similar solution.

This tutorial serves as an introductory guide to the UFormKit package for Umbraco. Throughout this guide, you will find a range of examples that illustrate how to effectively display a form on your page.\
Additionally, it explains the customization of forms and email settings, offering detailed insights and instructions for tailoring these elements to your specific needs.

#### System requirements

UForm Kit ships as two lines under a single package ID. `dotnet add package UFormKit` resolves the right one automatically from your project's target framework.

| UForm Kit | Umbraco        | .NET         |
| --------- | -------------- | ------------ |
| 2.x       | 17             | .NET 10      |
| 1.x       | 10, 11, 12, 13 | .NET 6, 7, 8 |

Either SQL Server or SQLite may be used as the database.

## **Installation** <a href="#cmck12fe46s1" id="cmck12fe46s1"></a>

#### **Command line** <a href="#eao9qt8i2f3t" id="eao9qt8i2f3t"></a>

UForm Kit can be installed using the NuGet Package Manager, by running the following command at the command line prompt in your web project folder.

dotnet add package UFormKit

#### **Visual Studio** <a href="#lt9sjlaqmyhz" id="lt9sjlaqmyhz"></a>

In Visual Studio, you can use the NuGet Package Manager GUI from the Tools menu, by selecting Tools > NuGet Package Manager > Manage NuGet Packages for Solution.

Alternatively, you can run the following command from the NuGet Package Manager Console:

Install-Package UFormKit

## **Upgrading** <a href="#gir7vld1w8tr" id="gir7vld1w8tr"></a>

#### **Command line** <a href="#kf4ergg0ihrp" id="kf4ergg0ihrp"></a>

UForm Kit can be upgraded to the latest version by running the following command at the command line prompt from your web project folder.

dotnet add package UFormKit

#### Upgrading from 1.x to 2.x

2.x targets Umbraco 17, so this is an Umbraco upgrade as much as a package upgrade. Change the target framework, the Umbraco version and the UForm Kit version together, in one edit of your `.csproj` — UForm Kit 2.x ships only `net10.0` and cannot be installed while the project is still on Umbraco 13, and 1.x has no `net10.0` build, so upgrading one at a time never resolves.

Your forms, submissions and settings are preserved; the package does not touch existing content.

Three things need attention after the upgrade.

**Forms placed with the macro stop rendering.** Umbraco 14 removed macros entirely, so the `insertUForm` macro no longer exists. Replace every macro call with the View Component — see *Displaying form on a page*.

**Submitted messages show `<br />` as text.** Umbraco's own upgrade re-points the submission message field at its built-in label editor, which escapes HTML. Fix it once, in **Settings → Data Types → "UForm Submission - Message - Label"**: change **Property Editor UI** to **UFormKit submission message** and save. New installations are unaffected.

**Old plugin files stay on disk.** Changing the package version does not delete the files the previous version installed, so `App_Plugins/UFormKit/` ends up holding both the old AngularJS backoffice (`backoffice/`, `package.manifest`) and the new one (`dist/`, `umbraco-package.json`). The leftovers are ignored by Umbraco 14+ and can be deleted.

After upgrading, do a hard refresh of the backoffice (Ctrl+F5, or a private window).&#x20;
