Editing/ reformatting long list of values on a form

[Tom_Kerlin2]

Hi,

I have a form with a really long list of product values. The field type is set to be a check-box (see below).

Is there any way to split this list into columns to make the form more user-friendly and also fill the empty space?

Thanks,

Tom

[Grégoire_Miche2]

Hi Tom,

I would probably look into the CSS to display them in 2 or 3 columns and in a responsive way.

-Greg

[Tom_Kerlin2]

Thanks Greg,

How can I edit the HTML/CSS in an individual Landing Page if I'm using a global template in design studio?

[Grégoire_Miche2]

Hi Tom,

You will have to add some styles that will use the form id in the css styles. you styles will look like:

#mktoForm_XXXX .mktoCheckboxList .mktoField {

     width:20px !important;

     float:left !important;

}

#mktoForm_XXXX .mktoCheckboxList label {

     width:26% !important;

     float:left !important;

     margin-left: 5px !important;

}

where XXXX is your form ID. This is not tested, so it may need some adjustments.

-Greg

[Tom_Kerlin2]

Thanks Greg,

Where can I find the Form ID? I could only find something like that listed under "embed code" option.

[Grégoire_Miche2]

Hi Tom,

You can find it on the landing page code. display the page in your browser and access the page code, then search for mktoForm_

the other possibility is to go to Marketo, on the form, and then form actions -> embed code. The 4 digits will appear in the JS.

-Greg

[cjb-csdental]

Is there a way to modify this so that the Mobile version does not crowd the selections/columns? 

[Jo_Pitts1]

@cjb-csdental ,

can you give a visual example of what you have, and what you want?

Cheers

Jo

[Erin_Cavanaugh]

You should be able to put this into columns. Try dragging "Card Payments" to the right of "Active View" You should see an orange arrow.

[SanfordWhiteman]

The Checkboxes data type (which I think Tom is using, even though he said Checkbox) doesn't allow repositioning that way, AFAIK.  You have to use CSS to column-ize it.