Skip navigation
All Places > New York User Group > Blog > 2018 > May
2018

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

Abacus is a NYC Fintech Startup and we're looking to hire our first Demand Generation Marketing Manager to build out our strategy! If you're interested or know anyone who might be, please apply here: Abacus - Demand Generation Manager

 

About the Role

The Demand Generation Manager is responsible for Abacus’ customer acquisition strategy. You will develop a strategy that focuses on crafting and executing campaigns with the objective of generating high quality sales pipeline that will ultimately contribute to revenue growth for Abacus.

 

The ideal candidate will be a blend of creative and analytical, working alongside our content and business development teams to create attention-grabbing ads, emails and landing pages. Working with marketing and sales operations to track and measure success and ROI. This is a great role for someone looking to hone their strategic skills by developing a fresh demand generation strategy.

 

 

Who is Abacus?

Abacus is reimagining the way businesses move money, starting with the first real time employee expense system. We’re excited about building a solution that is not only effective but enjoyable for everyone to use. Creating the best customer experience drives us - we love hearing everyday how what we're working on is saving our customers time and headaches. Making expense reports obsolete is only the beginning - join a team that is leading the charge in how businesses manage their cash flow. Check us out at abacus.com

After keeping this code close to the vest since 2015 (!), it's time to share the knowledge.

On the Community, I periodically refer to “my method” and to how other all other approaches are horribly hacker-friendly (true!). But I realize it's been a ludicrously slow reveal.

I'm still keeping my advanced method (for those who can't meet the below prerequisites) closed-source, but the simple method here will work for the vast majority of users.

The prerequisites

Here are the prereqs to use the open-source code:

❶ Your external site must share a private parent domain with one of your Marketo instance's LP domains or domain aliases. That is, if your external site is http://www.example.com then you'll need to have (or newly create) a Marketo domain like http://pages.example.com. Those share the private parent example.com.

Such a domain is usually already available. A domain like http://pages.example.info doesn't share a common parent with http://www.example.com so you can't use that. You can either use an existing domain or create an alias for this specific task, so http://special-forms-stuff.example.com is fine to use instead of your primary http://pages.example.com.

If and only if your external site runs over SSL (https://) then the Marketo LP domain must also run over SSL. But there's no requirement in reverse: it's fine if your LP domain runs over SSL but the external site doesn't. And it's also fine if both of them are still plain http://.

❸ Almost not worth mentioning: you need to have a server that can host a single JS file. You can't upload JS to your Marketo file library, because Marketo still (!!!) doesn't serve the .js extension correctly for all browsers. But, pretty much by definition of needing external site pre-fill, you must have another server, right?

 

Read the full post on