Umbraco Forms
CMSCloudHeartcoreDXP
10.latest (LTS)
10.latest (LTS)
  • Umbraco Forms Documentation
  • Legacy Documentation
  • Release Notes
  • Installation
    • Installing Umbraco Forms
    • Licensing
  • Upgrading
    • Upgrading Umbraco Forms
    • Version Specific Upgrade Notes
    • Migration IDs
  • Editor
    • Creating a Form - The Basics
      • Form Settings
      • Overview Of The Field Types
        • Date
        • File Upload
        • reCAPTCHA V2
        • reCAPTCHA V3
      • Setting-up Conditional Logic on Fields
    • Attaching Workflows
      • Workflow Types
    • Viewing And Exporting Entries
    • Defining And Attaching Prevalue Sources
      • Prevalue Source Types Overview
  • Developer
    • Preparing Your Frontend
    • Rendering Forms
    • Rendering Forms Scripts
    • Themes
    • Custom Markup
    • Email Templates
    • Working With Record Data
    • Umbraco Forms in the Database
    • Extending
      • Adding A Type To The Provider Model
      • Adding A Field Type To Umbraco Forms
        • Excluding a built-in field
      • Adding A Prevalue Source Type To Umbraco Forms
      • Adding A Workflow Type To Umbraco Forms
      • Adding An Export Type To Umbraco Forms
      • Adding a Magic String Format Function
      • Adding A Server-Side Notification Handler To Umbraco Forms
      • Adding a Validation Pattern
      • Customize Default Fields and Workflows For a Form
    • Configuration
      • Forms Provider Type Details
    • Security
    • Magic Strings
    • Health Checks
      • Apply keys and indexes
      • Apply keys and indexes for forms in the database
    • Localization
    • Content Apps
    • Headless/AJAX Forms
    • Block List Filters
    • Field Types
    • Storing Prevalue Text Files With IPreValueTextFileStorage
Powered by GitBook
On this page
  • Rendering Using a View Component
  • Rendering Using a Tag Helper
  • Rendering Using a Macro

Was this helpful?

Edit on GitHub
Export as PDF
  1. Developer

Rendering Forms

Learn the different ways of rendering a form on your website when using Umbraco Forms.

PreviousPreparing Your FrontendNextRendering Forms Scripts

Last updated 1 year ago

Was this helpful?

There are three options available for rendering a form.

Rendering Using a View Component

To display a form in your view, you can make a call to a view component:

@await Component.InvokeAsync("RenderForm", new { formId = Guid.Parse("<form guid>"), theme = "default", includeScripts = false })

Four parameters can be provided:

  • formId is the GUID of a form.

  • theme is the name of a theme. If not provided, the default theme is used (see ).

  • includeScripts indicates whether scripts should be rendered with the form (see .

  • recordId is an optional existing record GUID, used if editing records via the website is

Usually, rather than hard-coding the form's GUID, you'll use a form and/or theme picker property on your page:

@await Component.InvokeAsync("RenderForm", new { formId = @Model.Form, theme = @Model.Theme, includeScripts = false })

Rendering Using a Tag Helper

If you prefer a tag helper syntax, you can use one that ships with Umbraco Forms.

Firstly, in your _ViewImports.cshtml file, add a reference to the Umbraco Forms tag helpers with:

@addTagHelper *, Umbraco.Forms.Web

Then in your view you can use:

@if (Model.Form.HasValue)
{
    <umb-forms-render form-id="@Model.FormId.Value" theme="@Model.FormTheme" exclude-scripts="true" />
}

Rendering Using a Macro

With a grid or Rich Text Editor, you need to use a macro. This is also available as an option to display a form in your view, where you provide three parameters:

@await Umbraco.RenderMacroAsync("renderUmbracoForm", new { FormGuid = "<form guid>", FormTheme = "default", ExcludeScripts = "1" })
  • FormGuid is the GUID of a form.

  • FormTheme is the name of a theme. If not provided, the default theme is used.

  • ExcludeScripts takes a value of 0 or 1, indicating whether scripts should be excluded from rendering.

Similarly, you can reference a form picker property on your page:

@if (Model.FormId is Guid formId)
{
    @await Umbraco.RenderMacroAsync("renderUmbracoForm", new { FormGuid = formId, FormTheme = Model.FormTheme, ExcludeScripts = "1" })
}
Themes
Rendering Scripts
enabled in configuration