Unable to decrease height of input and textarea fields

  • Resolved dmikra

    (@dmikra)


    10 months, 2 weeks ago

    Hello! My Forminator form is at https://xn--substanzuntersttzte-therapie-g7c.de/en/contact/

    I’m having the following issue: the input fields and the textarea fields are just too high. I want them to be more compact, like on this page: https://www.manuel-aicher.com/kontakt.html.

    However, it seems that no matter what I do I am unable to achieve that.

    I have already set spacing for the “compact” setting.

    I have added the following CSS

    .forminator-input { min-height:20px; height:20px; }

    .forminator-textarea { min-height:40px; height:40px; }.

    The only way I was able to decrease the height of fields is to set custom spacing of 10px, but then I get a different issue: there is not enough spacing between fields and everything becomes clumped together sitting on top of each other without the necessary gaps.

    Can you help?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    10 months, 2 weeks ago

    Hello @dmikra

    Hope you are doing well today.

    If you want to make the input fields smaller best solution is to use a different style for the entire form, as the flat style is higher than others.

    But you can target the fields like this:

    .forminator-field input
.forminator-field textarea

    Best Regards
    Amin

    Thread Starter dmikra

    (@dmikra)

    10 months, 2 weeks ago

    Hello Amin! Thank you for your response. Working with a different style won’t work for us as we want specifically this style and it was why we chose to go with Forminator cause you offer that style. I didn’t quite understand what you said about targeting fields. Did you mean that instead of the CSS “.forminator-input” I should use “.forminator-field input”?

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    10 months, 1 week ago

    Hello @dmikra

    Did you mean that instead of the CSS “.forminator-input” I should use “.forminator-field input”?

    Exactly, you should use the forminator-field input to target the input fields, a simple way to find the working class is to use the browser inspector to check the fields’ HTML code, just right-click on the element and select inspect.

    Best Regards
    Amin

    Thread Starter dmikra

    (@dmikra)

    10 months, 1 week ago

    I’m afraid I don’t understand. Does it mean that I have to find out the working class for EACH of the numerious fields of a form, and then write css for EACH field? I’m having 4 forms, and each forms has numerous fields, so if it all had to be done individually, i’d have to target around 100 fields. Did i misunderstand?

    • This reply was modified 10 months, 1 week ago by dmikra.
    Plugin Support Imran – WPMU DEV Support

    (@wpmudev-support9)

    10 months, 1 week ago

    Hello @dmikra,

    I hope things are going well for you.

    My colleague was referring a custom CSS suggestion, which can help to work on all the forms. We can only provide a custom CSS class, but providing a custom CSS code is out of support scope.

    If you’re familiar with CSS, you can use the above-mentioned classes to adjust the space between fields in all forms using those two CSS classes. You can learn more from this blog: https://wpmudev.com/blog/custom-css-wordpress/

    Moving to the second approach, Forminator offers a few options to adjust the space between each field, so kindly check this guide: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#form-container.

    To apply this, navigate to Form > Edit > Appearance > Scroll down to the “Spacing” section and try any of the options to see if it matches your requirement.

    Let’s give it a try once; if it works, you can apply it to other forms too.

    –
    Kind Regards,
    Imran Khan

    Plugin Support Nebu John – WPMU DEV Support

    (@wpmudevsupport14)

    10 months ago

    Hi @dmikra,

    We haven’t heard from you in a while. We’ll go and mark this thread as resolved. If you have any additional questions or require further help, please let us know. We are here to help.

    Best Regards,
    Nebu John

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Unable to decrease height of input and textarea fields’ is closed to new replies.