Load embedded form twice on the same webpage

[Valerie_Armstro]

Hello Community -

We are working on a blog redesign and are using an embedded Marketo form on our blog to sign up subscribers.  We want to have this form appear twice on the page, once at the top and at the bottom of the blog posting. However, when we do this, the form is duplicating in both places. 

Anyone know what is causing this and how to fix it? (our blog is hosted on ExpressionEngine).

Thanks!

[Pavel_Plachky]

Hi Valerie,

the embed code for a form looks like this:

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

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

<script>MktoForms2.loadForm("//xxx-xxx.marketo.com", "YYY-ZZZ-WWW", 1234);</script>

If you place this code on a web page twice, then you have two <form> elements with the same ID on the same page, which is invalid HTML, according to specifications. So unfortunately you should abandon the idea even if you could make it work.

To understand why the form is showing twice each time, here is what each line of the script does:

Line 1: Reads Marketo Forms2 library

Line 2: Creates an empty form placeholder

Line 3: Draws the form at the location you specified on line 2.

Since you have the same script in two places, then the line 3 is invoked two times. Each time the script runs, it searches the whole HTML document for the placeholder with the form ID. The script finds two such placeholders, and it draws the form in both places each times it runs. That is why you get 4 forms on the page.

I hope it makes sense.

Pavel

[Geoff_Krajeski1]

Valerie Armstrong

Pavel Plachky is correct in that you cannot have two  HTML elements with the same ID.

IDs must be unique for all items within your HTML.

The comment about the script is correct as well, per the double placement of the forms.

I would personally suggest you create two forms (clone the one), so that you can identify which area on the page is more successful (if you so desire), but this would also solve your issue in the printing.

[SanfordWhiteman]

You can have the same Marketo form twice on the same page, though.  I've provided the code to do this in the past.  And this can make management a lot easier, say if you want to use a form in both the header and the footer.

[Clinton_Gage3]

You might also consider doing the footer as a separate API insert, it can feed to the same program if desired.

We had a similar issue, and I split the inputs so we could measure who was using the run of site form in the footer versus the in page.

[SanfordWhiteman]

No need for multiple Marketo forms. Just set document.hash to the form that was submitted (#global, #single).

[Yoav_Guttman1]

what does this mean? where does one set this?

[SanfordWhiteman]

MktoForms2.whenReady(function(form){
form.onSubmit(function(form){
   document.location.hash = form.getFormElem()[0].getAttribute('data-form-placement-name');
});
});

Give your forms different local names:

<form data-form-placement-name="footer" ...

Then check for #footer or #header in the URL in the Filled Out Form trigger.  Or you could add the placement of the form as a hidden field.

[Anonymous]

Umm, .whenReady() isn't fired until *after* the form embeds on the page, and it embeds the same form a second time in the same form ID as the first one, in my experience. I haven't been able to do anything about that, yet, beyond writing code that manually moves the duplicate fields to a second form. Been trying to embed the same form in two different tabs of a page's tabbed interface, and it's not been working. As much as I hate duplication, the script work (locating the end of the first form, appending every child after that to the second form, etc.) wasn't easier than creating two identical forms, and it didn't leave me feeling secure that it would survive changes to the forms (or Marketo's own internal updates).

[SanfordWhiteman]

I already have multiple demos  that do this, like this one from 2 years ago:

     MktoForms2 :: Same Form Multiple Times