The first piece is just the <form> tag that basically creates a space on the HTML document for the form to live (of course, here the form would not be displayed). However, the second piece of code is Marketo Forms JS code that uses the Marketo form method addHiddenFields(values) to add the reqd. hidden fields dynamically on the fly as the background form itself is created w/o any fields in the Marketo form editor. The hidden fields you add to the form correspond to the Marketo fields in which you want to store the data submitted in the AEM form fields. Both the <form> tag and Marketo form JS go on the client side on the webpage.
var myForm = MktoForms2.allForms()[0];
myForm.addHiddenFields({
//These are the values which will be submitted to Marketo
"Email":"test@example.com",
"FirstName":"John",
"LastName":"Doe",
"FavoriteColor":"Blue",
"FavoriteSeason":"Spring"
});
myForm.submit();
You can have separate fields in Marketo to store each attribute like in the above script. Please note that the fields you add in the above script in the addHiddenFields() should already exist as custom/standard fields in Marketo. Forms 2.0 API uses SOAP API names of the fields, so make sure you use those in the script. Alternatively, if you don't want to create additional custom fields and want to keep it as generic as possible, then you can pass the form questions and responses coalesced in JSON/CSV format and post it to a single field (like Person Notes).
var myForm = MktoForms2.allForms()[0];
myForm.addHiddenFields({
//These are the values which will be submitted to Marketo
"Email":"test@example.com",
"FirstName":"John",
"LastName":"Doe",
"PersonNotes":"{'What is you favorite color?':'Blue','What is your favorite season?':'Spring'}"
});
myForm.submit();
.png)