3

I am having an issue when submitting a form when there is no redirect. Basically i have a contact us form and eventually will implement a email action. But every time i click the submit button even without filling any data, the page will go to a form builder page.

my form

enter image description here

after clicking the send button (things i typed will be already there also)

![enter image description here

I can put a redirect on this submit action and will redirect to another page with out any issue. But my requirement is to stay on the page so i am showing the form in a bootstrap modal and when submit i want the modal to close and stay on the page. i try to make the form a 2 page, where the second page will have a thank you text and the send button navigation step will be next page. But same thing happen where the browser will redirect to form builder link with un-styled form. all the functionality of form work in this link including the next page. H

We are dropping the form on a modal like this with our own rendering, but the issue happens even if we are simply dropping the form with regular defualt mvc rendering 

<div class="modal hide fade" id="@modalId" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <div class="dnowZoomIcon d-flex justify-content-center">
                        <i class="ion-ios-close-empty align-self-center"></i>
                    </div>
                </button>
        </div>
        <div class="modal-body">
            @Html.Sitecore().Rendering("{6B5$#$#$#E6-5C85-44%87-BA7E-F8C2ECC186A8}", new { Datasource = Model.Id.ToString("B"), UniqueId = Model.Id.ToString("B") })

        </div>
    </div>
</div>

we added renderform styles and script in our main layout like this enter image description here

Improve this question

3 Answers 3

Reset to default
4

For the scripts and styles to work, you need to break up the layout into two with an outer layout that contains the links to render the form styles and an inner layout.

For form scripts and styles to be rendered, you must use two layouts: MVC Layout.cshtml and MVC OuterLayout.cshtml. First, open the MVC Layout.cshtml file and to refer to the outer layout that you will create in the next step, add Layout = MVCOuterLayout.cshtml

See steps 3&4 in the documentation.

Outer layout example (MvcOuterLayout.cshtml)

@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>
    <title>@Html.Sitecore().Field("title", new { DisableWebEdit = true })</title>
    @Html.Sitecore().VisitorIdentification()
    @Html.RenderFormStyles()
    @Html.RenderFormScripts()
</head>
<body style="padding-top: 70px;">
    @RenderBody()
</body>
</html>

Inner Layout Example

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

@{

Layout =
"MvcOuterLayout.cshtml";
}

<h1>@Html.Sitecore().Field("title")</h1>
<div>
@Html.Sitecore().Placeholder("main")
</div>
Improve this answer
3
  • but we are implementing the form on an existing site with existing layout . The doc says this:--- "Note If you work with an existing site, and therefore an existing layout, you should apply the following two steps to the View file referenced in their layout: add the reference @using Sitecore.ExperienceForms.Mvc.Html and in the head section: add @Html.RenderFormStyles() and @Html.RenderFormScripts(). Doing this will add the necessary references to the form stylesheets and JavaScript files. By using the Experience Editor you can now add the MVC Form component to add a form to a page."
    – jsPlayer
    Feb 7, 2019 at 21:51
  • 1
    We were never able to get that to work and ended up splitting out the layout as if it were a new site. Moving most of the contents of the default layout to what they call MVCOuterLayout.cshtml and having just the Layout call and the placeholder call in the default layout. That was what ended up working.
    – Lyle Jordan
    Feb 7, 2019 at 22:00
  • FInally worked. I was trying to create whole new layout and outer layout just for form. created an outer layout and rendered the body there and on layout reference outer layout.
    – jsPlayer
    Feb 8, 2019 at 16:32
4

For Sitecore 9.3 (and possibly older versions - the documentation for these appears to have been updated since the above answers were posted), the following statements must be placed before the closing </body> tag, not in the <head>. Sitecore 9.3 does not appear to require any special inner/outer layouts - just place these statements directly in the site's layout .cshtml.

@Html.RenderFormStyles()
@Html.RenderFormScripts()

Documentation: https://doc.sitecore.com/developers/93/sitecore-experience-manager/en/add-a-form-to-a-webpage.html

Improve this answer
1
  • This is the right location for Sitecore 9.3 version. I tried to put this in Head section but that didn't work.
    – ironman
    Jan 24, 2021 at 1:54
0

It sounds like scripts for your form have not been loaded correctly in the <head> of your page. Have you followed the documentation here on modifying your main layouts?

It's important that you add these helpers in the <head> of your layout: 

@Html.RenderFormStyles()
@Html.RenderFormScripts()

and this using statement:

@using Sitecore.ExperienceForms.Mvc.Html
Improve this answer
1
  • 1
    we did add those to our base mvc layout , i updated the question with that screenshot
    – jsPlayer
    Feb 7, 2019 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.