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

[Nate_Oosterhous]

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!

[Michael_White]

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]

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]

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]

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]

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]

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]

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]

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

[Nate_Oosterhous]

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;

}