First Sitecore Form

9/1/2020

Struggled a bit while creating a Sitecore form on a page. Here is how to add it.

First, we need an MVC layout.

@using Sitecore.Mvc;
@using Sitecore.Mvc.Analytics.Extensions;

@{

    Layout = "MvcOuterLayout.cshtml";

}

<h1>@Html.Sitecore().Field("title")</h1>

<div id="container">
    <div class="scfForm iframe-form">
        @Html.Sitecore().Placeholder("main")
    </div>
</div>

Here is the code for MVC outer layout:

@using Sitecore.Mvc;
@using Sitecore.ExperienceForms.Mvc.Html;
@using Sitecore.Mvc.Analytics.Extensions;
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sitecore Form</title>
    <link rel="stylesheet" type="text/css" href="/css/theme.css" media="screen">
    <link rel="stylesheet" type="text/css" href="/css/modules.css" media="screen">
    <style>
        body {
            background: none;
        }
    </style>
    @*@Html.Sitecore().VisitorIdentification()*@
    @Html.RenderFormStyles()
    @Html.RenderFormScripts()
</head>
<body>
    @RenderBody()
</body>
</html>

Now add MVCLayout as Layout in Sitecore and MVC Form rendering with placeholder "main"

https://imgur.com/a/p4Lshwy