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

[TBlane_McMichen]

Related to this thread, I want to add an autocomplete feature to one of the fields to avoid a long select list.  I found this JS that will do the job... Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

The trick is to add a class to the field (<input class="awesomplete" ...) but i don't see how to do that.  Any ideas?

[SanfordWhiteman]

If you start a new thread, I'll show you how to use this library with Marketo Forms.

It's not so good to post on old threads, because only the OP can mark answers as Correct (and there can only be one Correct answer).

[TBlane_McMichen]

Created new thread...  Add a CSS class to MktoForm field

[Ulf_Deeg]

some Tips, but don't take them literally - just to give some guiding rails from the top of my head...

1. set the mktoForm to 100% width, possibly with a max-width of e.g. 1000px

2. set the mktoFormRow to 100% width

3. set the mktoFormCol to 48%ish for 2 columns, 31%ish for 3 columns, add some spacing in between
    - if you have specific rows that need different column widths, work with the .mktoFormRow:nth-child(n) > .mktoFormCol

4. add media queries to switch the mktoFormCol from 44% to 100% width at the break point to switch to 1 column layout

5. set the mktoFieldWrap to 100% width

6. set most inputs and selects to 100% width

7. Use the Labels Above Layout, works better

8. Make sure you use the Form Style "PLAIN", not simple or any others.

You will probably also need to adjust label and input styling using e.g.

.mktoForm input:not([type=submit]):not([type=checkbox]):not([type=radio]), select {width: 100% !important;}

.mktoForm label[for="formFieldNameHere"]{

The most trouble I usually get with mktoCheckboxList and mktoHtmlText styles.

[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

[SanfordWhiteman]

'pends on how you're doing the 2-column in the first place.  I would keep it 1-column in the Form Editor and then use outside styles to decide when 2up would fit.

You should also use the later and far better version of that snippet, found here: MktoForms2 :: Tag Wrappers

[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]

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]

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]

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.