6 Replies Latest reply on Sep 25, 2018 12:47 PM by Sanford Whiteman

    Form CSS help - Its not showing up on the page correctly.

    Taylor McCarty

      So I am not a coder in the least bit, but have played around and learned some HTML and CSS. All the devs I work with refuse to work or build within Marketo because they don't like it, so I have been forced to learn more. I am pushing to get a Marketo form used on a Instapage LP, so I can provide a better user experience with progressive profiling and form logic. So I managed to make my Marketo form look like the mockup from the designer. But when I embed the code into Instapage, the forms looks different. I am assuming it it something in the LPs CSS that is causing this, but I don't know what or how to fix it. I attached 2 images, 1 of how the form looks in Marketo's preview and the other how it looks embedded in the LP. Any help/insight is appreciated!

       

      Screen Shot 2018-09-24 at 12.28.02 PM.png

       

      Screen Shot 2018-09-24 at 12.27.53 PM.png

        • Re: Form CSS help - Its not showing up on the page correctly.
          Sanford Whiteman

          Without exception, you must provide URLs for questions of this kind.

            • Re: Form CSS help - Its not showing up on the page correctly.
              Taylor McCarty

              None of these are live, so there isn't any URL I can provide.

                • Re: Form CSS help - Its not showing up on the page correctly.
                  Sanford Whiteman

                  Then you're going to be on your own. You can't troubleshoot or adjust styles on a screenshot.

                    • Re: Form CSS help - Its not showing up on the page correctly.
                      Taylor McCarty

                      Ya I wasn't expecting anyone to dive into the code for me. More if anyone had encountered something similar and had some idea of a reason or if it was something simple in my form css that I could add to overwrite any possible CSS from the web page. I can at least post my form CSS.

                       

                      #mktoStyleLoaded {

                        /* css load detection, do not remove */

                        color:#123456;

                      }

                      .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{

                        -webkit-appearance: none;

                        background-color:#ffffff;

                        line-height:1.5em !important;

                        color:#000;

                        border:2px solid #f2f2f2 !important;

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

                        -moz-border-radius:10px !important;

                        border-radius:10px !important;

                        padding:0.2em 0.3em !important;

                        min-height:1em !important;

                        margin: 10px 10px 0px 0px !important;

                        font-size:16px !important;

                      }

                      .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{

                        outline:none !important;

                        border:2px solid #f2f2f2 !important;

                        color:#000 !important;

                        font-size:16px !important;

                      }

                       

                       

                      .mktoForm select.mktoField::-ms-expand {

                        display: none !important;

                      }

                       

                       

                      .mktoForm select.mktoField {

                        -moz-appearance: none;

                        text-indent: 0.01px !important;

                        text-overflow: "" !important;

                        padding:0.2em 22px 0.2em 0.3em !important;

                        background:#fff url(../images/arrow-down-bk.png) center right no-repeat !important;

                        font-size:16px !important;

                      }

                       

                       

                      .mktoForm.ie9 select.mktoField {

                        background: none !important;

                        padding:0.2em 2.3px 0.2em 0.3em !important;

                        font-size:16px !important;

                      }

                       

                       

                      .mktoForm div.mktoLogicalField {

                        border:1px solid transparent !important;

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

                        -moz-border-radius:10px !important;

                        border-radius:10px !important;

                        font-size:16px !important;

                      }

                       

                       

                      .mktoForm input.mktoField.mktoInvalid,

                      .mktoForm select.mktoField.mktoInvalid,

                      .mktoForm textarea.mktoField.mktoInvalid,

                      .mktoForm div.mktoLogicalField.mktoInvalid{

                        border:1px solid #8C0005 !important;

                      }

                       

                       

                      .mktoForm.mktoNoCheckedSupport select.mktoField,

                      .mktoForm.ie7 select.mktoField,

                      .mktoForm.ie6 select.mktoField {

                        background-image:none !important;

                        padding-right:0.3em !important;

                      }

                       

                       

                      .mktoForm textarea.mktoField{

                        resize: none !important;

                      }

                       

                       

                      .mktoButton {

                        border-radius:10px !important;

                        margin:10px !important;

                        font-size:16px !important;

                      }

                       

                       

                      .mktoButton:hover {

                        background color:#253746 !important;

                      }

                       

                       

                      .mktoAsterix {

                          color:#000000 !important;

                        }