Help! How to use Forms 2.0 on Marketo Guided Landing Page? | Community
Skip to main content
MannyP98
MannyP98
New Participant
April 8, 2024
Solved

Help! How to use Forms 2.0 on Marketo Guided Landing Page?

  • April 8, 2024
  • 2 replies
  • 5022 views

Hello fellow community!

 

I have been looking at a lot of resources lately around forms 2.0 as we have a few use cases where we'll want to assign certain hidden field values at time of submission such as the referrer, current URL, and conversion date. 

I haven't been able to find a resource to explain how to add the code in a Marketo LP. I understand that I can embed the form in a script on my WordPress site using an HTML block plus something like: 

MktoForms2.whenReady(function(readyForm){ readyForm.onSubmit(function(submittingForm{ submittingForm.addHiddenFields({ LastFormURL: document.location.href }); }); }); MktoForms2.whenReady(function(readyForm){ readyForm.addHiddenFields({ lastReferrerURL: document.referrer }); });


(Shoutout to @sanfordwhiteman for the script!) 

---


What I am stuck on is how to make this work on a Marketo Guided Landing Page. I can't think of a way to add an html block to the actual page and updating the template code did not seem to work on a test.

Additionally, for something like writing the datetime of the form fill, what is the best way to achieve that?

Thanks in advance! 

Manny 🙂

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

Please remember to use the Syntax Highlighter (“Insert/Edit Code Sample”) so your code is readable.

I edited your post this time.

 

Custom JS API form behaviors need to be loaded after the form2.min.js library, since they depend on the global MktoForms2 object.

 

On Marketo LPs, the easiest way to accomplish this is by putting them just before the closing </body> tag, since the form embed can appear anywhere in the body. There’s a fancier way to ensure MktoForms2 loads first (I’ve blogged about it before) but this is easiest.

 

You can use an editable section on the template to hold all the Forms 2.0 JS code. Even better is storing the code in a JS file in Design Studio and just loading that remotely as a <script src>.

2 replies

Dave_Roberts
Dave_Roberts
New Participant
April 9, 2024

I agree with Sanford here -- my preferred way to handle this is to include a <script> tag just before the closing </body> tag on the template. The script file is then loaded into Marketo's Design Studio so that you can download/edit/replace the file to make changes in the future without needing to make changes to the template which will kick all you LPs into "Approved with Draft" mode until they are reapproved to take any updates made at the template level.

 

My setup usually looks something like this:

<body> <!-- ... all of your other HTML goes here ... --> <!-- custom global JS file --> <script src="https://your.domain.com/rs/###-XXX-###/images/custom.js"/> </body>

Create a new file called "custom.js" and load that up into Design Studio. Then you can update that file as needed and use the Replace Image/File functionality to update it seamlessly.

NOTE: Marketo recently started adding a version parameter to the URL and I'd recommend removing that if you want to use a setup like this. For example, after you load "custom.js" to Marketo, you might see the URL show up something like:

https://your.domain.com/rs/###-XXX-###/images/custom.js?version=0

 Just remove the "?version=0" so that it matches the example in the top box.

 

Another approach that I've used in the past is to create a Text Variable and place that at the end of the document, just before the closing body tag. This'll allow you to load HTML just before the closing body tag, but on a page-by-page basis (locally) rather than globally (all pages on the template).

 

An example of that might look something like this:

<head> <meta class="mktoString" id="CustomHTML" mktoName="Custom HTML" default="" allowHtml="true"> </head> <body> <!-- ... all your other HTML goes here --> <!-- [CustomHTML] for "local" access (per LP) *works best before closing body tag --> ${CustomHTML} </body>

If going this route you'd just place the <script> tag into the Variable within the Landing Page editor. In this way you can manage different script(s) on different pages if for whatever reason you'd rather them load locally without needing to draft the template.

 

 

MannyP98
MannyP98Author
New Participant
April 9, 2024

Thanks for the feedback @dave_roberts & @sanfordwhiteman!

I still think I am doing something wrong, might be something super small and simple but I'm just a bit stuck.

I tried both approaches, firstly placing the following script:

 

<script>MktoForms2.whenReady(function(readyForm){readyForm.onSubmit(function(submittingForm){submittingForm.addHiddenFields({LastClickLandingPage:document.location.href});});});</script>

 

At the end of the template code before the closing </body> tag.
 
When I submitted a test on the form, I'm not seeing that the value for the field 'Last Click Landing Page' is updated from the hidden field in the script. However I do see the correct URL value for it in the form activity:

Is my field named wrong in the script? The API name is 'gaconnector_Last_Click_Landing_Page__c'

I proceeded to try the second approach from Dave and inserted an HTML block in the template that references the .js script file in DS.

This time I also added test UTM parameters to see how the other hidden fields on the form were behaving. What I got in return were correctly updated UTM parameters but this time last click landing page didn't even show up in from activity nor did the field get updated.


Thanks! 🙂


SanfordWhiteman
SanfordWhiteman
New Participant
April 9, 2024

Make sure you’re using the SOAP API name of the field (a.k.a. the Forms API name, they’re the same).

    SanfordWhiteman
    SanfordWhitemanAccepted solution
    New Participant
    April 9, 2024

    Please remember to use the Syntax Highlighter (“Insert/Edit Code Sample”) so your code is readable.

    I edited your post this time.

     

    Custom JS API form behaviors need to be loaded after the form2.min.js library, since they depend on the global MktoForms2 object.

     

    On Marketo LPs, the easiest way to accomplish this is by putting them just before the closing </body> tag, since the form embed can appear anywhere in the body. There’s a fancier way to ensure MktoForms2 loads first (I’ve blogged about it before) but this is easiest.

     

    You can use an editable section on the template to hold all the Forms 2.0 JS code. Even better is storing the code in a JS file in Design Studio and just loading that remotely as a <script src>.

      Terms & ConditionsAccessibility statement

      Loading footer...