Changing a form's responsiveness through CSS

[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

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

[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