Responsive Form with two columns using bootstrap

[Anonymous]

Hi

I am trying to achieve 2-column style layout for embedded Marketo Forms using Bootstrap CSS as below:

FirstName:......................                     Address:..............................

LastName:.....................                      City:......................................

Phone:............................                     Country:................................

The problem is the whole form is embedded under a single "col-sm-6". I was able to right align the fields (Address, City,Country) for desktop but it breaks the responsiveness as there is no col-6 defined separately on these columns.

<div class="row">

     <div class="col-sm-6">

              {embedded Mkto Form}

Please let me know if anyone has come across a similar issue or any pointers on how to fix it.

Thank you

[Grégoire_Miche2]

You have to manage the form styling through it's own CSS. With regards to you bootstrap framework, the form will be a whole.

But if you create the form as a 2 column form in Marketo and insert it in a full width (col-sm-12), it should work.

-Greg

[Anonymous]

Thanks Grégoire Michel​. I have options to customize CSS Classes but how can i manipulate the Marketo Form HTML to use bootstrap css classes? Any pointers would be really helpful

[Grégoire_Miche2]

There is no much way in fact.

You can destyle a form using Sanford Whiteman​ code here MktoForms2 :: Destyle Marketo form - JSFiddle there is another code, from the same author, that provides handlers on each field to each field, but I could not find it in the community. May be it could be used to add bootstrap classes.

But JS is, AFAIK, the only possibility to do this. Otherwise, you will have to use you own set of classes, and not bootstrap ones.

-Greg

[TBlane_McMichen]

Just for reference by future readers, Sanfords script to add handlers is in this post...

Changing a form's responsiveness through CSS