How do you add a form border and custom button in a marketo form? | Community
Skip to main content
Nate_Oosterhous
Level 7
Mar 24, 2017 2:20 PM UTC
Solved

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!

mike-29Accepted solution
Level 4
Mar 24, 2017 9:00 PM UTC

Here is the page: 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;

}


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 reply

17 replies

Anonymous
Jun 30, 2017 3:56 PM UTC

Hey all:

I am having a very similar problem and the Marketo support seems to be getting annoyed with me. All i want is to remove the additional green that happens when you click over the submit button and increase the Submit button text. I have tried it all and nothing seems to be helping. ADDITIONALLY- if there is a way to change the font color of the "select" for state and such that would be wonderful. I have more questions but I will start there and see what happens:) Thank you all so much in advance. This is such a headache:(

Translate
SanfordWhiteman
SanfordWhiteman
Level 10
Jun 30, 2017 4:04 PM UTC

Please open a new thread for these new questions (probably two new questions).

A thread can only be closed by its original opener, and only one answer can be marked Correct, so this is better for clarity and later searches.

Translate
Anonymous
Jun 30, 2017 4:08 PM UTC

Can do- thank you. I think I figured it out

Translate
mike-29
Level 4
Mar 24, 2017 2:48 PM UTC

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.

Translate
Nate_OosterhousAuthor
Level 7
Mar 24, 2017 4:30 PM UTC

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

Translate
Terms & ConditionsAccessibility statement

Loading footer...