Moving required checkbox field to the bottom of a Progressive Profiling form

[TammyAmaral]

Hello,

I'm having some trouble cracking this one...we have this form with progressive profiling enabled but I can't seem to move the required checkbox field to the bottom of the form...this is what it looks like now https://go.ecompliance.com/testing-progressive-profiling.html

Where do I have to add custom CSS? at form level, template level, landing page level?

Any insight into this would be greatly appreciated! Thank you!

[SanfordWhiteman · Accepted solution]

It's not done using CSS. You need Forms 2.0 JS. See the demo here:

MktoForms2 :: Demo :: Override Field Order 1.0.2

[TammyAmaral]

Hi Sanford, thank you for the speedy reply...

When I submitted a ticket with Marketo, they mentioned that this can only be done using CSS so I got bad intel there. Where would I implement this javascript within the form? Or would it be placed on the landing page template where the form is embed?

Thanks,

Tammy

[SanfordWhiteman]

---

When I submitted a ticket with Marketo, they mentioned that this can only be done using CSS so I got bad intel there.

---

Yeah, that was bad intel. It’s impossible to do with only CSS while preserving accessibility (it is to some degree possible if you don’t care about keyboard interaction, but I do!).

---

Where would I implement this javascript within the form? Or would it be placed on the landing page template where the form is embed?

---

Not within the form. As in the CodePen demo, place it in a script anywhere after the embed code. On a Marketo LP, this means just inside the closing </body> tag.

[TammyAmaral]

Morning!

I tried implementing the code changes but it didn't work. I think it's more my lack of advanced Marketo knowledge than your workaround fix.

[SanfordWhiteman]

You have to download the FormsPlus scripts, upload them to Design Studio, and include them as well:

<script id="teknklFormsPlus-tag-0.2.2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/250687/teknkl-formsplus-tag-0.2.3.js"></script>
<script id="teknklFormsPlus-reorder-0.2.4" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/250687/teknkl-formsplus-reorder-0.2.4.js"></script>

(Don’t serve them directly from my CDN, put them in your Design Studio and serve from there.)