CSS: Submit button

Hi @anilky

I hope you’re well today!

I’d love to help you with this but usually such issues (if your attempts aren’t working) are related to some other/additional CSS that’s already there, coming e.g. form theme or other plugins.

It should still be doable but to find correct CSS we would need to check it directly on the form in question and I don’t see any Forminator form on the page you linked to.

Could you provide a link to the page where we could actually see the form in question (and without the need to login to the site)?

If you have removed the form or it’s only for logged-in users, could you simply put it on some additional test page (without need to login) and share link to that page?

This way we’ll be able to check it on affected form and help with CSS.

Best regards,
Adam

It’s still there on the same post in an accordion. Click on ‘Leave feedback on this post’ to see it. Here is the screenshot.

Hi @anilky

Thanks, I missed that, got it now!

About the gap/space:

It seems to be somehow related to the overlapping CSS which is either coming form the theme or from some custom code; I’m not sure because CSS served is cached/optimized so it’s difficult to find out exact source if it.

However, you can solve it this way:

1. edit the form and click on the feedback (textarea-1) field to edit it
2. there switch to “Styling” tab and put this in the “Additional CSS Classes” field (note NO dot in front)

form-no-bottom-gap

3. apply changes and update the form

4. and then add this CSS to the site (e.g. via your theme’s custom CSS option)

.form-no-bottom-gap {
  margin-bottom:0px!important;
}

About centering the button:

Add this CSS to the site:

.forminator-button-submit {
  display:block!important;
  margin:0  auto!important;
}

Note:

In both cases – make sure to clear all caches after that as otherwise you may still have the “old” CSS “stuck” in there so you wouldn’t see changes.

Best regards,
Adam

Thanks. It works.

Pl also resolve the last part of my query on height of text area. I used this, but the height doesn’t get reduced below 140 px.

.forminator-textarea {

     width: 100%;

     height: 100px;

 }

Hi @anilky

Please consider adding this code to WP Dashboard -> Appearance -> Customize -> Additional CSS:

.single-post #forminator-module-52128 textarea {min-height:auto !important; height:80px;}

Kind Regards,
Kris

Thanks. In mobile view though, things go for a toss. Pl see screenshot. The submit button almost merges with the text area. You can refer to the same url as earlier.

Hello @anilky ,

Based on your screenshot and my inspection of the mobile form, it appears that the button is positioned too closely to the text field, causing it to overlap with the section that displays the character count (e.g., “0/500”). To resolve this issue, please follow these steps:

1. Log in to your WordPress Dashboard: Go to your WordPress website and log in using your credentials.
2. Access the Customizer:

• In the WordPress Dashboard, navigate to the “Appearance” section.
• Hover your cursor over “Appearance” to reveal a dropdown menu.
• Click on “Customize.”

1. Open Additional CSS:

• Inside the WordPress Customizer, you’ll find various customization options on the left sidebar.
• Scroll down to locate the “Additional CSS” option. It’s usually positioned at the bottom of the menu.

1. Add Mobile CSS Styles:

• To address the issue of button placement on mobile screens, you’ll want to add custom CSS code that targets screens with a maximum width of 768 pixels (commonly used for mobile devices). Add the following CSS code within the “Additional CSS” section:

   @media (max-width: 768px) {
       .forminator-field {
           margin-top: 15% !important;
       }
   }

5. Save Changes:

• After adding the CSS code, make sure to save your changes within the WordPress Customizer. Look for a “Save” or “Publish” button, usually located at the top or bottom of the Customizer panel.

By following these steps and applying the provided CSS code, you should be able to adjust the button’s position on mobile screens, ensuring it doesn’t overlap with the character count section. @wpmudevsupport13 @wpmudev-support8

Hi @olumide22

Thank you for suggesting this.

@anilky

Please give this a try and let us know if it works fine for you.

Best regards,
Adam

Thanks @olumide22 and @wpmudev-support8 for your response(s). It works well.