New to the community? Start here

[Forminator Pro] Custom class for buttons.

1

I like Forminator’s style presets and I’m usually fine with picking one and just setting the colors, with the exception of one element that I always want to match the rest of the theme — buttons. It’s always a huge hassle to overwrite Forminator’s styles and I always end up finding no other option than to !important the heck out of my button styles and then apply my main button class to the Forminator buttons with Javascript.

It would be *very* helpful if buttons had a “custom class” option, so we could simply put in our button class and Forminator would remove its default button class so we don’t have to overwrite the long list of default styles. I tried removing the classes myself with Javascript but then the buttons didn’t work, so apparently they have some functionality attached as well. If the styles could be moved to their own class, then there could be an option to simply swap it with a custom class.

Wed, 11 Oct 2023 18:16:40
More Forminator Pro discussions
Forminator Pro
  • Patrick Freitas
    • FLS

    Hi Greg

    I hope you are doing well.

    Thank you for the feedback and suggestion, the Submit button has the custom class option, but it is indeed missing for pagination buttons.

    I’ve pinged our developers to verify if we have any hook for all the buttons, I did find a filter for the submit button but couldn’t see one for pagination.

    About the script, you are correct, some JS depends on the forminator-button, and removing it could break some functionalities.

    We will keep you posted.
    Best Regards
    Patrick Freitas

    • Greg
      • The Crimson Coder

      Hi Patrick Freitas thanks for the reply. Sorry, I should have clarified better — I do have a custom class in the field options, and it adds the custom class, but the default one is still also applied and the default styles are so deep that they take precedence. So even if I add a custom class, nothing on it works because the default styles override it, so I still have to use !important on everything and add a bunch of extra “unset” values for things that the default styles use but my button styles don’t.

      What I meant was that I would like to remove the default class from the buttons entirely and replace it with the custom class. At the moment, it doesn’t look like I can do that with JS because the default class governs some functionality. Not sure what the ideal fix would be but if the styles and functionality could use different classes in the core, then there could be an option to remove the styling class and allow the custom class to take over.

  • Adam
    • Support Gorilla

    Hi Greg

    Thank you for response and explanation!

    I think it’s a fair point and something that we may have to look into it – though it may require quite a lot of changes in the plugin in future.

    But I’d also like to ask if you tried slightly different solution, that is setting form’s “Design Style” in “Appearance” settings to “None” instead of any other pre-defined style?

    The “None” setting would, essentially, remove all those visually-relevant styles (despite classes still being there) so it should make it easier to style it with your own CSS. The downside is that there may be a need to style way more elements of the form then. But if you are after your own styling anyway – it may be a way to go.

    Have you tried that already or that’s still not enough or opposite – too “raw”)?

    Best regards,
    Adam

    • Greg
      • The Crimson Coder

      Hey there, Adam Czajczyk – yes, as you brought up it’s more raw than I was hoping for. Usually Forminator forms are the only inputs I have on the entire website, and the style presets usually work great with just the colors customized (it’d be nice if CSS variables could be used in the colors for dark/light theming purposes, but that’s another topic :wink:). But buttons are used in many other contexts, so I style them for the theme. If there could be some kind of “Remove default button styles” option in the settings then I could just add my button class to the submit button as is already possible and be done with it, but I think using the “None” option and styling the entire form would be more work than my current method of trying to override the button styles with hacky workarounds.

      I don’t know if this would actually work as I haven’t tested it, but the newish pseudo-class :where() always has 0 specificity, so instead of the current default selector that looks like this with the Material Design preset, for example, and which overrides a less-specific selector like “.button-main”:

      .et-db #et-boc .et_pb_module .forminator-ui.forminator-custom-form[data-design=material] .forminator-button,
.forminator-ui.forminator-custom-form[data-design=material] .forminator-button {}

      Perhaps simply wrapping it in :where() would let the custom class override it without having to change anything:

      :where(.et-db #et-boc .et_pb_module .forminator-ui.forminator-custom-form[data-design=material] .forminator-button),
:where(.forminator-ui.forminator-custom-form[data-design=material] .forminator-button) {}

      And then just use the current as a fallback for older browsers. The only issue with this is that if someone wanted to support an older browser they’d still need to override, but considering that :where() is at over 92% support now, perhaps that wouldn’t be much of a concern.

      Another level to this is that if my “button-main” class (or whatever) is styled in a page builder, !important isn’t an option, so that makes things even more complicated.

      In any case, hopefully there’s a solution somewhere.

  • Patrick Freitas
    • FLS

    Hi Greg

    Thank you for the explanation,

    “Remove default button styles”

    This sounds like a good idea, I updated the feature request to our developers and shared this option with them, we could just extend the “Appearance” to a new section:

    “Buttons Appearance”
    [Forminator] | [None]

    And still have the default classes without breaking things.

    About the selectors, I have been using :where() for some time already and it works well, the correct flow is to simplify the selectors, so for example:

    .et-db #et-boc .et_pb_module .forminator-ui.forminator-custom-form[data-design=material] .forminator-button,
.forminator-ui.forminator-custom-form[data-design=material] .forminator-button {}

    To:

    .forminator-button:where(.et-db #et-boc .et_pb_module) {}

    But as Adam said, it requires deeper changes in the plugin, we need to make it more compatible as possible with page builders, and some CSS may take longer to be switched to a newer selector.

    Best Regards
    Patrick Freitas