2 Replies Latest reply on Nov 3, 2014 9:11 AM by f8392e6d87f3f4dcc363cc41af7fe059d3ef5661

    Customize Submit Button CSS

      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!
        • Re: Customize Submit Button CSS
          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;}
          • Re: Customize Submit Button CSS
            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;}