View on GitHub

Formulate

An advanced form builder for Umbraco.

Form Rendering

Once you’ve gone through the trouble of installing Formulate, creating a form, and modifying a document type to pick a form, the final step is to render that form to HTML on your website.

You can render your picked form like this (this assumes the form picker property is called “myFormPicker”):

@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>("myFormPicker");
    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>

    <!-- 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 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>

</body>
</html>

All you need to do is copy the above code into a CSHTML file on a page with a picked form on a property with the appropriate alias, and you will have a rendered form.

You can of course integrate it with your site in a number of ways, but this is the simplest version.

If you are interested in minified or modular JavaScript, read further about that here.