Form fields are extremely wide

[mhardy]

I have tried everything, but my forms on my WordPress website are very wide. Any suggestions on how to go about fixing this?

[SanfordWhiteman]

We'd need much more information. Starting with a link to your page. And also what your intended layout is (so we don't have to define "very"!).

[mhardy]

https://getinsite.io/

Are subscribe from at the bottom of our page.

the width of the form boxes are very large and I don't know if it is something in marketo or if its something our WordPress website doing

[SanfordWhiteman]

It's because you have all kinds of styles in this external CSS file affecting form fields. Those styles should be tuned to either not apply to Marketo forms (make the selectors more specific) or make sure they understand the Marketo form DOM.

[Jasbir_Kaur]

Hi @mhardy 

The issue is coming because of the below CSS - 

#comment-input input, .avada-select .select2-container .select2-choice, .avada-select .select2-container .select2-choice .select2-arrow, .avada-select .select2-container .select2-choice2 .select2-arrow, .chzn-container .chzn-drop, .chzn-container-single .chzn-single, .fusion-body .avada-select-parent select, .fusion-login-box .fusion-login-form input[type=password], .fusion-login-box .fusion-login-form input[type=text], .input-text:not(textarea), .main-nav-search-form input, .post-password-form label input[type=password], .search-page-search-form input, .searchform .fusion-search-form-content .fusion-search-button input[type=submit], .searchform .fusion-search-form-content .fusion-search-field input, .searchform .search-table .search-field input, .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__arrow, input.s, input[type=date], input[type=email], input[type=number], input[type=password], input[type=phone-number], input[type=text], select {
    height: 77px;
    padding-top: 0;
    padding-bottom: 0;
}

Reduce the height and it will fix.

Let me know in case of any concerns.

Thanks!

Jasbir

[SanfordWhiteman]

But you can't just change the global CSS if it's intended to style other, non-Marketo forms. That's going to push the breakage somewhere else, not fix it.

[Jasbir_Kaur]

Okay, then we can target the Form ID.

#mktoForm_1038

By using this ID, you can define the CSS and change the style of form fields.

[mhardy]

Where exactly can I find this within the Wordpress CSS code?

[SanfordWhiteman · Accepted solution]

Open up the CSS file in an editor and then un-minimize it — it’s minimized, which makes it very hard to search. Then look for the part Jasbir is talking about.

You may not be able to make additions to that same CSS file, of course. But that’s OK, because you can add your own CSS file with style overrides to Marketo Design Studio, then reference that file in your page. This is the best way to manage form-specific styles.