Can you use one formid multiple times on a page

[Jeffery_Werner_]

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>?

[SanfordWhiteman]

The Forms 2.0 API only needs the form ID during initialization (after that, it uses a reference to the element).  So via cascading callbacks, you can remove the id attribute and create additional copies of the form on the page.  I put up this demo some months ago: MktoForms2 :: One Form, Two Renders - JSFiddle

[Jeffery_Werner_]

Sanford,

Thanks for your message. The second part of my requirement seems to be a problem where I will need to have different

form.onSuccess where I need to define different urls to go to or in some cases we will just show a success message

[SanfordWhiteman]

That's fine.  The demo already shows that the form events (onValidate, onSubmit, onSuccess) are unique to each rendering of the form.

[Stijn_Heijthuij]

Hi Jeffery,

Even though I'm not adept at Javascript I do have some experience in embedding forms on non-Marketo pages.

When we tried to add the same form ID multiple times on the same page we found that it was rendered twice. So as far as I know it's not possible to have a form with the same ID rendered twice on the page.

Alternatively you could try to have the forms in iFrames and then submit to the parent page: http://developers.marketo.com/blog/execute-form-submission-actions-from-iframe-to-parent-page/

It is however very easy to change the destination URL for a form. This can be defined by adding Javascript code to the embed code. Find the page here: Forms 2.0 » Marketo Developers

Let me know if you find a solution that works.