2 Replies Latest reply on Feb 16, 2018 9:08 AM by Emily Burnett

    2 Mkto forms on external landing page - CSS/JS question

    Emily Burnett

      On a landing page like this I actually have 2 forms and am using logic in our CMS to show one form OR another.  If type does not = webinar, show Form A. If type = webinar, show Form B. I am thus technically included 2 forms on the page using the full embed code, but only need to show one at a time.

       

      <script src="//app-ab19.marketo.com/js/forms2/js/forms2.min.js"></script>

      <form id="mktoForm_1234"></form>

      <script>MktoForms2.loadForm("//app-ab19.marketo.com", "123-ABC-321", 1234, function (form) {

          form.onSuccess(function(values, followUpUrl) {

              // Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl

              location.href = "/.../slug";

              // Return false to prevent the submission handler continuing with its own processing

              return false;

          });

      });

      </script>

       

      It's all working appropriately, except for the checkbox situation. On a page that loads Form B, you are unable to uncheck the box, I suspect because of the :checked CSS selector in the custom CSS I have in each form and it being overwritten by the first form selector?

       

      Any ideas on how to fix this or achieve the result another/a better way? I thought about trying to dynamically select the form using Javascript but am not sure how that would work with using a CMS/site selector or what the Javascript would look like.