Marketo Form Fields Not Responsive

Forum|Forum|1 year ago
September 23, 2024
1 reply
1954 views

I have a Guided LP that I am building, when I create a page from it and insert the form, the form fields are not responsive to the container. I know I am missing something in the code. As I shrink the page they overlap on the right side until the container responds to the sizing.

The page is here

https://go.autoshopsolutions.com/TPBMSCustomerPortal.html

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Dave_Roberts

Thanks for sharing a link to your page with the form, it made it much easier to troubleshoot this one.

In the big picture here, the issue you're running into with width has to do with the width settings in the the inline styles of the form elements on the page. These are set to fixed widths within the inline styles and those need to be updated to be fluid widths (100%) to respond as you'd want them to.

Here's a look into the inspector to highlight a few of the bits that are giving you issues with the form blowing out the right side of the container:

Here's a bit of CSS that I've commented up that should help you to see something more like the screenshot above:

/* fluid width for form elements */
form.mktoForm, 
form.mktoForm .mktoField, 
form.mktoForm .mktoFieldWrap, 
form.mktoForm .mktoFormCol {
    width: 100% !important;
}
/* hide vertical gaps between rows */
form.mktoForm .mktoOffset {
    display: none !important;
}
/* adjust button row to fluid width */
form.mktoForm .mktoButtonRow {
    width:  100% !important;
}
/* remove default margin from button wrap and set it up to be easy to position the button using text-align instead */
form.mktoForm .mktoButtonWrap {
    margin-left: auto !important;
    width: 100% !important;
    display: inline-block;
    text-align: right; /* align button position */
}
/* style button w/ !important tags here */
form.mktoForm button.mktoButton[class] {
    width: auto !important;
    padding: 10px 15px !important;
}

Let me know if you have any questions about the styling here or if this does or doesn't work for ya, I'd be happy to help you get this one across the finish line here.

Thanks,
Dave

Dave_RobertsAccepted solution

Level 10

Thanks for sharing a link to your page with the form, it made it much easier to troubleshoot this one.

In the big picture here, the issue you're running into with width has to do with the width settings in the the inline styles of the form elements on the page. These are set to fixed widths within the inline styles and those need to be updated to be fluid widths (100%) to respond as you'd want them to.

Here's a look into the inspector to highlight a few of the bits that are giving you issues with the form blowing out the right side of the container:

Here's a bit of CSS that I've commented up that should help you to see something more like the screenshot above:

/* fluid width for form elements */
form.mktoForm, 
form.mktoForm .mktoField, 
form.mktoForm .mktoFieldWrap, 
form.mktoForm .mktoFormCol {
    width: 100% !important;
}
/* hide vertical gaps between rows */
form.mktoForm .mktoOffset {
    display: none !important;
}
/* adjust button row to fluid width */
form.mktoForm .mktoButtonRow {
    width:  100% !important;
}
/* remove default margin from button wrap and set it up to be easy to position the button using text-align instead */
form.mktoForm .mktoButtonWrap {
    margin-left: auto !important;
    width: 100% !important;
    display: inline-block;
    text-align: right; /* align button position */
}
/* style button w/ !important tags here */
form.mktoForm button.mktoButton[class] {
    width: auto !important;
    padding: 10px 15px !important;
}

Let me know if you have any questions about the styling here or if this does or doesn't work for ya, I'd be happy to help you get this one across the finish line here.

Thanks,
Dave

K

kenmckownAuthor

Level 4

This is great, question, can we just set these form fields to 100% within the form itself in Marketo, or do I need to custom code like this? Just curious if I can set it at the form level.

Dave_Roberts

Level 10

Unfortunately, the Marketo Form editor input for the Field Width is locked into just a number and doesn't let you add a unit value. This is tied into "px" on the back end so you might enter something like "100" and it'll output something like <input style="width:100px;">. Beyond the width of the fields, there are other parent elements that need to be resized to be fluid and for that you'll need the custom CSS.

The reason for this is two-fold. One is that the form elements themselves have inline styles that you've got to work around - so things like the Input Width handle write to the inline style, but maybe not always in the way that you'd want them to (in % rather than px for example). The other issue here is that there's isn't a native option to disable the forms2.css file that loads with the forms which adds another layer of styling to work around for some of the elements. The reason for the "!important" tags has mostly to do with overriding the inline styles on the elements themselves and also the load order of the CSS on the page.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded