SOLVED

Form fields are extremely wide

Go to solution
mhardy
Level 2

Form fields are extremely wide

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

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Form fields are extremely wide

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.

View solution in original post

8 REPLIES 8
SanfordWhiteman
Level 10 - Community Moderator

Re: Form fields are extremely wide

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
Level 2

Re: Form fields are extremely wide

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
Level 10 - Community Moderator

Re: Form fields are extremely wide

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
Level 5

Re: Form fields are extremely wide

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
Level 10 - Community Moderator

Re: Form fields are extremely wide

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
Level 5

Re: Form fields are extremely wide

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
Level 2

Re: Form fields are extremely wide

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

SanfordWhiteman
Level 10 - Community Moderator

Re: Form fields are extremely wide

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.