SOLVED

How do you add a form border and custom button in a marketo form?

Go to solution
Nate_Oosterhous
Level 7

How do you add a form border and custom button in a marketo form?

Hi all,

See attached image for what I am trying to accomplish.

Question:

How do you add a form border and custom button/edits in a marketo form?  I can't figure out the proper CSS.  (Not a programmer)

Thanks!

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Michael_White
Level 5

Re: How do you add a form border and custom button in a marketo form?

Two things I can see -- the CSS you're using to select the button isn't working because the .mktoButton element isn't contained within a .mktoSimple class -- the correct targeting to use would be:

.mktoForm .mktoButtonWrap.mktoDownloadButton .mktoButton {

Also, there's a number of styles from your page/template's <head> that are setting values for background (among other things).  So I may have led you a bit astray earlier -- try switching background-color back to background, and see if the yellow color is applied.

View solution in original post

17 REPLIES 17
Michael_White
Level 5

Re: How do you add a form border and custom button in a marketo form?

Hi Nate,

You have options in terms of where exactly to put custom CSS to target forms -- you can do it at the form level (so that all pages with this form have the border/button), or at the template level (so that any form on a landing page created with that template has those styles) or on a single landing page as a one-off.

In terms of exactly how you'd do it, you can target the entire form with the .mktoForm class and add a border property, and the button with .mktoButton.

Nate_Oosterhous
Level 7

Re: How do you add a form border and custom button in a marketo form?

Hi Michael,

I have tried adding custom CSS in the form that people say works but it doesn't.  For example, I tried this: CSS to Change the Button on the Form .  Could you provide a some CSS that I should use to change the border or button?

Thanks

Nate_Oosterhous
Level 7

Re: How do you add a form border and custom button in a marketo form?

Here is my custom CSS.  The border is working great.  The button however still is left aligned and the css is not changing it.  I used this as a resource: How To Style A Marketo Form Like A Pro

/* Add your custom CSS below */

.mktoForm {

    border-style: solid !important;

    border-width: 2px !important;

    border-color: #c4d82d  !important;

    border-radius: 9px !important;

}

.mktoForm .mktoRequiredField label.mktoLabel {

    padding-bottom: 10px !important;

}

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField {

    width:357px !important;

    top: 19px !important;

    left: 0px !important;

    width: 350px !important;

    font-size: 20px !important;

    line-height: 25px !important;

    height: 42px !important;

    padding-left: 8px !important;

    padding-right: 8px !important;

}

.mktoFormCol, .mktoFieldWrap {

    width: 357px !important;

}

.mktoButtonWrap {

  margin-left:0 !important;

}

.mktoButtonRow {

  width:320px !important;

  text-align:center;

}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

  width:320px !important;

  background:#f8991d !important;

  padding:10px 20px !important;

  font-size: 28px !important;

}

Michael_White
Level 5

Re: How do you add a form border and custom button in a marketo form?

If I had to guess, I'd say it's probably the margin on the .mktoButtonWrap element you had here:

.mktoButtonWrap {

  margin-left:0 !important;

}

That's telling the button container to start all the way to the left of the form it's in.  Add a positive value there (or try setting it to auto), and you should see it move closer to the center.  Do you have a link to the form on a live page we could inspect?  Note that if/when you drag the position of the button in the form editor, that also applies some CSS that you may see pop up if any of your !important disclaimers get removed.

Nate_Oosterhous
Level 7

Re: How do you add a form border and custom button in a marketo form?

I got the button to center.  I was missing an "!important;"  Do you know why my button styling wouldn't be changing to what I specified in my custom CSS?  It still is the same default button for some reason.

Michael_White
Level 5

Re: How do you add a form border and custom button in a marketo form?

In this bit of CSS:

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

  width:320px !important;

  background:#f8991d !important;

  padding:10px 20px !important;

  font-size: 28px !important;

}

You'd want to change background to background-color.

Nate_Oosterhous
Level 7

Re: How do you add a form border and custom button in a marketo form?

Hi Michael,

Thanks for working with me on this.  I still can't get anything to happen with the button.  It stays the same as the default look.  Changing background to background-color as well doesn't change anything.  Not sure where to go from here.

Michael_White
Level 5

Re: How do you add a form border and custom button in a marketo form?

Can you share a link to your page?  It's always helpful to troubleshoot in a live environment...

Nate_Oosterhous
Level 7

Re: How do you add a form border and custom button in a marketo form?

Here is the page: http://pages.hexarmor.com/Webinar-Test_Test5.html

Below is the current form's custom CSS:

/* Add your custom CSS below */

.mktoForm {

    border-style: solid !important;

    border-width: 2px !important;

    border-color: #c4d82d  !important;

    border-radius: 9px !important;

}

.mktoForm .mktoRequiredField label.mktoLabel {

    padding-bottom: 10px !important;

}

.mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField {

    width:300px !important;

    top: 19px !important;

    left: 0px !important;

    font-size: 20px !important;

    line-height: 25px !important;

    height: 42px !important;

    padding-left: 8px !important;

    padding-right: 8px !important;

}

.mktoFormCol, .mktoFieldWrap {

    width: 300px !important;

}

.mktoButtonWrap {

  margin-left:0 !important;

}

.mktoButtonRow {

  width:280px !important;

  text-align:center !important;

}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {

  width:320px !important;

  background-color:#f8991d !important;

  padding:10px 20px !important;

  font-size: 28px !important;

}