Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Tom Newt 28 posts 182 karma points
    May 09, 2023 @ 17:47
    Tom Newt
    0

    Render Forms in Block Element

    Using Umbraco And Getting Started
    Umbraco 9

    We're working on a migration from v7 to v10. Part of that was migrating our grid content using uSync.Migrations which worked great for rich text and images, but one thing that's not working is our grid form picker. I've tried following the documentation for forms front-end and rendering, but the form is still not displaying. I've created the block element doc type as well as the corresponding partial view, I've included that code below. Inserting a form through the rich text editor works, but how do you display a form in the block list?

    @using Umbraco.Extensions;
@using Umbraco.Forms.Web;
@using Umbraco.Forms.Web.Extensions;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>

@Html.RenderUmbracoFormDependencies()

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

<div>
    @await Component.InvokeAsync("RenderFormScripts", new {formId = @Model.Content.Value("form"), theme = "bootstrap3-horizontal"})
</div>
    Copy Link
  • Debasish Gracias 27 posts 137 karma points
    Jul 31, 2023 @ 10:45
    Debasish Gracias
    0

    Im getting the same error. Were you able to resolve this Tom?

    Copy Link
  • Tom Newt 28 posts 182 karma points
    Aug 01, 2023 @ 14:51
    Tom Newt
    0

    Debasish I believe I've got this working, at least on our test site. The following hard codes the theme and exclude scripts, but I think it could be modified to pass those values through. Let me know if you get something better figured out. It seems strange to use the rendermacroasync function even though my block element simply uses the forms picker.

    @using Umbraco.Extensions;
@using Umbraco.Forms.Web;
@using Umbraco.Forms.Web.Extensions;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>

@if(Model.Content.Value("form") != null)
{
@Html.RenderUmbracoFormDependencies()
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

@await Umbraco.RenderMacroAsync("renderUmbracoForm", new {FormGuid=Model.Content.Value("form"), FormTheme="bootstrap3-horizontal", ExcludeScripts="0"})
}
    Copy Link
  • Debasish Gracias 27 posts 137 karma points
    Aug 02, 2023 @ 04:46
    Debasish Gracias
    100

    Tom I was able to get it to work. Here is what I had to do

    • The block element should be at \Views\Partials\blockgrid\Components\form.cshtml

    @inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<>

    >

    @(await Component.InvokeAsync("RenderForm",new { formId = Model.Content.PickAform, theme = "default", includeScripts = false }))

    This got the umbraco forms working for me. Let me know how it goes for you.

    Copy Link
  • Tom Newt 28 posts 182 karma points
    Aug 02, 2023 @ 13:50
    Tom Newt
    0

    Yep, that worked for me and feels correct compared to using the macro. For anyone that runs into this here's my final element code.

    @using Umbraco.Extensions;
@using Umbraco.Forms.Web;
@using Umbraco.Forms.Web.Extensions;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<Umbraco.Cms.Core.Models.Blocks.BlockGridItem>

@{
    var theme = Model.Content.Value("theme") != null ? Model.Content.Value("theme") : "bootstrap3-horizontal";
    bool scripts = Model.Content.Value("includeFormScripts") == "True" ? true : false;
}

@if(Model.Content.Value("form") != null)
{
    @Html.RenderUmbracoFormDependencies()
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>

    @(await Component.InvokeAsync("RenderForm",new { formId = Model.Content.Value("form"), theme = theme, includeScripts = scripts }))
}
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft