New to the community? Start here

[Forminator Pro] Form styling templates

0

I chose Forminator Pro for this thread’s product, but the same suggestion applies to Hustle Pro as well.

If you’ll allow me to be blunt for a moment, the styling that Forminator Forms and Hustle pop-ups produces out of the box are ugly. Zero styling, zero aesthetic, just…. nothing.

I understand you give the option to add styling and modify the appearance, and when it comes to Hustle Pro pop-ups you even make it easy by adding one-click classes to make it easy to apply styling. But the problem is you’re putting all the design work into [potentially] non-technical people’s hands. You’re expecting everyone who uses your plugins to know how to style a form with CSS, otherwise they’re left with a form that looks.. well.. awful.

Why not build up a couple of canned looks/themes and bundle them into the appearance screen? wpmudev has awesome UI/UX standards, why not at the very least default to your own theming? Ask us members to share our designs and have them integrated into the plugin like some sort of “pre-built theme marketplace”?

Anything is better than the complete absence of good looks these forms come with out of the box.

I’m sorry if I hurt any feelings with my direct approach, I’m just frustrated that these awesome plugins with amazing functionality (seriously what other plugin gives you form usage stats out of the box?) produce such sub-par looking forms that I have to massage and build from the ground up every time.

Sun, 19 Apr 2020 17:56:30
More Forminator Pro discussions
Forminator Pro
  • Jamison
    • WPMU top fan!

    I think the coding process that would be required for something like this would be extensive, but imagine being able to build a contact form while you’re looking at the results live, (not through an update button like it is on most form-building software), and most, if not all (if possible) of the settings would be sliders.
    Examples: with the slider, you can adjust the size of the title text on the form when you move the slider from the left to right: 0px – 150px. Also, this can be done with the colors: border color, form color, title text color, color to the text below the title, text shadow color, color and opacity to the placeholder text, and so on.

    Perhaps an option to have your own background to the form, too (without it requiring extensive CSS work); you’d be allowed to upload an image. You can make concrete-looking images in Photoshop that would look really good for a form background. (I thought about doing this, but again, I don’t want to deal with the CSS that would be required.)

    Blessings,
    JL

    • Phil
      • Look Up

      James Leesley great feedback! That sounds like the kind of thing theme developers should be throwing in to their multipurpose premium themes!

      In terms of your second point about adding a background to a form and that being more CSS than you’re looking to code up, the funny thing is there’s a one-line solution to your request – making it incredibly easy to do :stuck_out_tongue: My major complaint is having to format the form container, labels, placeholder, input fields (text, select, textarea, etc.), buttons, error spans, columns/grids, etc.

  • Jamison
    • WPMU top fan!

    Thanks.
    What’s the “one-line solution?”
    I used another premium form builder before Forminator Pro, and on each form you had 46 different background setting areas. It was awful! Hence the reason I got rid of the plugin. With that said, Forminator is MUCH easier to work with. It can be tedious, I know – it took me a few hours just to make one form.

  • Phil
    • Look Up

    James Leesley I don’t want to dilute the thread too much as I want the staff to see my point, but assuming your form is contained within a single container, you would merely need to add a background-image css tag to that one container and it would cover the entire form. If you provide a link, I could look at giving you an example.

    Take a look at my [ugly af] contact form on my website for example: click me. That’s a Forminator Pro form I didn’t take the time to decorate, but I did make the whole background blue (see attached file).

    Then, you can go to the page itself and inspect the element, and what you’ll find is this:

    .forminator-custom-form-960 {
    border-color: rgba(0,0,0,0);
    background-color: #00a2e8;
}

    From then, all you’d need to do is add custom CSS in your theme/wordpress settings to the effect of:

    .forminator-custom-form-960 {
    background-image: url("https://address.tld/url/to/concrete/pattern.jpg");
}

    By default background-repeat is set to repeat both x and y axis, but in case it does not repeat, add this line to it as well:

    background-repeat: repeat;

    • Jamison
      • WPMU top fan!

      Thank you for all of that information, I’ll try it. : )! The thought had crossed my mind that I might have to just add a bg CSS, but I’m dealing with issues on another form at the same time and I didn’t want to dive into another if bg CSS wasn’t going to work.
      As for the contact form on your website, I recommend you do a search online for “neat contact forms,” “cool contact forms,” “fancy contact forms,” and such, and then build (copy) what you see. That’s what I did with the contact form on this page ↗, taken from the contact form on the top of the page on this website ↗. I can send you all of the settings to the form if you want to use it.

      Thanks again!
      JL

  • Patrick Freitas
    • FLS

    Hi Phil

    Hope you are doing well.

    Thank you for the feedback.

    We try to make the plugin easier as possible for the users, create grids on the form and there are different options to select colours, fonts, border-radius or spacing.

    [attachments are only viewable by logged-in members]

    [attachments are only viewable by logged-in members]

    On most of the time, we can also select the style none that will inherit styles from the theme which automatically makes the look great if user uses a nice theme.

    However, I believe there are a lot of space to improve on the form styles, I’ll pass this request to our developers for Hustle and Forminator for further discussion.

    Best Regards
    Patrick Freitas

    • Phil
      • Look Up

      Patrick Freitas I’m not arguing that you don’t make it easy to customize, that part is true: all the component parts have an easy to use option – that part is great for customizing! The problem is that I have to do it all manually for the forms to look good. I can’t just put a form up and have it look great right out of the box, or with a single click.

      Sort of what Forminator Pro offers with the “Design Style” section, it’d be nice if there was pre-built themes with colouring, padding, borders, etc.

  • Phil
    • Look Up

    Here is custom CSS I put together for a newsletter signup form on a site I built recently. Attached is a before/after showing the improvements the CSS makes. The embed settings are Layout: Compact; Vanilla Theme: Enabled.

    .hustle-layout .hustle-layout-body .hustle-layout-form .hustle-input {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0em;
    border-width: 0px;
    border-radius: 0.3em;
    background-color: #ffffff;
    color: #25282b;
    box-shadow: 0px 0px 0px 1px #d2d7d9 inset;
    margin: 5px 0px;
}

.hustle-layout .hustle-layout-body .hustle-layout-form .hustle-button-submit {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0em;
    border-radius: 0.3em;
    padding: 0.9em 2.2em;
    box-shadow: 0 0.15em 0.3em rgba(0,0,0,0.2);
    background: #ff2222;
    border-color: transparent;
    color: #ffffff !important;
    margin: 10px 0px;
    height: auto;
}

.hustle-error-message {
    margin: 0;
    padding: 0;
}
  • Danae
    • Dev

    Hey Phil ,

    We’re introducing templates in Hustle 4.3.0, which is our next release and is currently in our test center. They should help as a starting point for when creating a module, and you’ll still have granular control over each element’s appearance.

    Please give a try and let us know how it goes! Just keep in mind it’s a beta, so it shouldn’t be tested in production sites.

    Wishing you a great day!

  • Jeroen
    • Site Builder, Child of Zeus

    I agree with the OP. The default forms should be cleaner.

    Some suggestions:
    – Dark / light form option
    – Rounded corners option
    – Labels inside or outside inputfields option
    – Submit button: left/right/fullwidth
    – AND some better out of the box templates :slight_smile:

  • MSBC
    • New Recruit

    Hi Patrick Freitas

    Sorry for digging out this old thing, but apparently, not too much has changed in the past 3 years on Forminator side in this direction. It would really be helpful if you would just allow us to export/import the appearance presets (or even manage them via the hub as part of the config). Just a simple JSON dump of the preset data that you store anyway somewhere would allow us to
    a) re-use the same style across multiple sites without copying entire forms (which is not helpful if you need a different form but want to keep the style) and make sure new forms are consistent with CI and
    b) share such styles with other users – for example in a thread here – or have them provided out of the box by you if you consider them good enough.

    And the effort to implement such a feature should, in my humble opinion, be quite limited.

    BR
    Michael

  • Zafer Oz
    • Ex Staff

    Hi Schilde Media ,

    I hope you are doing well and thanks for the suggestion.

    I assume you are already aware of Presets Manager and ability to create/edit/apply Appearance Presets within the forms on the same site.
    https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#appearance-presets
    https://wpmudev.com/blog/global-appearance-presets-forminator/

    Importing/exporting appearance presets to be used on different sites was a feature requested before. I will check with our Forminator team and inform you accordingly.

    Kind regards,
    Zafer

  • Zafer Oz
    • Ex Staff

    Hi again Schilde Media ,

    Our Forminator team has suggested the following workaround at the moment;
    1-Export the whole form from site 1.
    2-Import this form to site 2.
    3-Create a new preset based on the new imported form using the Presets Manager.

    Additionally they are working on developing and implementing Form Templates addon for Forminator Pro, introducing a collection of 20 new form templates which we hope can also help you for the similar process.

    Kind regards,
    Zafer