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 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
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.
I sometimes like to change the highlight / selection color with css. It’s a nice little touch that adds something to the feel of the site. Even thought most people…
I sometimes like to change the highlight / selection color with css. It’s a nice little touch that adds something to the feel of the site. Even thought most people will never see it, the ones that door will find it entertaining.
Changing the highlight / selection color is super easy. Simply cut, copy, and paste the below snippet into your stylesheet. Replace the background color, and color properties to your liking, and you’re highlight color will change!
The Ultimate DevOps Tool Chest was a derivative work of the Periodic Table of DevOps. In the process of gathering all of the info for the Periodic Table of DevOps…
The Ultimate DevOps Tool Chest was a derivative work of the Periodic Table of DevOps. In the process of gathering all of the info for the Periodic Table of DevOps I had to categorize, and arrange all of the tools into discreet groups, gather their images, and a hundred other things.
I started putting this into a visual representation so I could see my progress as I gathered the tools, and this eventually became the DevOps Tool Chest. It’s not really all that different from the periodic table. It just presents the information in a different, more complete, manner.
Take a look at the final product here.
Everyone loves Instagram for their filters. It’s their secret sauce. I found these imitation CSS3 filter effects somewhere on the internet (I wish I could remember where), and they’ve helped my bring…
Everyone loves Instagram for their filters. It’s their secret sauce. I found these imitation CSS3 filter effects somewhere on the internet (I wish I could remember where), and they’ve helped my bring a lot of magic to my images here on Sparq Vault.
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…
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.
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.
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.
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!
I just finished a new webinar landing page template for XebiaLabs. This page was prompted by a webinar on Microservices hosted by some of the industries most famous thought leaders…
I just finished a new webinar landing page template for XebiaLabs. This page was prompted by a webinar on Microservices hosted by some of the industries most famous thought leaders on the topic. I was given a day to put a custom template together.
I think this template is a good representation of my ability to put together a visually appealing, functional, and integrated hub for a campaign on very short notice.
The page has a Marketo form, custom sharing button integration with integrated links, a custom jquery countdown widget, as well as a ton of other cool features that I pulled together at the last moment.
Several weeks after starting at my position as Digital Marketing Manager at XebiaLabs I was asked to redesign the company’s signature line. This was prompted by CEO, as well as…
Several weeks after starting at my position as Digital Marketing Manager at XebiaLabs I was asked to redesign the company’s signature line. This was prompted by CEO, as well as employee, complaints that our signature lines were, “too different, disorganized, and unprofessional” They wanted a uniform signature line that could be easily installed, updated, measured, and appreciated by all. Several employees had tried previously, but to no avail.
I started the project, and it is possible that it was the toughest project I’ve ever undertaken.
The first problem that I ran into was that, as an international company, our employees were dispersed across the globe, and thus had no access to the marketing department.
This ruled out the possibility of meeting with employees in person to install their signature lines, and is what prompted me to come up with a “signature line generator” that our employees could use to generate their signature lines, cut and paste it into their email clients, and if there were any issues, repeat the process.
I found this to be much more practical than guiding each and every employee through the process individually, over the phone, or in some other manner. Additionally, this tool would deliver business value in perpetuity as long as it was updated.
- Collect all of the required information
- Validate that information
- Automatically generate their signature line
- Provide them instructions on how to install it on various email clients
- Store the information for use in future signature lines
- Collect the information to be used for the bios on the “Team Page”
- Collect analytics on signature line clicks using Google Analytics tracking code
- Provide a tool that could be extended to XebiaLabs’ parent company
It took about a week to put together over the course of the year, but it was well worth. Below you can find the specifics on some of the cooler features.
Every signature line that I generated I packed with Google campaign tracking code. This simple addition would allow me to track who in the company was having their email signature clicked the most as well as tracking how much of our email traffic was actually coming from personal company emails.
When signature lines are generated Google tracking links are programmed into the design in locations such as the logo, name, address, website links, etc. etc. This generates a uniform tracking standard across an organization, turbocharges email measurements by automatically installing tracking links across the board, and affords the ability to track signature line usage on an individual basis. Here are some of the parameters.
- utm_source = Signature Line
- utm_medium = Email
- utm_content = Logo, Name, Social Link, Advertisement (What is being clicked)
- utm_term = Jon Blumenfeld (Individual’s Name)
I knew that the email signatures were going to change in the future. It’s inevitable. I didn’t want to be responsible for redesigning the signature line and setting up meetings to get people set up in the future so I programmed the form to store the data in our CMS MODx for future use.
Users would be able to click on their personal link, view their signature line any time in the future with updated designs.
“Team Page” Content
Whenever someone would generate a signature line I would store that information for future use on our company page. It proved a whole lot easier than contacting everyone individually for the same information in the future.
Xebia Signature Lines
The signature line generator was a big hit amongst the XebiaLabs team, and as a result XebiaLabs’ parent company Xebia caught wind of it and asked for a version they could use. Doing this was as easy as swapping out the logo, and changing the signature color scheme.
I wrote previously about Campaign Monitor’s Guide to CSS Support in HTML Emails because I found it immensely helpful when designing my company’s responsive email templates in Marketo. This past week…
I wrote previously about Campaign Monitor’s Guide to CSS Support in HTML Emails because I found it immensely helpful when designing my company’s responsive email templates in Marketo.
This past week I made some updates to our emails so that they would follow our company’s branding guidelines a little more closely. This involved adding background images that we use on the website to certain elements in our emails.
For anyone who has dabbled in responsive email design, or just plain vanilla html email design you know how difficult it is to obtain full support for background images across all of the different clients and devices out there.
Here is a great new tool offered by Campaign Monitor that will make including background image styling a breeze.