I need to integrate a Formulate form on a website using the umbraco's grid Editor.
I tried to integrate the formulate form via a new document type and the plugin Doc Type Grid Editor. But it does not work. The "form" part was empty and both, success and failed messages appeard on the frontend page.
Then I tried to create a new macro (with a partial macro view) and this time the form appears and even does work. But If I select a form on a page and save the document node I am no longer be able to change this page. When I click "Save and Publisch" there is a endless wait sign. I need to close the Browser and reopen it to be able to do anything in umbraco!
This is my implementation:
Partial View Macro:
@using formulate.app.Types
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
// Boilerplate.
Layout = null;
// Get a view model for the picked form.
var pickedForm = Model.Content.GetPropertyValue<ConfiguredFormInfo>("formular");
var vm = formulate.api.Rendering.GetFormViewModel(pickedForm.FormId, pickedForm.LayoutId,
pickedForm.TemplateId,
// Include this parameter in Formulate 0.3.7 or greater.
Model.Content);
}<!doctype html>
<html>
<head>
<title>Formulate Example</title>
<!-- Include the CSS/JavaScript for jQuery, Bootstrap, Lodash, and AngularJS. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- The Formulate JavaScript for the Responsive / AngularJS / Bootstrap form template. -->
<script src="/App_Plugins/formulate/responsive.bootstrap.angular.js"></script>
<!-- This is some AngularJS JavaScript specific to your application. -->
<script>
// Include Formulate as a dependency.
var app = angular.module("app", ["formulate"]);
// Create a controller to handle form submissions.
app.controller("formWrapper", function ($scope) {
$scope.status = "pending";
$scope.$on("Formulate.formSubmit.OK", function () {
$scope.status = "success";
});
$scope.$on("Formulate.formSubmit.Failed", function () {
$scope.status = "failure";
});
});
</script>
</head>
<body ng-app="app">
<!-- Handle the display of the form, the success message, and the error message. -->
<div ng-controller="formWrapper">
<!-- Display the form. -->
<div ng-if="status !== 'success'">
<div>
@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>
</body>
</html>
I know the html code on the page is not correct if I add new header and body sections into a partial view - I try to solve this later.
I also create a property on my document type called "formular". Now I can choose a form in the "formular" property and then insert the form via the grid editor and adding the macro above.
Is there a sample or doc or something else how to integrate the form render with the umbraco grid editor?
What's the problem not being able to change a document any more once I added my partial view macro to the grid editor?
I'm afraid I can't help much with the grid editor (haven't jumped on that bandwagon personally).
However, I would suspect there is some JavaScript error that should be visible in your developer tools console (e.g., in Chrome). If you see any errors there, let me know and I'll take look.
You might also want to check in the Umbraco error log text file to see if there are any relevant errors.
Ah, I found a solution: just disable "Render in RTE and Grid Editor" and there is no more interference between the umbraco backend and the angular.js of the form.
Now I only need a solution for the wrong html structure because of the added css and script files needed for the form to render correctly. I don't want to include all those files on the master template because only one page will have a form on it.
Now I only need a solution for the wrong html structure because of the added css and script files needed for the form to render correctly
Not sure what would be "wrong" about the HTML structure.
only one page will have a form on it
Does that page have its own document type? For example, "Contact Us"? Assuming it does and that the alias of the document type is "contactUs", you could do this on the master template:
if ("contactUs".InvariantEquals(Model.Content.DocumentTypeAlias))
{
// JavaScript and CSS rendered here.
}
How to render form in the Umbraco Grid Editor?
I need to integrate a Formulate form on a website using the umbraco's grid Editor.
I tried to integrate the formulate form via a new document type and the plugin Doc Type Grid Editor. But it does not work. The "form" part was empty and both, success and failed messages appeard on the frontend page.
Then I tried to create a new macro (with a partial macro view) and this time the form appears and even does work. But If I select a form on a page and save the document node I am no longer be able to change this page. When I click "Save and Publisch" there is a endless wait sign. I need to close the Browser and reopen it to be able to do anything in umbraco!
This is my implementation:
Partial View Macro:
I know the html code on the page is not correct if I add new header and body sections into a partial view - I try to solve this later.
I also create a property on my document type called "formular". Now I can choose a form in the "formular" property and then insert the form via the grid editor and adding the macro above.
Is there a sample or doc or something else how to integrate the form render with the umbraco grid editor?
What's the problem not being able to change a document any more once I added my partial view macro to the grid editor?
I'm afraid I can't help much with the grid editor (haven't jumped on that bandwagon personally).
However, I would suspect there is some JavaScript error that should be visible in your developer tools console (e.g., in Chrome). If you see any errors there, let me know and I'll take look.
You might also want to check in the Umbraco error log text file to see if there are any relevant errors.
Ah, I found a solution: just disable "Render in RTE and Grid Editor" and there is no more interference between the umbraco backend and the angular.js of the form.
Now I only need a solution for the wrong html structure because of the added css and script files needed for the form to render correctly. I don't want to include all those files on the master template because only one page will have a form on it.
Do you know a solution for this?
the css files are not needed because my site is based on a bootstrap template. I just deleted the head an title tag and changed the body tag to a div.
It seems all is working now!
Awesome, I'm glad you got it working.
When you have deployed the form to your production website, let me know and I may feature it on the Formulate website.
Not sure what would be "wrong" about the HTML structure.
Does that page have its own document type? For example, "Contact Us"? Assuming it does and that the alias of the document type is "contactUs", you could do this on the master template:
is working on a reply...