7 Replies Latest reply on Jul 19, 2016 9:14 AM by 2de3bb27c16fcca89bf7dd7f9cf18507535674a3

    Forms on Landing Pages - Responsive

    Christina Blackmon

      How can you make the forms that are built in Marketo and placed on our landing pages (that we host via WordPress) be responsive?

        • Re: Forms on Landing Pages - Responsive
          Sanford Whiteman

          It is better to give specific examples (dimensions and devices) of where the form is not responsive.

          1 of 1 people found this helpful
            • Re: Forms on Landing Pages - Responsive
              Christina Blackmon

              Thank you, my Webmaster found the answer she was looking for.

                • Re: Forms on Landing Pages - Responsive
                  Sydney Mulligan

                  Great, do you mind sharing what worked in case someone stumbles upon this post in the future looking for an answer to the same question? You should also mark the question as resolved.

                  1 of 1 people found this helpful
                  • Re: Forms on Landing Pages - Responsive
                    Brian Sparker

                    could your webmaster (or you) share please? I have the same question. thanks!

                      • Re: Forms on Landing Pages - Responsive
                        Tim Langlois

                        Marketo forms are responsive if the web page or landing page they are on are responsive. No changes are needed to the form itself.

                          • Re: Forms on Landing Pages - Responsive

                            All, I have been working on the form for a day now. Our site is 100% responsive. The form itself is not responsive because form fields in Marketo are set to only accept a fixed width. I have adjusted the rows and input fields to be 100% of the width at all times; however, what should work in an ideal world still does not work with the form I am styling. Below is the original code that I used. You can adjust the percentages to suit your needs. I am going to be using @media queries to adjust the form fields for specific screen sizes. That way I can have additional control on how the form is displayed on all devices. I can reply with a link to the final form design once I move it from dev to live.

                             

                            .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 {
                            
                                width:100% !important;
                            }
                            .mktoFormCol, .mktoFieldWrap {
                                width:100% !important;
                            }
                            
                        • Re: Forms on Landing Pages - Responsive

                          Below is the final coding I used on our landing page. View page: VHT Magic Kingdom | Exploria Vacations

                           

                          .HSform {background: #ef8b04;padding:10px;}
                          
                          .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 {
                              width:355px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:355px !important;
                          }
                          .mktoForm .mktoButtonWrap.mktoCleanGray .mktoButton {
                            font-family: Arial, Helvetica, sans-serif !important;
                            font-size: 15px !important;
                            color: #050505 !important;
                            padding: 10px 20px !important;
                            background: -moz-linear-gradient(
                            top,
                            #ffffff 0%,
                            #ffffff) !important;
                            background: -webkit-gradient(
                            linear, left top, left bottom,
                            from(#ffffff),
                            to(#ffffff)) !important;
                            -moz-border-radius: 4px !important;
                            -webkit-border-radius: 4px !important;
                            border-radius: 4px !important;
                            border: 1px solid #38b8b4 !important;
                            -moz-box-shadow:
                            0px 1px 3px rgba(000,000,000,0.5),
                            inset 0px 0px 2px rgba(255,255,255,1) !important;
                            -webkit-box-shadow:
                            0px 1px 3px rgba(000,000,000,0.5),
                            inset 0px 0px 2px rgba(255,255,255,1) !important;
                            box-shadow:
                            0px 1px 3px rgba(000,000,000,0.5),
                            inset 0px 0px 2px rgba(255,255,255,1) !important;
                            text-shadow:
                            0px -1px 0px rgba(000,000,000,0.2),
                            0px 1px 0px rgba(255,255,255,0.4) !important;
                          }
                          @media (max-width: 1550px) {.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 {
                              width:275px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:275px !important;
                          }
                          }
                          @media (max-width: 1220px) {.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 {
                              width:200px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:200px !important;
                          }
                          }
                          @media (max-width: 980px) {.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 {
                              width:650px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:650px !important;
                          }
                          }
                          
                          @media (max-width: 840px) {.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 {
                              width:500px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:500px !important;
                          }
                          }
                          @media (max-width: 650px) {.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 {
                              width:400px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:400px !important;
                          }
                          }
                          @media (max-width: 520px) {.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 {
                              width:280px !important;
                          }
                          .mktoFormCol, .mktoFieldWrap {
                              width:280px !important;
                          }
                          }
                          
                          1 of 1 people found this helpful