Multiple "Form in Background" Submissions from a Page?

[Anonymous]

Fighting through the limitations of the Marketo form builder, I was thrilled to find this:

http://developers.marketo.com/blog/make-a-marketo-form-submission-in-the-background/

Simple, elegant, and it works without doing up another half a website of inconsistent CSS to cover every single form.  

SOAP and REST APIs work too, but require lots more code too.  The Munchkin API works too, but has virtually no documented features - associateLead adds someone to the system + nothing useful at all.

Then I realized I want multiple forms on a page.  That doesn't work because it assumes the wrong form.

As I look at this line, I realize there has to be a way to reference specific forms, instead of just the generic catch-all:

var myForm = MktoForms2.allForms()[0];

How would somebody reference individual forms using this method? 

[SanfordWhiteman · Accepted solution]

Question should actually be in Products​.  "Community" in this case means the Marketo Nation website, and yes it is confusing.

Anyway:

MktoForms2.getForm(12345)

(I wouldn't say SOAP or REST "work" since they provide an easy DoS attack against not only forms, but all your integrations.)

[Anonymous]

Thanks Sanford. 

To the first point, I wasn't at all sure where to put this (certainly welcome a mod to relocate).

To the second point, that's exactly what I was looking for, worked like a charm. 

And to the other APIs; I'm loving the SOAP/REST actually, though yes, got to sanitize data and mitigate brute force.  Currently I only sync with it on CRON, so concern for exploits is minimal. 

Munchkin frustrated me out of 1.) No way to associate a program/list that I could find and 2.) You need to generate an SHA1 hash, which can be done all client-side, but to do conceal the API secret, you need to process server-side anyway.. so then - what's the point?  May as well use SOAP or REST with a much more robust function library.  Of course, I'm clearly a bit new here, I could be wrong on either point.

[SanfordWhiteman]

Munchkin frustrated me out of 1.) No way to associate a program/list that I could find and 2.) You need to generate an SHA1 hash, which can be done all client-side, but to do conceal the API secret, you need to process server-side anyway.. so then - what's the point?

Munchkin associateLead is for situations where a 3rd-party server, such as a CMS, has authenticated, or otherwise trusts, the session user. So you'd have a server running under these circumstances on which you can securely generate the hash.  You can also generate hashes offline and supply them to 3rd-party mail providers to allow for clicks and resultant web sessions to be tracked: there's no other technology that can do this as simply and securely.

I understand that the REST and SOAP APIs can be exciting. I was there once myself. But they're just not business-ready -- let alone enterprise-ready -- for apps that face individual, unmetered end users (that is, non-batched operations). You have 10,000 API calls shared across all of your integrations.This isn't a question of brute force: with legitimate use alone, traffic easily overruns this aggregate limit, disabling mission-critical integration spokes both in and out.

Adding malicious use (it's child's play to trickle in 10,000 calls) makes the situation even less tenable. Even if the limit were upped to 100,000 the message would still be the same. Consider that Marketo's market-tested limit for form posts from a single IP (they have taken into account NATed requests and traffic spikes) allows 43,200 posts per day.  If you implemented that real-world limit, by the 3rd unique IP address all your calls can be vacuumed away.

[SanfordWhiteman]

The Munchkin API works too, but has virtually no documented features - associateLead adds someone to the system + nothing useful at all.

It upserts the lead and lead fields as well as associating the Munchkin session, and does so far more efficiently than a form post (albeit with no error/success detection unless you build it in).  It isn't the greatest, but I don't know why you'd say it does nothing useful.

[Jaime_Servaes]

Hi!  I'm trying to do the same thing but I need a bit more help, as I'm not an advanced programmer.

I have form from another system that I need to be the main form on my website, but I would like to have a hidden Marketo form to also track in marketo who submitted this form.

I've created the empty Marketo form, and added it to the code of the Main Form code.  But now the form doesn't do anything. I'm thinking I haven't placed the Marketo form correctly into the other form.  So here is all the code, I've bolded the Marketo form and API that I added. Also the Main Form had javascript as well so I want 100% sure where to place the Marketo API code.

<form name="FeedBlitz_4f54e96b4c6211e790f6002590728cc9" style="display:block" method="POST" action="https://app.feedblitz.com/f/f.Fbz?AddNewUserDirect"> Enter your Email:

<input style="display:none" name="EMAIL" maxlength="64" type="text" size="25" value="">

<input name="EMAIL_" maxlength="64" type="hidden" size="25" value="">

<input name="EMAIL_ADDRESS" maxlength="64" type="hidden" size="25" value="">

<input name="FEEDID" type="hidden" value="890392">

<input name="cids" type="hidden" value="1">

<input name="PUBLISHER" type="hidden" value="32751403">

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

<form id="mktoForm_1305" style="display:none"></form>

<script>MktoForms2.loadForm("//app-sj19.marketo.com", "986-XKR-909", 1305);</script>

<input type="button" value="Subscribe me! &raquo;" onClick="FeedBlitz_4f54e96b4c6211e790f6002590728cc9s(this.form);">

</form>

<script language="Javascript">function FeedBlitz_4f54e96b4c6211e790f6002590728cc9i()

  {var x=document.getElementsByName('FeedBlitz_4f54e96b4c6211e790f6002590728cc9');for(i=0;i<x.length;i++){x[i].EMAIL.style.display='block'; x[i].action='https://app.feedblitz.com/f/f.Fbz?AddNewUserDirect';}}

  function FeedBlitz_4f54e96b4c6211e790f6002590728cc9s(v){v.submit();}FeedBlitz_4f54e96b4c6211e790f6002590728cc9i();

var myForm = MktoForms2.getForm(1305);

myForm.addHiddenFields({

"Email":"EMAIL"});

myForm.submit();</script>

[SanfordWhiteman]

You definitely cannot nest <form> tags like that!  The placement of the tags has nothing to do with submitting the values from form A using the Forms2 API.  The link between the forms is only via JS: you must hook the submit (or, much better, the post-submit success, since you want to make sure that the form actually was submitted and didn't fail validation) of custom Form A, map the values to Marketo field names, then trigger the Marketo form.submit().

[Jaime_Servaes]

Unfortunately I'm not that much of a programmer and you lost me at linking the form via the JS through the post-submit.  Can you provide an example of what I should do?  I don't have access to a programmer to help me.

[SanfordWhiteman]

A example without altering your original HTML markup (though obvs. altering the JS) would be like so: MktoForms2 :: Custom Form to MktoForms2 /nation/36943

You can also see some pointers and another demo in my recent comments here: Make a Marketo Form Submission in the background

But to be honest, you really should have a programmer who owns code like this if you put it in production. It's not fragile if left completely alone, but if you don't know JS at all it's easy to break it by updating the FeedBlitz side, trying to add fields to the Marketo side, etc.

[Jaime_Servaes]

Thank you for your help. I agree that I shouldn't be trying to create or modify scripts that I'm not familiar with, but unfortunately I don't have access to a program and this was needed quickly.  I owe you one!