London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

Dac Thach Nguyen
Dec 25, 2018
  5760
(6 votes)

EPiServer Forms: How to render Forms in a dialog

In some real scenarios, we might need render an EPiServer Forms within a dialog instead of a page. This case will make user focus on the Form. Today I have tried to make the Form work with jQuery UI dialog. Here a some point I summarized to make it works (assume that you are working with Alloy solution).

Create a page type to render an ContentArea with a Form

[SiteContentType(GroupName = Global.GroupNames.News, GUID = "E5CCD734-81F2-4242-82BA-8D888504112B")]
public class SubcriblePage: SitePageData
{
    [Display(GroupName = SystemTabNames.Content, Order = 320)]
    public virtual ContentArea MainContentArea { get; set; }
}

Then create a page with the page type then dnd a Form into it, publish it (let say it url is: "/en/subcrible/".)

Create a zaror layout to render a page which display nothing but Forms (_Empty.cshtml):

@using System.Web.Optimization
@using EPiServer.Framework.Web.Mvc.Html
@model IPageViewModel<SitePageData>
<!DOCTYPE html>
<html lang="@Model.CurrentPage.LanguageBranch">
<head>
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/js")
    @Html.RequiredClientResources("Header")
</head>

<body>
    @RenderBody()
    @Html.RequiredClientResources("Footer")
</body>
</html>

Create a view to render for the page type (SubcriblePage)

@{ Layout = "~/Views/Shared/Layouts/_Empty.cshtml"; }
@using ILMTest
@model PageViewModel<SubcriblePage>

@Html.PropertyFor(x => x.CurrentPage.MainContentArea, new { })
<script>
    if (typeof $$epiforms !== 'undefined') {
        $$epiforms(document).ready(function myfunction() {
            $$epiforms(".EPiServerForms").on("formsSubmitted", function (event, param1, param2) {
                window.parent.$(window.parent.document.body).trigger("submitted");
            });
        });
    }
</script>

This razor view will render an ContentArea with the Form. Add the script will notify parent window to know when the form already submitted (we will close the dialog then).

Open the dialog with a Form (Using iframe which loaded the page alread created above)

<script type="text/javascript">
    var page = "/en/subcrible/";

    var $dialog = $('<div></div>')
        .html('<iframe style="border: 0px; overflow: hidden;" src="' + page + '" width="100%" height="100%"></iframe>')
        .dialog({
            autoOpen: false,
            modal: true,
            height: 450,
            width: 500,
            title: "Some title"
        });
    $dialog.dialog('open');

    $(document).on("submitted", "body", function () {
        setTimeout(function () {
            $dialog.dialog("close");
        }, 1000)
    });
</script>

And here is result:

Dec 25, 2018

Comments

Kane Made It
Kane Made It Jan 4, 2019 01:57 AM

As awesome as always captain Rocky :D

Luc Gosso (MVP)
Luc Gosso (MVP) Jan 23, 2019 03:03 PM

Hey Rocky, Good work, just a friendly comment:

$$epiforms(".EPiServerForms").on("formsSubmitted" is not enough

You have to check the event like this:

 $$epiforms(document).ready(function closeParentModal() {
            $$epiforms(".EPiServerForms").on("formsSubmitted", function (event) {
                if (event.isFinalizedSubmission && event.isSuccess)
                window.parent.$(window.parent.document.body).trigger("submitted");
            });
        });

Or else it will close when captcha is used and wrong or if use of "steps"

Br Luc Gosso

Luc Gosso (MVP)
Luc Gosso (MVP) Jan 23, 2019 03:08 PM

Another thing, the "subscribe" page needs to be a Episerver PageData as in your example else @Html.RequiredClientResources("Header") wont work.

Is there a way to get @Html.RequiredClientResources("Header") to work on an standard MVC view or a Razor "Webpage" 3 view?

@Html.RequiredClientResources("Header") seems to be needing a episerver context page, why is that? (Question to Forms team)

Please login to comment.
Latest blogs
Render ContentArea without wrapping them in surrounding div

CustomContentAreaRenderer is a specialized class that overrides the default ContentAreaRenderer. It customizes the rendering behavior for content...

sunylcumar | May 18, 2025

Indexing a content item programatically

public bool IndexContent(int contentId, bool contentOnly, bool childrenOnly, string language) { // Retrieve the content var contentReference = new...

sunylcumar | May 18, 2025

Add a new menu item to the Admin Menu in Optimizely CMS

Create a new Controller called CustomMenuController and decorate with [Authorize(Roles ="CMSAdmins")] so that it will be accessed by admins only...

sunylcumar | May 18, 2025

Display page/block thumbnail based on selected site in multi-site solution

In previous blog we described how to control the visibility of the blocks or properties based on the current site in multisite solution. We can use...

Tomek Juranek | May 16, 2025