12 Replies Latest reply on Jan 22, 2019 1:20 AM by Callum Pirie

    Marketo Form - Sizing dropdown field and mobile

    Callum Pirie

      Hi there,

       

      Two questions.

       

      1. I have created a form and using the nth-of-type from the correct answer here - CSS for responsive Form fields (in 2 columns)? I have made the first two columns side by side.

       

      Is there anyway I can make the columns 100% for mobile? do I use @media?

       

      2.png

       

      2nd Question.

       

      With the form I am trying to make the fields smaller which I have for each field apart from the dropdown. I have changed the padding to 9px when it was 14px 15px; padding.

       

      Anybody know the code I need to add for the dropdown? (highlighted below)

       

      1.png

        • Re: Marketo Form - Sizing dropdown field and mobile
          Gerard Donnelly

          Can you post a link to a form using the styles and I'll tell you what you need to change. Its hard to debug without the live code.

           

          Thanks,

          Gerard

          • Re: Marketo Form - Sizing dropdown field and mobile
            Dave Roberts

            Hey Callum, I've got a few ideas for this-

             

            As an aside, but food for thought:

            I've had issues in the past targeting the <option> elements inside a <select> element (dropdown).

            One method that did work for me to color that text was to target anything whose parent is a select element:

            select > * { color: red !important; }

             

            to the point....

            here's a snapshot of the CSS that's active (bold) on the select element. You can find this by using the "inspect" option in Chrome on any element on the page. This shows the different things that are going on in the page - in this case the rendered CSS. This is my best friend when debugging forms b/c you can see the "output" and source of things easily. The way this CSS is written, it's targeting the parent element (container) of the <form class="mktoForm" ..> element which contains the <select> element. Good news is that it looks like these styles are written into the custom CSS on your form. If you wanted to change just the select padding, you could use this code at the bottom of the Custom CSS on your form to override the padding (dont forget the !important flag).

             

            Screenshot_011619_111849_AM.jpg

            While it makes sense in some cases to use the #mktoLoadedFormWrapper as the 'high-level' target for the CSS, it also creates a constraint that these styles will only apply to forms which are placed into that container. If that's the only form container you use, it shouldn't matter -- but if you wanted to override those styles, they'd have to be  "more descriptive" (i.e. even higher-level container at the front) than the highlighted CSS rule OR they could have the exact same selector (#mktoLoadedFormWrapper form.mktoForm select) but the new CSS rule would have to be written after (below) this on the stylesheet.

            I prefer to have the "form.mktoForm" be the leading selector so that the forms styles are more portable and would probably remove the #mktoLoadedFormWrapper target unless there was some specific reason to have it (i.e. if it's not on-purpose or functional, I'd ditch it all together). Always good to back-up your stylesheet before making changes like this, but you should be able to copy/paste all the code out of the Custom CSS editor within the form editor and safely save that somewhere else. Alternately, you can clone the form and adjust the styles on the new form -- that way you've got some before/after to compare.

            In any case...

            Here's a look at the select element with 20px of padding using the method above for reference:

            Screenshot_011619_112907_AM.jpg

             

            Hopefully this covers the bases, let me know if there's anything else I missed here that'd be helpful?

              • Re: Marketo Form - Sizing dropdown field and mobile
                Callum Pirie

                Hi Dave,

                 

                Thanks for the reply. This makes sense and looks great. I will certainly play around with what you have done and see what happens.

                 

                Really appreciate everyones help.

                • Re: Marketo Form - Sizing dropdown field and mobile
                  Callum Pirie

                  Hey Dave and others

                   

                  Im actually still having some issues with this

                   

                  if you go to Corporate Digital Training | Digital Marketing institute

                   

                  and click on a CTA the form is small and condensed

                   

                  1.png

                   

                  but when the popup appears it then breaks the CTA forms. Any idea what could be happening here?

                   

                  2.png3.png

                    • Re: Marketo Form - Sizing dropdown field and mobile
                      Dave Roberts

                      Hey Callum-

                       

                      I think what you're seeing here is that the pop-up form loads after the other forms on the page. This usually has something to do with where it's placed in the HTML or some kind of order of operations things with scripts unfolding into the page.

                       

                      When I first visited the page, I saw the pop-up and dismissed it. After poking around a little bit, I refreshed the page and it didn't load the pop-up again (thanks for that!). Once I had reloaded the page, all of the forms appeared to be displaying properly. To be able to see the pop-up form again, I launched the page in an incognito window and noticed that the form issues were back. Im pretty sure this points to specifically the pop-up form. It's looking like each of your forms in Marketo has a set of Custom CSS that travels with the form. When you've got more than one form on a page, you're gonna load both sets of Custom CSS -- and whichever loads last (after) is the style that gets used in the render [this means which ever form loads last onto the page will apply its CSS "on top of" the previous form's CSS].

                       

                      It's hard to tell without a little bit of tinkering with each of the stylesheets, but it looks like there are probably different rules that are setup for at very least the button (maybe search the Custom CSS for "mktoButton" or just "button" and compare the results for the two forms). From the looks of it, some kind of height attribute, mabe padding might be the difference?

                       

                      --------

                      If there are some styles for the button that you can find on the Corporate Brochure form, you can probably just copy/paste those button styles to the very bottom of the Custom CSS for the pop-up form. Assuming they're written 'equally' (with similar selectors), this should override any other button styles further up the Custom CSS (if you can't otherwise find them to match em up).

                      If you get stuck, if you'd like to post the two sets of Custom CSS for each of the forms here I can take a look and help make a recommendation to align the two stylesheets. You can find the Custom CSS on the 2nd page of the form editor by clicking the little purple gear icon.

                      Screenshot_012119_083543_PM.jpg