formulate and bootstrap layout - Formulate Questions

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

DonZalmrol 220 posts 833 karma points

Nov 28, 2021 @ 14:08

0

Formulate and bootstrap layout?

Hi, new to Formulate (Free version) and I'm trying to find how you can design the layout to work with bootstrap forms.

I figured out that you can manipulate the CSS, but is it to possible to directly set it to match with the existing Bootstrap CCS?

e.g. my current contact page (not using Formulate):

New contact form using formulate:

Copy Link
Nicholas Westby 2054 posts 7103 karma points c-trib

Nov 28, 2021 @ 18:40
0
The easiest way is probably to do it with CSS.

Formulate Pro also comes with a theme you can use that is built with Sass so you can easily tinker with changing things like colors (the downside is that it's not free, though it is very cheap): https://www.formulate.rocks/pro/basic-theme

A third option would be to tinker with the plain JavaScript template to set the markup appropriately. Here are some places you might consider doing that:
That approach has the downside that integrating your changes with future Formulate upgrades would be problematic.

A fourth approach would be to completely render a custom template in Razer. Here are some files you can use for inspiration if you take that approach:
- https://github.com/rhythmagency/formulate/blob/3891d3725c3cc33232309b99a60a41d15dcffd7b/src/Website/Views/Partials/Formulate/Responsive.Plain%20JavaScript.cshtml
- https://github.com/rhythmagency/formulate/blob/3891d3725c3cc33232309b99a60a41d15dcffd7b/src/Website/App_Plugins/formulate/FormulateConfiguration.json#L8-L12
That approach would be more work (e.g., rendering all the fields, adding support for validation, etc.), but if you're a fan of Razor it may be the way to go.

A fifth approach would be to run some JavaScript on page load after the Formulate JavaScript has rendered the form. This second pass JavaScript would reorganize the DOM elements to more closely match what Bootstrap looks like.

My recommendation would be to use CSS to achieve the Bootstrap look you're after. This page has some tips on styling forms (e.g., the grid): https://www.formulate.rocks/plain-javascript/styles
Copy Link
Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Nov 29, 2021 @ 12:07

0

Nicholas's 'fifth approach' is fairly simple and works very well, I used it for my contact form layouts

Copy Link
DonZalmrol 220 posts 833 karma points

Nov 29, 2021 @ 12:10

0

Thanks @Nicholas, I'll check it out!

@Huw would you mind sharing an example to help me get started?

Copy Link

Huw Reddick 1929 posts 6697 karma points MVP 2x c-trib

Nov 29, 2021 @ 12:24

for mine, I just did this

    setTimeout(function () {
    $('.formulate__row').addClass('row');
    $('.formulate__cell--5-columns').addClass('col-sm-6');
    $('.formulate__cell--6-columns').addClass('col-sm-6');
    $('.formulate__cell--12-columns').addClass('col-sm-12');
    $('.formulate__field__label').addClass('col-xs-10');
    $(".formulate-wrapper :input[type=text]").addClass('form-control');
    $(".formulate-wrapper textarea").addClass('form-control');
    $(".formulate-wrapper select").addClass('form-control');
    $(".formulate-wrapper button").addClass('btn btn-primary btn-pill');
    $('.formulate__field--header').addClass("h4 mb-4");
}, 50);

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Formulate and bootstrap layout?