Copied to clipboard

Flag this post as spam?

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

  • Michael Beever 74 posts 155 karma points
    Dec 10, 2020 @ 11:04
    Michael Beever

    Couple of Questions 1. CSS styling 2. Sending Emails


    New to Formulate seems like a brilliant piece of software but having a few minor struggles.

    1. CSS styling - I am trying to fit the form to look like the rest of my website. I have had a look on codepen but don't get it. I was hoping to be able to use the bootstrap styling.

      1. Sending Emails - does this rely on local smtp settings or do I need to setup this somewhere else? I don't have access to the config file so might have issues.

    Any advice is appreciated.

  • Huw Reddick 1858 posts 6380 karma points MVP 2x c-trib
    Dec 10, 2020 @ 14:52
    Huw Reddick

    Hi, I am not the expert, so you may get a better answer from the author, but here goes.

    CSS. I have a piec of javascript in my page template that adds classes to the formulate objects

    setTimeout(function () {
        $(".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-green');
    }, 50);

    That works well for me.

    For the email, I believe it uses the smtp settings in the web.config as umbraco itself does. This option was no good for me either, but there is a very simple inbuilt handler that you can hijack to do whatever you want with the results which would include custom mail sending etc.

    I used the 'send' handler and just passed it to a local surface controller method which process the form data.

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Dec 10, 2020 @ 16:07
    Nicholas Westby

    Thanks for replying, Huw. Good ideas.

    One thing I would recommend rather than using the Send Data handler to send the data to a controller would be to create your own custom form submission handler. No need to create a Rube Goldberg machine when a mechanism already exists to do it more directly.

    To do that, you'd implement the IFormHandlerType interface, as shown here:

    I don't even think you really need to create an AngularJS directive.

    Note: I don't recommend a custom form submission handler as a solution to the original question, but it's a workable option if need be.

    BTW, one more option for utilizing the Bootstrap styles would be to use Formulate selectors in combination with the Bootstrap Sass (i.e., so the Formulate elements inherit the Bootstrap styles). The JavaScript approach you've gone with may work as well, but it may not work all that well for elements that are more dynamic (e.g., the validation errors that get added and removed from the DOM based on user input).

  • Huw Reddick 1858 posts 6380 karma points MVP 2x c-trib
    Dec 10, 2020 @ 20:34
    Huw Reddick

    Thanks for reminding me, I hijacked the send data as a quick hack so I could demo to the client, have now implemented a proper custom handler, it was much easier than I expected.

  • Michael Beever 74 posts 155 karma points
    Dec 10, 2020 @ 15:01
    Michael Beever

    The CSS has done something so will keep playing.

    Thank you for your help

  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Dec 10, 2020 @ 15:38
    Nicholas Westby

    I'm working on some sample styles in Formulate Pro, which currently looks like this (still a work in progress):

    Styled Formulate Form

    Once you pay for Formulate Pro, you can refer to the Sass styles and modify according to your needs. I built it with accessibility in mind, so the placeholders float up to become labels when the field is focused or contains text.

    Regarding sending emails, you don't have access to the web.config? That is where you configure SMTP. Note that you don't need an SMTP server locally for this to work. I tend to use Amazon SES for this. You can also use Mailtrap for testing purposes:

    If you really needed to, you could write some code to modify the web.config (Formulate does this, at least the one for Umbraco 7 does before we moved to a JSON config file).

    You could also use this package or a similar one to modify the web.config from the back office:

Please Sign in or register to post replies

Write your reply to: