How to Create Responsive Marketo Forms

In:

Marketo forms, by default, have set widths for many elements including all the form fields, labels and even the form itself. If you’re embedding your form in a responsive landing page, you might want to make the form fully responsive as well. With a bit of CSS, you can make your one-column and two-column Marketo forms look great on every device.

Single Column Forms

Single column forms are easy to make responsive. All you have to do is override some pixel widths with percentage widths. Here’s a breakdown of what elements have to be updated. If you just want to copy and paste the final code click here to jump to the final CSS.

Change the form width to a percentage

Marketo will give the form a fixed pixel width by default, so the first step is to switch the width of the form to a percentage. I usually change the form width to 100% and define the container width for the form in the landing page template.

Tip: Make sure you don’t leave out the !important declaration. Since Marketo adds width as an inline style to the form tag, this is the only way to override the inline styling.

Update .mktoFormRow, . mktoFormCol, .mktoButtonRow and .mktoFieldWrap to 100%

The next step is to update .mktoFormRow, .mktoButtonRow, . mktoFormCol and .mktoFieldWrap to 100%, like this:


Update the form fields to a percentage

All of the form fields have a fixed pixel width as well. Just like the form element, you have to add the !important declaration for this as well to override the inlines styles Marketo outputs.


Center the submit button

If you want to center the submit button on the form you can add this CSS:


The final CSS


A note about field label widths

Field labels have fixed pixel widths as well. However, I usually leave it that way since it doesn’t usually impact the responsiveness of the form unless the labels are more than 300px wide. Label widths can be updated like this:



Two-Column Forms

Two-column forms are a bit more complicated than single column forms. I’ve tried many ways to achieve a two-column Marketo form, including adding javascript to add classes to different form elements, but I prefer the CSS method better.

Drag your form fields into two-columns in the form editor

The first step is to use the form editor to create the two-columns.

Change the form width to a percentage


Update .mktoFormRow, .mktoButtonRow and .mktoFieldWrap to 100%


Update the form fields to a percentage


Update the columns to a percentage width


Add some padding between the two columns


Center the submit button

If you want to center the submit button on the form you can add this CSS:


Add a media query to stack the columns on mobile

This example uses the same breakpoint as the default Marketo CSS. Feel free to change it based on your requirements.

The Final CSS

The final CSS for the two-column form.


Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 23/06/2020
    How to Use Pardot Form Handlers

    Pardot form handlers allow you to use your own forms to post your data to Pardot. A Form handler is a great alternative to use instead of Pardot iFrame forms. They allow you to fully customize the look of your form and submit data to more than 1 database. In this tutorial, you will learn how to create a form handler from scratch.

  • 05/03/2020
    How to Create a Better Date Picker Within Pardot Forms

    Want to be able to restrict the date range of a date picker within your Pardot forms? The default date picker with Pardot does not provide this option, but with a couple of lines of JavaScript, you can enhance the functionality of the date picker. In this tutorial, I’ll show you how to use the jQuery UI date picker within your Pardot form.

  • 09/10/2019
    Creative Ways to Spice Up Your Pardot Forms: Part 2

    The 2nd part of the form customization series is finally here! In part 1, I showed you how to implement the popular floating label technique and how to create searchable, user-friendly dropdowns. In this post, I will show you how to create a conversational, paragraph-style form and how to create a form on a single line.

8 comment(s)
  • Andrea

    30/01/2018 at 6:55 pm
    Reply

    Hello Jenna! Thank you for this awesome instruction. I've got an embedded, single input field Marketo form on my WordPress site, and I've been trying to figure out how to center that input field. The button is centered, but the field will not budge unless I use margins to push it over! Any ideas? Here's one of the pages where I'm using the form: https://3dplatform.com/other-materials/

    • Jenna Molby
      to Andrea

      31/01/2018 at 9:14 am
      Reply

      Hi Andrea, Adding this CSS to your form should center the input. .mktoForm .mktoRequiredField label.mktoLabel { display:none; } .mktoForm .mktoGutter::before { content:'*'; color:red; } .mktoFieldWrap { float:none !important; margin:0 auto !important; width:300px; } Cheers, Jenna

  • Sonali Jadeja

    25/01/2018 at 11:29 am
    Reply

    This is a great article! Thank you so much!! Has anyone tried 2 columns & 1 column field in the same form? I am trying to implement it where we capture first & last name in one row/two columns & email address in second row/1 column layout. Any inputs will be appreciated!

    • Jenna Molby
      to Sonali Jadeja

      25/01/2018 at 11:39 am
      Reply

      Hi Sonali, Yes, I've done that before. Send an email to [email protected] with a link to your page and I can help you. Cheers, Jenna

    • Jon Yang
      to Jenna Molby

      02/04/2018 at 1:11 pm
      Reply

      Hey Jenna! Thank you for the article but I am also trying to accomplish the same as Sonali. Could you assist?

  • Stephan

    29/09/2017 at 8:26 am
    Reply

    Can you please enhance the code for a three column form? What CSS needs to be added?

    • Jenna Molby
      to Stephan

      29/09/2017 at 2:23 pm
      Reply

      Hi Stephan, You would need to drag your fields into three columns within the Marketo form editor and then update the line of CSS for .mktoFormCol to around 33% instead of 50%. Hope that helps!

  • Tim Ball

    25/09/2017 at 9:35 pm
    Reply

    Thanks Jenna, This is exactly what i have been looking for, great article.

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.

Categories
Most Commented
Popular Posts