umbraco forms themes

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

kapil 21 posts 114 karma points

Aug 12, 2019 @ 21:16

0

Umbraco forms themes

I am using Umbraco forms, when creating the questions i have used the 3 column layout , however when the form is rendered in the .cshtml file all the fields are shown one below the other (horizontally stacked).

@Umbraco.RenderMacro("renderUmbracoForm", new {FormGuid="e0a717c8-0f6b-42c6-b61a-3378de52b0cb", FormTheme="", ExcludeScripts="0"})

The bootstrap 2 or 3 column layouts are not appearing to work correctly. Also tried setting the FormTheme property to 'bootstrap3-horizontal' but this still does not work. Let me know if missing anything. Do i need to use any custom theme form for this to appear

Copy Link
Shaishav Karnani from digitallymedia.com 354 posts 1638 karma points

Aug 13, 2019 @ 06:34

1

Hi Kapil,

Here is the code for Form \Views\Partials\Forms\Themes\bootstrap3-horizontal\Form.cshtml

You can debug this file to see the issue and try chrome inspect to see if css is applied.

It seems bootstrap css version is not matching on the master. Once you add it this issue should be fixed.

Let me know if you need further assistance.

Copy Link

kapil 21 posts 114 karma points

Aug 14, 2019 @ 02:53

Hi,

Thanks for your reply. I did check in chrome the bootstrap.css is applied however the 2 column or 3 column layout was still not appearing in my final umbraco form. To start clean, I created a new Umbraco project and created a sample Umbraco form with a 3 column design and then used with a clean master file with required bootstrap css, however this still does not render 3 column layout . Here is my master.cshtml file

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Master</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-grid.css" rel="stylesheet" />
</head>
<body>
    @RenderBody()


<script src="~/Scripts/bootstrap.min.js"></script>




<script src="~/Scripts/popper-utils.js"></script>




<script src="~/Scripts/popper.min.js"></script>



    <!--Forms Dependency -->


<script src="~/Scripts/jquery-3.0.0.min.js"></script>




<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>




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



</body>
</html>

Here is 3 column layout form created in Umbraco

Umbraco Sample form

Here is the template where the using Macro the form was inserted

 @inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.SampleForm>
    @using ContentModels = Umbraco.Web.PublishedModels;
    @{
        Layout = "master.cshtml";
    }

    @Model.Value("SampleFormHeader")

<!-- Also tried setting bootstrap3-horizontal value in the FormTheme property -->

    @Umbraco.RenderMacro("renderUmbracoForm", new {FormGuid="9e021406-de89-4777-b76c-d4a00aa3e68d", FormTheme="", ExcludeScripts="0"})

However when view the final content this is how it displays without any 3 column layout

After running the content page

Also set bootstrap3-horizontal in the FormTheme property but no effect. Let me know if i am missing anything

Copy Link

Shaishav Karnani from digitallymedia.com 354 posts 1638 karma points

Aug 14, 2019 @ 03:19

0

Hi Kapil,

It looks good. Please can you send you solution/database zip via wetransfer and I will take a look. Email: [email protected]

Copy Link
kapil 21 posts 114 karma points

Aug 21, 2019 @ 14:26

0

It found the solution. thanks for your time

Copy Link
Brian McNally 17 posts 105 karma points

Jun 28, 2022 @ 14:39

0

Kapil, I am needing to create a multiple columns as well. Can you share your solution?

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?