Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Robert J. Bullock 386 posts 405 karma points
    May 06, 2016 @ 17:14
    Robert J. Bullock
    0

    How to modify layout?

    Not sure what I'm missing... Back end looks great and I can get the form to render, but how do I modify the layout? I checked out the "renderForm.cshtml" partial, but there's nothing in there.

  • Robert J. Bullock 386 posts 405 karma points
    May 06, 2016 @ 17:20
    Robert J. Bullock
    0

    Because frankly, the default layout is not too good.

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    May 06, 2016 @ 18:07
    Nicholas Westby
    0

    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

    Layout

    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:

    Simple Form

    Form with Columns

    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.

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    May 06, 2016 @ 18:24
    Nicholas Westby
    0

    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

  • Robert J. Bullock 386 posts 405 karma points
    May 06, 2016 @ 19:58
    Robert J. Bullock
    0

    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 Westby 2045 posts 7032 karma points c-trib
    May 06, 2016 @ 20:24
    Nicholas Westby
    0

    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.

  • Robert J. Bullock 386 posts 405 karma points
    May 09, 2016 @ 15:31
    Robert J. Bullock
    0

    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?

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    May 09, 2016 @ 15:50
    Nicholas Westby
    0

    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:

    Example Field

    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

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    May 10, 2016 @ 05:01
    Nicholas Westby
    0

    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:

    Form

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

  • Nicholas Westby 2045 posts 7032 karma points c-trib
    Jul 05, 2016 @ 22:40
Please Sign in or register to post replies

Write your reply to:

Draft