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;
}
.png)