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

[Anonymous]

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.

[SanfordWhiteman · Accepted solution]

You left out the fact that you're customizing the checkbox with a checkbox-like image in a <label>. The checkbox is not itself disabled, it's clicking the <label> that's the cause of this behavior.

I described this situation and its solution(s) in this blog post: http://blog.teknkl.com/multiple-forms-multiple-times/

[Anonymous]

Thanks, Sanford, for providing the link to your post! That's really helpful.