Using marketo forms in a responsive layout.

[Anonymous]

Hi Jeff, how are you.

I'm hoping you can help me better understand where your solution gets implemented.

Can step 5 only be done in the Design Studio?  Would this mean there would be a landing page in Design Studio for each Program?

Or, it can be done in a Program by creating a landing page there and selecting the responsive design template from the template library? 

And in step 5, how does the form get inside your container when it's dragged onto the landing page?

Great work coming up with a solution! Thank you.

Kind regards,

Rory

[Anonymous]

Rory,

Yes, step 5 is done in the design studio using your landing page layout.  You should create a landing page for each instance or program. Yes, you can apply this by creating a landing page using your responsive template.

In step 5 the form is cloned into your template form area by the jquery function from step 3.  You'll need to make sure your ID or class naming matches in both steps 3 and 5.

I hope that helps.

 

[Anonymous]

Hi Jeff,

Thank you!

[Anonymous]

It's great to see a thread that was started in 2013 still have relevance a year and a half later!

Do you have a solution that will work for forms embedded into a responsive webpage that uses bootstrap 2.3.2? I'm having an issue getting a horizontal form layout to gracefully collapse above viewport sizes of 480. I have a rough example here. My intent is to have three fields across that collapse down and stack within the responsive Bootstrap divs.

My experience with JS is limited so any assistance you can provide would be great. 

Thanks, JF

[Anonymous]

JF,

Sorry for the delay. I was soaking up all of the knowledge presented at the marketo conference. That's interesting you're using bootstrap 2.3.2. I am also using that version. Forms in spans can be a bit tricky. What you have to do is reset all of you span... and input widths to work for each media css setting. For each level or device you will need a seperate set of css settings for the span and input/select styles.
 

@media (min-width: 1200px)

<style>…</style>

.mktoForm .mktoFormCol {

1. width: 47.5% !important;

}
 

@media (max-width: 979px) and (min-width: 768px)

<style>…</style>

.mktoForm .mktoFormCol {

1. width: 47.5% !important;

}

@media only screen and (max-width: 480px)

.mktoForm .mktoFormRow .mktoFormCol {

1. clear: both;

}

@media (max-width: 480px)

<style>…</style>

.mktoForm .mktoFormCol {

1. width: 100%!important;
2. padding-right: 5px;
3. padding-left: 5px;

}

I'm using forms 2.0 now. With the embed capabilities it makes integrations much easier.
Research the forms 2.0 for developers. It's been very helpful for me.
It shows how you can use javascript to over write the default submit label
and set dynamic form values.

http://developers.marketo.com/documentation/websites/forms-2-0/

You'll want to play around with this and other form styles to accomplish the look you want.

I hope this helps.  

[Anthony_Dykstr1]

Hello Jeff,

I've been battling with trying to get forms 2.0 to work with my responsive landing page and stumbled upon this thread. In your latest post you said that using forms 2.0 with embed capabilities makes integration much easier. I've always opted to embed my forms instead of dragging them onto our Marketo landing pages to ensure that I have 100% control of where the form goes. I'm attempting to keep my methods the same and just use jQuery to strip all of the marketo form classes / styles and replace them with my own so that the form behaves 100% responsively with my page and looks the way I'd like it to without having to go through all of the trouble of adding !important to all the styles I want in the form CSS editor.

Are you still using your clone method to get the forms to be behave as responsively as possible or has the forms 2.0 API documentation lead you to a better approach?