Hi I have added a Formulate 'subscribe' form to the footer(partial) of my site which appears on every page. I have other pages with forms added via a 'formDisplay' partial.
Q. When viewing a page with 2 forms only the form in the page content is shown, the form in the footer displays the "Your request has been received!
Unable to submit request. Please try again." text. how do I get around this?
FormDisplay.cshtml
@using formulate.app.Types
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
// Boilerplate.
Layout = null;
// Get a view model for the picked form.
var pickedForm = Model.Content.GetPropertyValue<ConfiguredFormInfo>("Form");
var vm = formulate.api.Rendering.GetFormViewModel(pickedForm.FormId, pickedForm.LayoutId,
pickedForm.TemplateId,
// Include this parameter in Formulate 0.3.7 or greater.
Model.Content);
}
@if (pickedForm != null && pickedForm.FormId != null)
{
<div ng-app="app" id="form-grid" ng-controller="formWrapper">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<!-- Display the form. -->
<div ng-if="status !== 'success'">
<div class="container">
@Html.Partial("~/Views/Partials/Formulate/RenderForm.cshtml", vm)
</div>
</div>
<!-- Display the success message. -->
<div ng-if="status === 'success'">
Your request has been received!
</div>
<!-- Display the error message. -->
<div ng-if="status === 'failure'">
Unable to submit request. Please try again.
</div>
</div>
</div>
</div>
</div>
}
FormDisplayFooter.cshtml
@using formulate.app.Types
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
// Boilerplate.
Layout = null;
var pickedForm1 = Model.Content.AncestorOrSelf(1).GetPropertyValue<ConfiguredFormInfo>("formFooter");
var vm1 = formulate.api.Rendering.GetFormViewModel(pickedForm1.FormId, pickedForm1.LayoutId,pickedForm1.TemplateId, Model.Content);
}
@if (pickedForm1 != null && pickedForm1.FormId != null)
{
<div ng-app="app" id="form-grid" ng-controller="formWrapper">
<!-- Display the form. -->
<div ng-if="status !== 'success'">
<div class="form">
@Html.Partial("~/Views/Partials/Formulate/RenderForm.cshtml", vm1)
</div>
</div>
<!-- Display the success message. -->
<div ng-if="status === 'success'">
Your request has been received!
</div>
<!-- Display the error message. -->
<div ng-if="status === 'failure'">
Unable to submit request. Please try again.
</div>
</div>
}
It sounds like you have some sort of AngularJS error. By the looks of it, the likely error is that you've got two ng-app="app" attributes on the same page. Put that on some common ancestor element and remove it from the two other places you've put it. You can put it on the <body> tag, for example.
BTW, I also noticed you have id="form-grid" in both files. While it shouldn't affect the functionality of Formulate, having two of the same ID on the same page isn't really valid. You'll probably want to change that too.
Form on footer (every page)
Hi I have added a Formulate 'subscribe' form to the footer(partial) of my site which appears on every page. I have other pages with forms added via a 'formDisplay' partial.
Q. When viewing a page with 2 forms only the form in the page content is shown, the form in the footer displays the "Your request has been received! Unable to submit request. Please try again." text. how do I get around this?
FormDisplay.cshtml
FormDisplayFooter.cshtml
It sounds like you have some sort of AngularJS error. By the looks of it, the likely error is that you've got two
ng-app="app"
attributes on the same page. Put that on some common ancestor element and remove it from the two other places you've put it. You can put it on the<body>
tag, for example.BTW, I also noticed you have
id="form-grid"
in both files. While it shouldn't affect the functionality of Formulate, having two of the same ID on the same page isn't really valid. You'll probably want to change that too.Perfect!!! I had hoped it would be something simple I was overlooking. Thank you Nicholas.
is working on a reply...