Some issues with Forminator Form

Hi @dceditore,

I had a look at your form and regarding #1 and #2 there is some weird behavior with the form width and height, however, I’m not sure if this is something that is specific to your site only.
Could you provide us with an export of your form so we could check your setup further on our end?
From Forminator > Forms page click on Gear icon next to your form and you can get the export from there.
Upload it to any file sharing service like GDrive or Dropbox and share the download link here so we can check it out further.

3. Any Error message I edited for single fields work properly, except the e-Mail field where the error message shown is the english and standard one.

Are you referring to email field on 2nd page of your form?
I’m afraid that I can’t replicate this as this is how it looks to me: https://i.imgur.com/jIYI65z.png
Or am I missing something here and checking a wrong field?

4. At the end, where I included PayPal, Back button which is shown ‘below’ any field anywhere, here is on the ‘left’ of the Paypal form. it looks messy and reduces space for Paypal.

This should be fairly easy to change with some CSS, but can you tell us a bit more about how you would like it look?
Have the PayPal buttons on the right but smaller, have it above or below Back button?

Cheers,
Predrag

Hi Predrag,
thank you for your reply.

Here is the public download link for issues #1 and #2: https://docs.google.com/document/d/1mNWsH0WPnr-H_9xWDGWNnU4B9B7aZtOUdH3Hf3sCYEE/edit?usp=sharing

Issue #3 seems fine now;

Please have a look at this: https://drive.google.com/file/d/1yE1vgI4E6vRieKdYnnxXcLuId-kZ9oiM/view?usp=sharing
explaining issue #4. Back-button is below the Form in page 1, 2 and 3, but when it’s about Paypal component on page 4, it stays on the left of Paypal. From mobile, it occupies 50% of the available space and remaining 50% is too narrow…

Thank you so much for your attention and suggesitons.

Regards

Uh, no any suggestion? : (

Help me with issue #4 at least, ‘Back button’ gives problem if doesn’t go below the PayPal module.

Tks

[Moderator note: Please, No bumping].

• This reply was modified 3 years, 3 months ago by Steven Stern (sterndata).

Hi @dceditore

Keep in mind that fee support doesn’t follow the 24 timeframe reply as Pro users.

Once that said.

1. Even adding custom CSS to my theme (I found it somewhere in this Forum answering my same question), width of the Form doesn’t change. If you start typing on first field, for example, you’ll see last character of any line is missing because falling out of the template;

Can you try this CSS?

#forminator-module-42490 .forminator-textarea{
    width: -webkit-fill-available !important;
}

However, I tried to replicate and it looks like the issue is related to a local problem using the default WordPress theme it works without any custom CSS:

https://monosnap.com/file/cCPVZBY9s3YrSjKyvddnL3wzOXX3Lx

https://monosnap.com/file/hgdNUyLdhLqcNzQ1MQI3VRmtSZEV5Z

You can add the CSS in WordPress > Appearance > Customise > Additional CSS or Forminator > Appearance > Custom CSS.

2. Even changing the standard value from 140 px setting to 50 px for Minimun height of the text area field, it doesn’t change. Here people can input 35 words and less than half original minimum height should be enought.

Could you let us know which input you are referring?

the Min height is the height size for that element, if you are looking to limit it maybe you are looking to max height?

4. At the end, where I included PayPal, Back button which is shown ‘below’ any field anywhere, here is on the ‘left’ of the Paypal form. it looks messy and reduces space for Paypal.

Can you try this CSS?

@media only screen and (max-width: 768px) {
 .forminator-pagination-footer{
    flex-direction: column;
 }
}

Add to Forminator > Form > Appearance > Custom CSS.

Let us know the result you got.
Best Regards
Patrick Freitas

Hi, thank you for your help.

Also issue #3 is fine now, back button doesn’t limit anymore space for PayPal module on mobile devices.

Issues #1 (general width of form) and #2 (limit height of 2nd text-area field) seems depend by my template but I try again, maybe some new suggestion sparks…

#1 As you can see in the screenshot, last digit disappears because form width is (a little bit) wider than space in template;

#2 As you can see in the same screenshot, second text area height cannot be reduced more than 140 px and it’s much more space than 35 words need (my limited amount of words). I set 50 px height but height never changes…

Are not big issues but if we can fix, better.

Screenshot: https://drive.google.com/file/d/19A-QvSPmj0XHnot_J4OSUCxmQ-yBjUPU/view?usp=sharing

Thank you again,

Diego

Hi @dceditore

#1 As you can see in the screenshot, last digit disappears because form width is (a little bit) wider than space in template;

Had you tested my CSS?

I imported the form to a local site and didn’t have any issue, it looks like some custom CSS or theme CSS conflict.

But using the shared CSS prevented: https://monosnap.com/file/hgdNUyLdhLqcNzQ1MQI3VRmtSZEV5Z

In case it persists after adding CSS let us know.

#2 As you can see in the same screenshot, second text area height cannot be reduced more than 140 px and it’s much more space than 35 words need (my limited amount of words). I set 50 px height but height never changes…

I can’t see the form anymore on the shared page, had you modified it to another page?

Best Regards
Patrick Freitas

Hi Patrick,

yes, I added custom css for text-area on form’s appearance but didn’t work but now I added on theme’s custom css and finally it works! Thank you
Issues #1 #3 #4 fixed!

#2 text-area minimum height cannot be reduced more than 140 px
I’m referring to the 2nd text-area (Domanda) {textarea-2} on this form [forminator_form id=”42539″]: https://www.diritto.net/parere-consulenza-legale/diego-carmenati/

I invented this code putting together anything I know, but it doesn’t work (so I removed it):
.forminator-textarea-2{
height: 50px; !important;
}

Thank you again for your time

Hi @dceditore

For that area you can use:

#forminator-field-textarea-2{
    max-height: 50px;
}

The code was almost correct since it is an ID you need to use “#” instead of a dot.

Best Regards
Patrick Freitas

Ohhh Yessssss… ; )

Works perfect, thank you so much, great support!

Hi @dceditore

You are welcome.

Feel free to let us know if is there anything else or we can mark this as resolved.

Best Regards
Patrick Freitas

Nothing else, you can mark as happily resolved.
Thank you again