I have a need to add disclosures to my forms to be compliant with GDPR in providing information on the use of the data being collected. And going through a developer isn't always ideal as Marketing team and legal may need to update more than once. Also, would prefer to insert on one form used in multiple pages instead of each page. The way I solved it was using a combination of display, :nth-of-type, and order, all CSS that can be done in Marketo.

 

Edit Form > Form Fields > Click Next > Form Themes > Edit Custom CSS

Screen Shot 2018-05-28 at 12.04.28 AM.png

 

1) First, I made all my div rows, columns, and wraps as display: flex so I can use the order attribute later below.

 

.mktoFormRow,

.mktoFormCol,

.mktoFieldWrap {

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

 

I need to locate the correct row(that holds the disclosures text) that I'll be using. I placed it above the the button originally but when using progressive profiling it doesn't allow rich text above the button and trying to select the correct row isn't great when a number of fields can show up in progressive profiling depending on the individual, form fields, and setup.

 

Edit Form > Form Fields

 

1.5) So to fix this setback, I just kept the disclosure rich text as the first row on the form. This allows me to know exactly where it is so I can select it.

 

Screen Shot 2018-05-27 at 11.24.31 PM.png

 

2) Second, I give the button row an order.

 

.mktoButtonRow {

  order: 10;

  -webkit-order: 10;

}

 

3) Lastly, I search for my disclosures row with nth-of-type, I know it'll always be the first row(based on step 1.5) and can make the order 11. This will place it below the button(which is 10 from step 2). This should work if you are using progressive profiling or not.

 

form .mktoFormRow:nth-of-type(1) {

order: 11 !important;

-webkit-order: 11 !important;

}

 

Hope the above made sense. You can also use tokens and add them to your program or folder if you'd like to easily make edits through there instead of always needing to go inside the form. The tokens will only work on Marketo landing pages though. You'll have to edit the rich text manually on any form hosted outside of Marketo.

 

Final Result Preview

 

Screen Shot 2018-05-27 at 11.35.16 PM.png