Centering a Form 2.0 Button?

Anonymous
Not applicable

Centering a Form 2.0 Button?

We're updating our website and using the new Form 2.0 editor to create the form that will be used as a conversion point on said site. So in this case, it's a MKTO form used on an external site, not a MKTO landing page.

Our issue is that we're having trouble figuring out how to simply center the form's submit button at the bottom of the form. We've seen how you can manipulate what looks to be a left margin by absolute pixels in the 2.0 editor by dragging the button left or right, but given that our site is responsive and the rest of the form is working responsively, we'd like the button to be responsive as well and center itself in the page like the rest of the content.

I've searched around and can't seem to find a solution. Here's the custom theme CSS our web dev messed around with, but he can't figure it out either. He says something keeps "overwriting" his changes:

/* Add your custom CSS below */

.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 select.mktoField,

.mktoForm textarea.mktoField {

box-shadow: none!important;

width: 300px!important;

}

form {

  width: 100%!important;

  font-family: inherit!important;

  font-size: inherit!important;

  color: inherit!important;

  max-width: 600px!important;

  margin: 60px auto!important;

}

label.mktoLabel.mktoHasWidth {

  width: 200px!important;

}

.mktoForm input.mktoField.mktoInvalid,

.mktoForm textarea.mktoField.mktoInvalid,

.mktoForm select.mktoField.mktoInvalid,

.mktoForm .mktoLogicalField.mktoInvalid {

border: 1px solid #30a7c1!important;

}

.mktoForm .mktoError .mktoErrorMsg {

    background-color: #30a7c1!important;

    background-image: none!important;

    border: 1px solid #30a7c1!important;

    -webkit-border-radius: 4px!important;

    border-radius: 4px!important;

    -webkit-box-shadow: none!important;

    box-shadow: none!important;

    color: #fff!important;

    font-size: inherit!important;

    text-shadow: none!important;

}

.mktoForm .mktoError .mktoErrorArrow {

    background-color: #30a7c1!important;

    border: 1px solid #30a7c1!important;

}

.mktoForm .mktoError .mktoErrorArrow {

    background-color: #30a7c1!important;

    border: 1px solid #30a7c1!important;

}

.mktoForm .mktoAsterix {

    color: #30a7c1!important;

}

.mktoForm .mktoFormCol {

    margin-right: 20px!important;

}

.mktoForm .mktoError {

    right: 9px!important;

    bottom: -43px!important;

}

.mktoForm .mktoButtonWrap.mktoShadow .mktoButton {

    background: #FC7A57!important;

    color: #fff!important;

  border: none!important;

    border-radius: 4px!important;

    padding: 5px 15px!important;

    text-transform: uppercase!important;

    font-size: inherit!important;

    box-shadow: none!important;

    background-color: #FC7A57!important;

    background-image: none!important;

  font-weight: 700;

}

.mktoForm div, .mktoForm span, .mktoForm label, .mktoForm p {

    margin-left: 0px!important;

}

.mktoButtonRow {

    margin-top: 10px!important;

}

4 REPLIES 4
Anonymous
Not applicable

Re: Centering a Form 2.0 Button?

I should mention that, we narrowed in on this section:

.mktoForm div, .mktoForm span, .mktoForm label, .mktoForm p {

    margin-left: 0px!important;

}

And tried everything from removing it to adding lines in place of the margin-left attribute such as those MKTO support suggested:

    margin-left: auto;

    margin-right: auto;

    width: auto;

Anonymous
Not applicable

Re: Centering a Form 2.0 Button?

Centering the button on forms 2.0 was an incredibly annoying hurdle for us as well -- especially as simply dragging the button will break in responsive.

I think what we ended up doing, was having to actually specify how far we wanted it from the left at various screen sizes.

For example, this is what we did for one of our buttons:

.mktoButton{

  width: 125px !important;

  height: 42px !important;

  position: relative !important;

  top: 0px !important;

  left: 195px !important;

}

@media only screen and (max-width:480px){

  .mktoButton{

  top: 0px !important;

  left: 0px !important;

  float: left !important;

}

etc.

Try it out, it's the only solution i've found to work

Ulf_Deeg
Level 3

Re: Centering a Form 2.0 Button?

Hi Justin,

try adding the following at the bottom of your CSS. (not cross browser-tested yet, but should work)

.mktoButtonRow {

  width: 100% !important;

  text-align: center!important;

}

Anonymous
Not applicable

Re: Centering a Form 2.0 Button?

I tried adding this to so many forms before I realized the Marketo "customize CSS" option on forms just wasn't working. You have to add it to to page / template CSS.