Because frankly, the default layout is not too good.

That depends on what you mean by "modify layout". I suspect you are talking about one of two things:

1. Adding rows and columns.
2. Styling form elements to look nicer.

Rows and Columns

I'll address the first one first. If you want to add rows and columns, you can use the layout designer to do so. If you don't like the layout designer, you can swap it out with your own layout designer. This page shows you an example layout (image below for reference): http://www.formulate.rocks/complex-form

Styling Forms

Formulate comes with no styles built in, though it does use Bootstrap classes so the rows/columns will work. This is done intentionally, as in my experience forms are typically styled very differently from site to site. I am planning to add some sample styles at some point, as styling things like the validations can be tricky: https://github.com/rhythmagency/formulate/issues/38

Here are some sample styled Formulate forms:

Custom Templates

By the way, you can add new templates to change the way Formulate renders forms, if you need to do something really custom (e.g., use Foundation instead of Bootstrap). By default, Formulate uses this template: https://github.com/rhythmagency/formulate/blob/develop/src/Website/Views/Partials/Formulate/Responsive.Bootstrap.Angular.cshtml

Creating a new template is as simple as copying that file and adding it to the templates.config file (located in ~/Config/Formulate/templates.config): https://github.com/rhythmagency/formulate/blob/d21ebdd80cae106692d71b2a3f0c93ef08713c36/src/Website/Config/Formulate/templates.config

Let me know if that does or does not answer your question. I'd be happy to help you get up and running in any way I can.

By the way, you had mentioned the RenderForm.cshtml file: https://github.com/rhythmagency/formulate/blob/08eef0bbee2a54a3923a204bf8b11c30caa4b4b8/src/Website/Views/Partials/Formulate/RenderForm.cshtml

If you are curious, that file basically just chooses which of the templates to render. Templates are the actual CSHTML files that do the rendering of the form.

You'll also note that most of the rendering does not happen in the default template. That's because it's built with AngularJS. Most of the JavaScript for that can be viewed here (this all gets compiled into a single JavaScript file located at /App_Plugins/formulate/responsive.bootstrap.angular.js): https://github.com/rhythmagency/formulate/tree/08eef0bbee2a54a3923a204bf8b11c30caa4b4b8/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form

Nicholas, I guess I just find it strange how there's no Razor code - only Javascript - to work with. What if I want to wrap my controls in particular markup or add attributes to the fields? It sort of uses Bootstrap classes, but none of the form group or form control classes that make Bootstrap so pretty. I really don't find this approach to templating very intuitive or useful.

Nicholas, I guess I just find it strange how there's no Razor code - only Javascript - to work with.

I can see how that would seem strange. The reason for that is that the default template constructs the form using AngularJS. You can of course create your own template if you have a preference to use other technologies (e.g., pure CSHTML or pure jQuery). Those alternative templates are actually on the roadmap: http://www.formulate.rocks/roadmap

What if I want to wrap my controls in particular markup or add attributes to the fields?

You can do that. Simply copy the existing template and JavaScript and modify them to suite your needs. As an example, you could modify this code: https://github.com/rhythmagency/formulate/blob/08eef0bbee2a54a3923a204bf8b11c30caa4b4b8/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/field.js#L60

var el = angular.element('<input type="text" />');

You could modify that if you wanted to add a custom class or something of that sort:

var el = angular.element('<input class="my-custom-class" type="text" />');

It sort of uses Bootstrap classes, but none of the form group or form control classes that make Bootstrap so pretty. I really don't find this approach to templating very intuitive or useful.

A coworker of mine actually built the Angular portion of the template, and his idea was that we could create Formulate-specific classes that could be extended with Bootstrap using Sass. Here's what that looks like for one of our sites (this is in a .scss files):

.formulate {
    &__btn {
        @extend .btn;

        &--submit {
            @extend .btn--outline-white;
        }
    }

    &__control {
        @extend .form__control;
    }

    &__group {
        @extend .form__group;

        &--select {
            @extend .form__group--select;
        }
    }

    &__error-msg {
        @extend .form__error-msg;
    }

    &__checkbox {
        .formulate__control {
            display: inline-block;
            width: auto;
            margin: 0 10px 0 0;
            box-shadow: none;
        }

        label,
        span {
            @extend .font__gotham-book;
        }
    }
}

I'm thinking this is more advanced than most developers who I expect to use Formulate will be comfortable with, so I agree with you on this one. I will look into swapping out these Formulate-specific classes with the Bootstrap-centric classes. In the meantime, if you would like to do this yourself, it is as simple as modifying the JavaScript. Here's an example: https://github.com/rhythmagency/formulate/blob/08eef0bbee2a54a3923a204bf8b11c30caa4b4b8/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/field.js#L43

el.addClass('formulate__control');

You could change that to:

el.addClass('form-control');

The nice thing about "this approach to templating" is that if you don't like it you can easily swap out the template with your own modified version. And you can do it in a way that will ensure your version of the template does not get overwritten when you upgrade Formulate in the future.

It may not seem very intuitive right now because my guess is you haven't seen this sort of thing before. I will be working on documentation to help explain this a little better so that others like yourself who don't find this intuitive will have a reference to dig deeper.

Thanks for the feedback and let me know if you have any further thoughts.

Not sure I'm going to enjoy modifying templates using Javascript... Seems counter to how everything else is done in Umbraco. But on a different point, I can't see how to add a label column to the form layout. I'd rather not simply rely on placeholder text as the form field label. I take it that also requires modification of Javascript?

Not sure I'm going to enjoy modifying templates using Javascript... Seems counter to how everything else is done in Umbraco.

The Umbraco back office is actually built primarily in AngularJS. If you're anything like me, you'll learn to love it. But if not, Formulate is open source and I would love a pull request for a C#/Razor form rendering template :-)

I can't see how to add a label column to the form layout. I'd rather not simply rely on placeholder text as the form field label.

Not quite sure what you mean. Do you mean that you want to add a label above each field in addition to having the placeholder text for each field?

If so, yes, you'd make that modification with JavaScript. You could display the text as a label in addition to or rather than the placeholder. Right now, you basically have two bits of text info you can display as the label:

Currently, the Field Label is displayed as a placeholder. You could display that as an actual <label>, or you could use the field name and display that as the label.

If you are willing to wait a bit, you could also submit an issue and I'll eventually add a Field Placeholder to the Formulate form designer so you have both label and placeholder to display (e.g., in case they need to be different). You can submit issues here: https://github.com/rhythmagency/formulate/issues/new

Take a look at this commit: https://github.com/rhythmagency/formulate/commit/809d7b6f504929d294e5f852b4e9e3458fce93cc

It adds the Bootstrap styles you mentioned and field labels, which looks like this:

Just a few small JavaScript changes (and one CSHTML change) that took about 45 minutes to make :-)

is working on a reply...