Changing a form's responsiveness through CSS

[Anonymous]

Hello, 

I'm relatively new to Marketo and am working with our marketing manager to embed forms within our website. I'm having some difficulty getting the form to be responsive within our responsive pages. Here's an example where I have a simple two-column form that is fine until the page resizes below 720px until it hits 480px.

Our website is built on Bootstrap 2.3.2 and has a built-in responsive grid and media queries, etc. So while I can see that you have the ability to add CSS to change the style (color, stroke, padding, etc.) of the existing form elements within the layout, I cannot see how I can affect the form's layout responsiveness. It seems to me that I would need the ability to add CSS classes to each of the form elements in order to apply responsive media querie styles, but I don't seem to have the ability to get at the HTML or ed an ID to each element, i.e. First Name Label and Field, Last name Label and Field. or wrap a responsive div around each. 

Alternately, could I just apply width styles to the elements to mimic what Bootstrap does? So I could treat "mktoFormRow" as if it were a "row-fluid" and the "mktoFormCol" as if they were column or "span" and create media queries for each? 

Thanks for any help or docs you can point me to!

JFly

[SanfordWhiteman]

I'd have to see exactly what you're trying to do (did you mean to include an example URL?).

Targeting all wrapper elements for a single form field using CSS alone isn't possible because, as you've noted, the .mktoFormRow itself is generic.  However with a little JavaScript it's pretty easy -- you can walk up the DOM from the INPUT until you find a DIV.mktoFormRow.

[Anonymous]

Yes! I meant to include the URL (sorry 😉

I'm not too versed in JavaScript but am willing to get my hands dirty to figure this out. Any help/advice you have would be great. Here's the URL: http://www.collegeweeklive.com/cwl-colleges-b

[SanfordWhiteman]

First thing I'd do is add this JS snippet:

for ( var mktoRows = document.getElementById('mktoForm_1217').querySelectorAll('.mktoFormRow'), i = 0, imax = mktoRows.length; i < imax; i++ ) {
  mktoRows[i].setAttribute('data-wrapper-for',mktoRows[i].querySelector('.mktoField').getAttribute('name'));
}

What this will do is add the new attribute `data-wrapper-for` to every one of those .mktoFormRow elements that are currently generic.  For example, the .mktoFormRow that wraps the `Country` field will become:

<div class="mktoFormRow" data-wrapper-for="Country">

Then you can target the entire row in CSS based on the input field it wraps around:

.mktoFormRow[data-wrapper-for="Country"] {
  border: 4px solid black;
}

I'm not sure exactly what you're trying to achieve visually, but this will give you a lot more control in CSS.

You might also check out my destyled Marketo form example which gives you a form free of all CSS (though it doesn't change the wrappers Marketo always inserts into the DOM).

[Anonymous]

This method seemed to have worked great for me....to a point.  For some reason, the javascript seems to work on only the first five rows of my form.  I cannot figure out why it is not cascading down through all of the rows. I see there is a counter built in to the javascript, but not sure what would be limiting it to 5. Any idea?  https://imgur.com/VKOIZ9a

You can see the live code here:  http://welcome.knowledgelake.com/knowledgelake-trial.html

[SanfordWhiteman]

Get the latest tagWrappers from FormsPlus 0.2.0-Tag and use that.

[Anonymous]

Awesome, that was perfect.  Thanks for the handy library!

[Anonymous]

Thanks Sanford W - 

What I am trying to acheive is a horizonal form layout with two or three fields across that will gracefully collapse down to a vertical layout with one field across depending on the size of the viewport.

Where do I add this snippet within the <script> tags of the existing form embed code? I'm a novice when it comes to JS so any guidance would be appreciated. 

[SanfordWhiteman]

Yes, like so:

<script>
    MktoForms2.loadForm("//app-sj01.marketo.com", "XXX-YYY-ZZZ", 1217, function(form) {​
        for (var mktoRows = document.getElementById('mktoForm_1217').querySelectorAll('.mktoFormRow'), i = 0, imax = mktoRows.length; i < imax; i++) {
            mktoRows[i].setAttribute('data-wrapper-for', mktoRows[i].querySelector('.mktoField').getAttribute('name'));
        }
    });
</script>

[Andy_Penkalski]

Hi Sanford,

I stumbled across this thread looking to solve the exact same problem. I have a form that we'd like laid out in a two column fashion up until our tablet media queries where we'd like it collapsed into a single column. I'm trying to take advantage of the JS snippet, but I'm having trouble pinning down which selectors need to be redefined at each media query to get the desired result of collapsing from two columns to one.

Do you have any insight on which CSS selectors for the form need to be targeted to get this result?

Thanks