Field width not changing

Hello! Just checking as I still need help with this. Thanks!

Hi @miked1982,

Inspecting https://www.dbmwebdev.com/bgc/, it looks like the form is inside a fl-module-content, and this might be adding a space between the Name and Email Address fields, which it seems causing the issue. For your reference, I created this screencast.

When you’ve had a chance, could you please review the settings in that?fl-module-content? Without that space between the fields, you should be able to resize the fields.

In case the issue continues, please let me know if you’re using the CSS Class as described in our guide on how to display form fields in a single line.

Thanks!

I’m not sure this is the way to go with this. I have another site with a similar design/layout. Same plugins and theme. It doesn’t have this issue. Do you have a place where I can securely send you a login to see the other website? It’s behind a coming soon page, but I can send you a subscriber level link to see it and you can see if there’s something to spot.

Also, I did follow the instructions, adding the inline-fields class in the form level class field. I also removed the label and added placeholders. The other site it works fine as is both on desktop and mobile.

Hi @miked1982,

The best way to verify if the issue would be with WPForms or with settings on your page or theme is to create a new page using the Gutenberg editor (or Classic editor, if you don’t use the Gutenberg editor). Then, add the form with the inline CSS class, and verify if you can reproduce the issue.

If you cannot reproduce the issue, there is something causing the issue in the module settings where the form, or the page settings, or even in your child theme.

When you’ve had a chance to create this new page, could you please let me know if the form works? If not, please share the page URL in order for me to investigate the form.

Thanks!

https://www.dbmwebdev.com/bgc/form-test/

Same issue.

Hi @miked1982,

Thanks for the link!

I tried the inline form on my test site, and the issue might be related to the Modern Markup option. Could you please disable that option on WPForms ? Settings and let me know if works for you?

For your reference, I created?this screencast.

In case you cannot see the Modern Markup option in Settings, please use the code snippet available?here?(as shown in the screencast).

In case it helps, here’s our tutorial with the most common ways to add custom code like this. For the most beginner-friendly option in that tutorial, I’d recommend using the WPCode plugin.

In case the issue continues even after disabling the Modern Markup option, It looks like there might be a conflict between the forms and the site theme. To troubleshoot this, please try the steps described in our detailed guide on how to test for plugin/theme conflicts.

Hope this helps!

Nice!!! We are almost there. If you go look at the page at the link below now, you’ll see that the submit button is just slightly lower than the other two fields. Can you help me fix that? I can figure out how to fix the hover and button colors, but just need help with the position.

https://www.dbmwebdev.com/bgc/

Hi @miked1982,

Great to hear that disabling the Modern Markup option solved part of the issue. But it seems there is a CSS setting causing the issue with the submit button.

To address this issue, you could use a CSS snippet like this:

form#wpforms-form-315 .wpforms-submit-container {
    padding-top: 10px !important;
}

For your reference, I recorded this screencast. And in case it helps, here’s a tutorial on how to add custom CSS like this to your site.

Hope this helps!

Hi @miked1982,

We haven’t heard back from you in a few days, so I’m going to go ahead and close this thread for now. But if you’d like us to assist further, please feel welcome to continue the conversation.

Thanks!