AnsweredAssumed Answered

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

Question asked by e9f3c94dbb7d8a185550f078cc0c43a02cca44c1 on Feb 15, 2018
Latest reply on Feb 16, 2018 by e9f3c94dbb7d8a185550f078cc0c43a02cca44c1

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.

Outcomes