custom template

Colin Wright 5 posts 85 karma points

May 10, 2017 @ 10:49

Formulate Questions

Umbraco 7

Hi,

Was looking for information to use my own custom template, I am using skel layout and have been struggling modifiying the angular js to suit, seen another post about it.

Is it possible for me just to hard code a layout separately, its a pretty basic one, but implements existing classes. The form I have is as follows

<form action="#" method="post">
                            <div class="field half">
                                <input name="name" id="name" placeholder="Name" type="text" />
                            </div>
                            <div class="field half">
                                <input name="email" id="email" placeholder="Email" type="email" />
                            </div>
                            <div class="field">
                                <textarea name="message" id="message" rows="8" placeholder="Message"></textarea>
                            </div>
                            <ul class="actions">
                                <li><input value="Send Message" class="button next" type="submit" /></li>
                            </ul>
                        </form>

Many Thanks

Copy Link

Nicholas Westby 2054 posts 7100 karma points c-trib

May 10, 2017 @ 19:47

Yep, Formulate has the ability to create custom CSHTML files to use as custom layouts. You just create the CSHTML file, add it to the templates.config file (making sure to assign a unique GUID and name), then in your form configuration (created as a node under your Formulate form in the back office) select that template in the drop down of templates.

You'll have to implement the AJAX submission functionality if you aren't making use of the AngularJS code. Here's how the AngularJS code does the submit: https://github.com/rhythmagency/formulate/blob/a037d0167f32ef327219208dae97d4f81e124800/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/responsiveForm.js#L15

If you were to use, say, jQuery, your code would be a little different, as AngularJS is managing the data in an in-memory object rather than directly in the DOM. It wouldn't be too different though; essentially, the "name" of each field should be the field ID (a GUID), and the value is typically just a string that is the field value. There are a couple extra "payload" fields sent with each request too (e.g., to track the Umbraco content node ID of the page the form was rendered on).

If you inspect the AJAX request of an existing AngularJS Formulate form, it should become clear exactly how the fields are sent to the server.

Let me know if you're interested in simply modifying the AngularJS code to render something closer to the Skel markup and I can make recommendations around that as well.

Copy Link

Colin Wright 5 posts 85 karma points

May 11, 2017 @ 07:28

Hi Nicholas,

Thanks for getting in touch, I will give the custom template a try but if you would be so kind to recommend modifying the existing to cater for skel that would be fantastic.

The skel markup would look like the following

<form action="#" method="post">
<div class="row">
        <div class="6u 12u">
            <input name="name" id="name" placeholder="Name" type="text" />
         </div>
        <<div class="6u 12u">
            <input name="email" id="email" placeholder="Email" type="email" />
        </div>
</div>

<div class="row">
    <div class="12u 12u">
        <textarea name="message" id="message" rows="8" placeholder="Message"></textarea>
    </div>
</div>
<div class="row">
    <div class="12u 12u">
         <ul class="actions">
            <li><input value="Send Message" class="button next" type="submit" /></li>
         </ul>
    </div>
</div>

Copy Link

Nicholas Westby 2054 posts 7100 karma points c-trib

May 11, 2017 @ 15:37

Just curious, is this really what you'd expect the Skel CSS class to be:

<div class="6u 12u">

Seems strange to me that it has both "6u" and "12u". I'd expect one or the other, but not both. Maybe there is some reason for it (I don't know Skel), but I wanted to confirm that before I respond.

Copy Link

Colin Wright 5 posts 85 karma points

May 11, 2017 @ 18:03

Hi Nicholas.

I think it should actually be 6u 12u(smaller) the second unit is a modifier for different screen resolution. It doesn't have to be there and can be just 6u on its own.

Copy Link

Nicholas Westby 2054 posts 7100 karma points c-trib

May 11, 2017 @ 21:50

In that case, should be relatively simple. For one, you'll want to change this line: https://github.com/rhythmagency/formulate/blob/a037d0167f32ef327219208dae97d4f81e124800/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/directives/form/rows.js#L12

Rather than this:

return 'col-md-' + (cell.columns || '12');

You'll want to do this:

return (cell.columns || '12') + 'u';

Note that this JavaScript file gets combined with others and should exist on your install at ~/App_Plugins/formulate/responsive.bootstrap.angular.js.

Looks like the markup generated for buttons needs some tweaking too. To do that, you simply tell Formulate to render buttons differently, which you can see how to do here: http://www.formulate.rocks/articles/custom-field-types

FYI, that page shows how to create an entirely new field type, which you don't need to do. Just focus on the bit that explains how to render your field (you can override Formulate's built in field rendering to render a field in your own way). Here's the main JavaScript you'll want to focus on:

// This function renders the "hello" field.
function helloFieldRenderer(field, options) {
    var combinedJson = {
        field: field,
        options: options
    };
    var fieldData = JSON.stringify(combinedJson, null, 2);
    var encodedFieldData = document.createElement("span")
        .appendChild(document.createTextNode(fieldData))
        .parentNode.innerHTML;
    return "<div>Hello, here's the field data:</div>" +
        "<pre>" +
            encodedFieldData +
        "</pre>";
}
// The options used when rendering the "hello" field.
var helloFieldOptions = {
    // If true, a label will be included before the field.
    optionalLabel: true
};
// This is what registers the field renderer.
app.config(function (FormulateFieldTypesProvider) {
    FormulateFieldTypesProvider.register("text", helloFieldRenderer, helloFieldOptions);
});

You'll have to make a function that essentially renders this (making sure to connect it to AngularJS with ng-submit):

<ul class="actions">
    <li><input value="Send Message" class="button next" type="submit" /></li>
</ul>

You can refer to the built-in rendering function for the button field and modify according to your needs: https://github.com/rhythmagency/formulate/blob/a037d0167f32ef327219208dae97d4f81e124800/src/formulate.app/JavaScript/FormTemplates/responsive.bootstrap.angular/builtin-types.js#L186

Copy Link

is working on a reply...

Flag this post as spam?

Custom Template