SOLVED

How do I make forms 2.0 submit button responsive like form fields?

Go to solution
Highlighted
Anonymous
Not applicable

How do I make forms 2.0 submit button responsive like form fields?

Forms 2.0 form fields are totally responsive, but the submit button does not seem to be. Our button has to be styled to align with the form fields, and looks correct on desktop (seen below):

On desktop:
0EM50000000Sn9l.jpg

But on mobile, the form fields respond and the submit button gets cut off:
0EM50000000Sn9q.png

I'm assuming this is dealing with media queries, and was wondering if anyone has found a solution making the button respond with the form fields.

Thank you!!


 
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

Hi Devan,

You assume correctly. The media query (<= 480px) is applying style rules for the fields.

It looks like some custom styles are being used for the button, but there is no change to the button width at the 480px breakpoint.

Luckily, it looks like the button's alignment is already correct, so you just need to copy the width of the fields (which is 100%).

The following media query and CSS rule should be what you need; I almost always use it with Marketo forms. Adding this to the page's CSS should do the trick.

@media only screen and (max-width: 480px) {
    .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
        width: 100%;
    }
}

Let me know if this makes sense! Sorry for the code drop; I figured I might as well just hand it over.

Best,
Kyle

View solution in original post

11 REPLIES 11
Highlighted

Re: How do I make forms 2.0 submit button responsive like form fields?

I know its an issue.
I've just had to make sure on the form edit page that it's aligned to the left and just use JQuery on the page to set it better.
Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

Hi Devan,

You assume correctly. The media query (<= 480px) is applying style rules for the fields.

It looks like some custom styles are being used for the button, but there is no change to the button width at the 480px breakpoint.

Luckily, it looks like the button's alignment is already correct, so you just need to copy the width of the fields (which is 100%).

The following media query and CSS rule should be what you need; I almost always use it with Marketo forms. Adding this to the page's CSS should do the trick.

@media only screen and (max-width: 480px) {
    .mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
        width: 100%;
    }
}

Let me know if this makes sense! Sorry for the code drop; I figured I might as well just hand it over.

Best,
Kyle

View solution in original post

Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

Ah, yes! Thanks Kyle! 

I added the CSS you gave and the only other thing I had to do was add a max-width to the .mktoButtonWrap so it lined up perfect with the form fields.

.mktoButtonWrap {
  width: 100% !important;
  max-width: 400px !important;
}

Thanks again for the help!




  
Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

added the code and still get the same problem with the submit button falling off screen...any help would be great

Highlighted
Level 10 - Community Moderator

Re: How do I make forms 2.0 submit button responsive like form fields?

Can you post a link to your actual LP w/form?

Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

at a loss...am I missing something?

HEALTHCAREfirst

Highlighted
Level 10 - Community Moderator

Re: How do I make forms 2.0 submit button responsive like form fields?

.mktoButtonWrap {

    margin-left: 0 !important;

}

.mktoButtonWrap .mktoButton {

    width: 100%;

}

Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

do I put this in the css only in the template or just the custom css in the form only?

Highlighted
Anonymous
Not applicable

Re: How do I make forms 2.0 submit button responsive like form fields?

worked like a charm in mobile...but flushes button to the far left under field titles...it would be nice to slide it over to center under form fileds then shift to the left in mobile...am I asking too much