Responsive Form with two columns using bootstrap

Highlighted
Anonymous
Not applicable

Responsive Form with two columns using bootstrap

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

4 REPLIES 4
Highlighted

Re: Responsive Form with two columns using bootstrap

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

Highlighted
Anonymous
Not applicable

Re: Responsive Form with two columns using bootstrap

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

Highlighted

Re: Responsive Form with two columns using bootstrap

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

Highlighted

Re: Responsive Form with two columns using bootstrap

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

Changing a form's responsiveness through CSS