How To Style A Marketo Form Like A Pro

In:

Marketo offers 7 themes that you can use for your forms, but what if you want your form to match your branding? You can add your own CSS style to match your brand, however, this is very difficult because Marketo adds their own CSS classes and inline CSS. Here is how you can style your Marketo form like a pro.

Adding Custom CSS

Before we dive into some tips and examples, it’s important to know how to update the custom CSS within Marketo. Navigate to the form and open up the form editor. Click on Form Settings > Form Theme > Edit Custom CSS this is where you can paste in your own CSS.

marketo-form-styling-edit-custom-css

Choosing a default theme

Marketo requires that you select one of their themes to start. Changing themes will affect the CSS as well as the structure of the HTML. For this tutorial, I will be using the “simple” theme which is the default theme when you create a new form.

marketo-form-theme-settings

Form Preview

Here’s what the form looks like with the default Marketo styling.

marketo-form-non-styled

The structure of a Marketo form

The typical HTML stucture for a text field in Marketo looks like this:

Almost all of the classes you see already have CSS properties attached to them, so in order to use your own styling within the form all those CSS properties need to be overridden with new ones.

Unbold the Label

By default, any fields that are marked as “required” will have labels that are bold. To override this you can add this piece of code.

marketo-form-not-bold

Responsive form fields

Field widths are set to a fixed width, to override the set field widths you can add a percentage width like this.

The mktoOffset

Above each form field there is a div with the class of mktoOffset. This DIV is used to control the vertical spacing of the form fields. The default CSS looks like this.

You can override the height and width by using this CSS

Center the Submit Button

The submit button is wrapped in a SPAN with an inline CSS style for margin-left. In order to center the submit button, the first thing you need to do is override the margin-left property and set it to 0px.

The submit button is also wrapped in a DIV with the class named mktoButtonRow. There is a CSS property to align the text to the left, so we need to override that and change it to CENTER. There is also no width on the DIV, so a width will need to be added.

Change the Button Style

To change the button style to match you brand, you will need to override the properties for .mktoForm .mktoButtonWrap.mktoSimple .mktoButton. Here are some examples of what that would look like

Full Width Button

Change the button background color

Remove the border from the button

Add padding to the button

Change the font size of the button

Fixing the radio buttons and checkboxes

If you have chosen to have the Marketo labels “above the form” instead of “to the left”, you might encounter an issue with the label for the radio buttons and checkboxes showing below the label.

marketo-form-checkbox-radio-fix

Add this CSS code to put the label and the checkbox/radio button beside each other.

marketo-form-checkbox-radio-fix-2

Questions?

Email me, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 07/07/2020
    How I Passed The Salesforce Certified Pardot Consultant Exam: Flashcards, Resources & Tips

    Are you already a Salesforce Certified Pardot Specialist? Do you have around 12 months or more of hands-on experience implementing and administering the Pardot Lightning App and Salesforce platform? The next step in your Pardot certification journey is to take the Salesforce Certified Pardot Consultant exam. In this post, I share how I prepared for the exam, what study resources I used and share the flashcards I created to pass the exam.

  • 01/07/2020
    How to Prevent Lead Source From Being Overwritten in Salesforce

    Creating a validation rule in Salesforce is a great way to restrict certain users from making updates to a particular field. Let’s look at how a validation rule can be used to restrict who can update the lead source once the lead source has a value.

  • 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.

16 comment(s)
  • Brie Edmonds

    25/09/2017 at 1:43 pm
    Reply

    This has been by far been one of the best tools I have been able to use to fake my way through Marketo. I am making it because of you and your easy to understand instructions on how to make things great. Thank you soo much!

  • Zofia Szyszka

    31/08/2017 at 7:13 pm
    Reply

    Hey Jenna, great article! Thank you, it helped me a lot! The only thing I can't seem to be able to target now are the rounded corners on a select box! So frustrating... Would you know how to make them square? Thanks! Zofia

    • Jenna Molby
      to Zofia Szyszka

      01/09/2017 at 9:34 am
      Reply

      Hi Zofia, Add this CSS to make the corners for a select box square. select {-webkit-appearance: none; -webkit-border-radius: 0px;}

  • Jacob Brissee

    10/08/2017 at 7:54 pm
    Reply

    This is interesting but I have an even more basic question: How do I get forms to center? I'm using a guided landing page template and the widget is wider than the form. I assume I can 100% it and margin:auto but I don't know what class to reference.

    • Jenna Molby
      to Jacob Brissee

      11/08/2017 at 9:12 am
      Reply

      Hi Jacob, You can reference the 'mktoForm' class like this form.mktoForm {margin-left:auto;margin-right:auto;}

  • Natasha M.

    06/03/2017 at 11:26 am
    Reply

    Hi , This post is very useful .I just had a question about the checkbox CSS .How can i have the checkbox to the left and label of the checkbox to the the right .

  • Mike Sherwood

    29/12/2016 at 11:44 am
    Reply

    This is really great. Thanks. Two questions: 1. It seems half the battle is finding out which classes to change. There is no documentation as far as I can see. How do you go about discovering the class names to select? 2. This is a pure css question. What is the difference between having a space between the class names and not? For example, the difference between this: .mktoButtonWrap.mktoSimple (no space between) and .mktoButtonWrap .mktoSimple (with space between) How are those different? thx, Mike

    • Jenna Molby
      to Mike Sherwood

      29/12/2016 at 12:18 pm
      Reply

      Hi Mike, so happy you found the post useful! I use Chrome DevTools to figure out which classes need be changed. You can find info on how to use Chrome DevTools here: https://developer.chrome.com/devtools. Without a space in a CSS selector, it's just like it's one class, when you have a space the CSS is applied in a hierarchy such that it looks for mktoSimple within the children of elements with mktoButtonWrap.

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