Default MVC sitefinity forms template is missing a couple things

  1. FormViewModel does not expose the forms title
  2. Does not provide any way to specify a template... now it looks like you can set a custom form for a specific form based convention, but that would be annoying to keep re-implimenting.  What we want here is the ability to have an SF form popup in a modal window.
  3. So based on #2 we're also missing some meta fields to change the button text... so... yeah

ANYWAY on to the new template, for reference this is the existing template.

Usage to make a form popup with this template

  • In the designer add a class name of "modal" or "popup"
  • To change the button text add the class of "title-".  Everything after the dash will be used in the title and *NOT* added to the class of the form. 
  • CssClass Examples:
    popup title-This is my Button
    modal title-Click Me

TLDR: Basically this just wraps the existing form code in a bootstrap modal window code and only renders it if it see's "popup", "modal", or "model" in the CssClass field.  It would be awesome (any telerik'r reading this if there was a template dropdown).

Index.cshtmlView on GitHub
@model Telerik.Sitefinity.Frontend.Forms.Mvc.Models.FormViewModel

@using System;
@using System.Linq;
@using System.Collections;
@using Telerik.Sitefinity;
@using Telerik.Sitefinity.UI.MVC;
@using Telerik.Sitefinity.Frontend.Forms.Mvc.Helpers;
@using Telerik.Sitefinity.Frontend.Forms.Mvc.Models;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages;
@using Telerik.Sitefinity.Modules.Forms;

@{ 
    var formTitle = "";
    var isPopup = Model.CssClass.ToLower().Contains("modal") || Model.CssClass.ToLower().Contains("model") || Model.CssClass.ToLower().Contains("popup");

    var css = Model.CssClass;
    var title = "Contact Us";
    if (Model.CssClass.ToLower().Contains("title-"))
    {
        var sections = Model.CssClass.Split('-');
        title = sections.GetValue(1).ToString();

        css = sections.GetValue(0).ToString().Replace(" title", "");
    }

    var thisForm = FormsManager.GetManager().GetForms().FirstOrDefault(f => f.Id == new Guid(Model.FormId) && f.Visible); //This should be in the model, but isn't
    if(thisForm != null)
    {
        formTitle = thisForm.Title;
    }
}

<div data-sf-role="form-container test" class="@css">
    <input type="hidden" data-sf-role="form-id" value="@Model.FormId" name="FormId" />
    @if (isPopup)
    {


        <input type="button" class="btn btn-primary btn-lg btn-block" value="@title" data-toggle="modal" data-target="#aform-@(Model.FormId)" />
        @:<div class="modal fade" id="aform-@(Model.FormId)" tabindex="-1" role="dialog">
           @:<div class="modal-dialog" role="document">
                @:<div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">@formTitle</h4>
                    </div>
                    @:<div class="modal-body">
    }

                            @*DEFAULT SF FORM CODE START*@
                            @if (!string.IsNullOrEmpty(@ViewBag.ErrorMessage))
                            {
                                <div>@ViewBag.ErrorMessage</div>
                            }

                            @if (Model.UseAjaxSubmit)
                            {
                                <span data-sf-role="success-message" style="display: none;">@Model.SuccessMessage</span>
                                <span data-sf-role="error-message" style="display: none;"></span>
                                <img data-sf-role="loading-img" src='@Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Themes.Default.Images.Loadings.sfLoadingData.gif")' style="display:none;" />
                                <div data-sf-role="fields-container">
                                    @* Fields Markup *@
                                </div>
                            }
                            else
                            {
                                using (Html.BeginFormSitefinity("", null, (System.Web.Routing.RouteValueDictionary)null, FormMethod.Post, new Dictionary<string, object> { { "enctype", "multipart/form-data" } }, true))
                                {
                                    @* Fields Markup *@
                                }
                            }

                            @if (Model.UseAjaxSubmit)
                            {
                                <input type="hidden" data-sf-role="ajax-submit-url" value="@Model.AjaxSubmitUrl" />
                                <input type="hidden" data-sf-role="redirect-url" value="@Model.RedirectUrl" />
                                @Html.Script(ScriptRef.JQuery, "jquery", false)
                                @Html.Script(Url.WidgetContent("Mvc/Scripts/Form/form-ajax.js"), "bottom", false)
                            }
                            @*DEFAULT SF FORM CODE END*@

    @if (isPopup)
    {
                    @:</div>
                @:</div><!-- /.modal-content -->
            @:</div><!-- /.modal-dialog -->
        @:</div><!-- /.modal -->
    }

</div>

Here's the result

PopupForm-Image1

PopupForm-Image2