How do you add a form border and custom button in a marketo form? | Community
Skip to main content
N
Nate_Oosterhous
Level 7
March 24, 2017
Solved

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

  • March 24, 2017
  • 2 replies
  • 10549 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by mike-29

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.

2 replies

M
mike-29
Level 4
March 24, 2017

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.

N
Nate_OosterhousAuthor
Level 7
March 24, 2017

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

A
Anonymous
June 30, 2017

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:(

SanfordWhiteman
SanfordWhiteman
Level 10
June 30, 2017

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.

A
Anonymous
June 30, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...