jQuery

Type
Thu Jan

Making Multiple Column Marketo Forms Responsive

By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put…

By default, if you embed a multiple column Marketo form into a webpage the form will adopt a fixed width that will likely expand out of whatever container you put it into.

You can restyle things, to a certain degree, with the custom CSS that Marketo allows you to edit, but this only gets you so far because of the built in html structure of the Marketo forms.

Because of this, I wrote a script that does a lot of the dirty work to make Marketo forms responsive regardless of viewport size.

The Script

The script will resize any Marketo form on the page upon rendering and on window resize. It does some math to calculate how many form fields there are per row and will apply an appropriate width to those rows for any viewport size.

One note is that you also have to include a simple media query for the mobile size. Don’t have time to get into that messiness in this post though.

After Running the Script

Desktop

Mobile

Conclusion

This is just one of the many things you can achieve with the Forms 2.0 api. I have a much more complete and fleshed out script that allows you to:

  • Determine if you want the form styled
  • Specifcy button alignment and text
  • Strip out and entirely restyle the form
  • Adapt the form for a dark or light background
  • Alter radio and checkboxes styling

Comment below or contact me if you are interested in taking a look.

 

View
Type
Thu Feb

How to Create a Custom Google Analytics Landing Page Conversion Rate Report

In this post I’ll demonstrate how you can set up a custom report to track landing page conversion rates using a custom metric, and custom calculated metric in Google Analytics….

In this post I’ll demonstrate how you can set up a custom report to track landing page conversion rates using a custom metric, and custom calculated metric in Google Analytics.

You can track form fill with events, but this doesn’t allow you to get a really simple drilldown of form fills per page for some reason…

The reason I needed to generate this report is because Marketo does not provide an out of the box report for landing page conversion when you are using self-hosted landing pages (which I imagine is quite popular because their landing page editor isn’t great).

At the end of this tutorial, your report will look something like the below report.

Screen Shot 2016-02-25 at 8.02.57 PM

To achieve this take a quick view of this video, and if you have questions feel free to ask them below!

 

View
Type
Wed Jul

Periodic Table of DevOps

The DevOps landscape is quite expansive. The depth and breadth of tooling available to us as companies is baffling…. All of this is compounded by the fact that many tools…

The DevOps landscape is quite expansive. The depth and breadth of tooling available to us as companies is baffling…. All of this is compounded by the fact that many tools overlap in their capabilities and are perpetually shrinking or expanding their offerings on a daily basis.

View
Type
Fri Feb

XebiaLabs Product Diagrams

One of the biggest challenges XebiaLabs faces as a company is that when introducing our offerings to someone who doesn’t know of us they always ask how we fit into the…

diagrams

One of the biggest challenges XebiaLabs faces as a company is that when introducing our offerings to someone who doesn’t know of us they always ask how we fit into the general devops environment. There is a really long and complicated answer to this depending on what tools the person is currently using, the processes / methodologies they embrace, and a number of other factors.

Therefore we decided to come up with an interactive visual that would convey the answer to this question, quickly, efficiently, and even take into consideration some things that we should touch on but don’t always when addressing prospects.

So far the response to these diagrams has been great. The only criticisms they have garnered are that they look static at first. In the future we may add a “pulsing effect” or some other indicator that the diagrams are interactive.

 

Challenges

The biggest challenge with this project was creating the lines between the individual integration categories, as well as gracefully making the diagrams responsive in a way that was still informative.

The diagrams all have a set width and height. The lines are all absolutely positioned divs with a 1px dashed border on the top or right depending on their vertical or horizontal orientation. The integration boxes are also absolutely positioned.

When the browser width shrinks to below a certain level, depending on the diagram we make the integration groups positioned relatively display block. This stacks them in a way that makes them still look appealing, and maintain functionality. Under a certain width we completely hide the lines.

Screen Shot 2015-02-13 at 12.57.10 PM

For the main diagram the responsive version itself was a little too much. For this diagram we hid the diagram, and created a static fallback visual to maintain the meaning behind the diagrams.

Screen Shot 2015-02-13 at 1.00.06 PMSpecial Effects

For all of the visuals I used wow.js and animate.css to provide a “it’s all coming together” effect. When the diagrams come into the viewport the individual elements of the diagram fade in from all directions. I think it’s a pretty cool effect!

 

View

Subscribe for More!


I send out a monthly newsletter on various topics.

Take a moment to enter your details, and you can select the news you would like to have delivered to your inbox!