4 Replies Latest reply on Oct 20, 2015 5:35 PM by Sanford Whiteman

    Can you use one formid  multiple times on a page

      Hello All,

       

      I am trying to make a reusable js component the uses a marketo form thats embedded in the page through their js apis. I am taking the form and putting it in to a bootstrap modal and the modal is toggled using a link.

       

      Here is the html

      <div class="modal-form" data-form-id="1619" data-success-url="https://google.com/" data-redirect="true" data-form-result="blank" data-sucess-msg="false"> <a type="button" class="cta-button secondary-button" data-toggle="modal" data-target="#mktoForm_456-modal" > New Tab Redirect Form </a> <div class="modal fade" id="mktoForm_456-modal" tabindex="-1" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <div class="logo"></div> <h4>Test Form Title</h4> <button type="button" class="close x-button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true"> </span> </button> </div> <div class="modal-body"> <div class="modal-form-content" id="modal-mktoForm_1619-intro"> <h2>Secondary  Redirect in new tab</h2> </div> <form id="mktoForm_1619"></form> <div class="modal-form-content" id="modal-mktoForm_1619-chaser"> <p>Bye Bye.</p> </div> </div> </div><!-- /.modal-content --> <div class="modal-sucess-msg" id="modal-success-1619"></div> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div>

      Here is the js

      $('.modal-form').each(function () { var formModal = $(this); var formID = $(this).attr('data-form-id') || 1619; var componentID = $(this).attr('data-componentID') || ''; var formRedir = $(this).attr('data-redirect') || false; var formResult = $(this).attr('data-form-result') || "blank"; var formSucessUrl = $(this).attr('data-success-url') || ''; var formSuccessMsg = $(this).attr('data-sucess-msg') || false; MktoForms2.loadForm("//app-ab13.marketo.com", "754-FXO-315", formID, function (form){ form.onSuccess(function(values, followUpUrl){ formModal.find(".modal-content").fadeOut('fast'); if (formRedir == "true") { if (formResult == "blank") { window.open(formSucessUrl, '_blank'); formModal.find(".modal.fade").modal('hide'); } else { location.href = formSucessUrl; } } else if (formRedir =="false" && formSuccessMsg =="true") { formModal.find(".modal-sucess-msg").fadeIn(100).delay(5000).fadeOut('slow').delay(600, function(){ formModal.find(".modal.fade").modal('hide'); formModal.on('hidden.bs.modal', function () { formModal.find(".modal-content").show(); formModal.find(".modal-sucess-msg").hide(); }); }); }  return false; }); }); });

      One of the requirements is to use the same form (contact form) and configure it to have different success urls defined. So have multiple links, modals w/ forms, and redirects urls.

      So is there a way to define an alternate form tag id besides their mktoForm_<randomID>?