Customize Submit Button CSS | Community
Skip to main content
November 3, 2014
Question

Customize Submit Button CSS

  • November 3, 2014
  • 2 replies
  • 1649 views
Hi,
The button presets for the form submit button are very limited. I want to change a couple CSS things, but I can't find a way to do it. Help!

Thanks!
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

November 3, 2014
In the Form editor, when you click on Form Settings you can then choose Form Theme. This shows you some basic form styling. At the top right of this screen is a little gear, which allows you to input custom CSS.

Here's how my buttons are styled.

#mktFrmButtons .buttonSubmit input#mktFrmSubmit, .mktoForm .mktoButtonWrap.mktoShadow .mktoButton, div.mktoButtonRow span.mktoButtonWrap.mktoShadow button.mktoButton {
background-color: #00a5dd;
border: 1px solid #0079a2;
border-radius: 5px;
color: #FFF;
display: block;
font-family: arial, sans-serif;
font-weight: 700;
font-size: 1.5em;
margin: 10px;
padding: 15px 0;
text-transform: lowercase;
width: 94% !important;}

div.mktoButtonRow span.mktoButtonWrap.mktoShadow button.mktoButton:hover{
  background-color: #0079a2;}
November 3, 2014
I added that in the custom css area and I don't think it's working. Nothing's changed.
Here's what I have. The top half works already, but the code you gave me hasn't changed anything. Note that I just copy/pasted yours in to see if it would work.

/* Add your custom CSS below */
#mktoStyleLoaded {
  /* css load detection, do not remove */
  color:#123456;
}

.mktoForm fieldset {
    
}
.mktoForm fieldset legend{
    
}
.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 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 {
  margin: 0 0 15px;
  padding:7px 8px;
  color:#000;
  font-size:25px;
}

.mktoForm input[type=text]:focus,
.mktoForm input[type=url]:focus,
.mktoForm input[type=email]:focus,
.mktoForm input[type=tel]:focus,
.mktoForm input[type=number]:focus,
.mktoForm input[type=date]:focus,
.mktoForm select.mktoField:focus,
.mktoForm textarea.mktoField:focus{
    
}

    #mktFrmButtons .buttonSubmit input#mktFrmSubmit, .mktoForm .mktoButtonWrap.mktoShadow .mktoButton, div.mktoButtonRow span.mktoButtonWrap.mktoShadow button.mktoButton {
    background-color: #00a5dd;
    border: 1px solid #0079a2;
    border-radius: 5px;
    color: #FFF;
    display: block;
    font-family: arial, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    margin: 10px;
    padding: 15px 0;
    text-transform: lowercase;
    width: 94% !important;}

    div.mktoButtonRow span.mktoButtonWrap.mktoShadow button.mktoButton:hover{
      background-color: #0079a2;}