complete guide to recaptcha

[Naimish_Dave]

Hi,

I want to implement reCaptcha on test landing page and i am following below reference url :

https://medium.com/@anulals/google-recaptcha-in-marketo-forms-b992fc30d000

My Questions as below : 

1. In this article one of the step is mentioned “Now we need to create a flow to perform operations like add to lead list or send emails etc”. May i know where we should create this?
2. That webhook and flow, when it will execute? is it at the time of before insert record in marketo?
3. In my marketo account already everything is configure, even marketo records are sync with salesforce so is it any specific action require for this? like i need to sync only those records which are non-spam record?
4. If i have implement on test landing page for testing purpose so is it impacted to existing marketo forms or existing setup?

Thanks in Advance...

[SanfordWhiteman]

cdpn.io and codepen.io both need to be allowed depending on how you view the page (IFRAME/Debug mode).

[Zach_Bollinger]

Good news! I added the codepen domains and the recaptcha worked! Thank you for the help there. 

Bad news, I do not know where we need to add the javascript in the form. I talked with our site builder and he said that he is not able to edit the JS of the wordpress site.

Have you or anyone run into this issue before? 

[SanfordWhiteman]

It’s somewhat possible to embed the external JS within the form (see my post on embedding custom form behaviors in a Rich Text Area) but I really don’t like to do it that way. Why is he unable to add a new script block to the WP site?

[Zach_Bollinger]

I believe his response was that the JS for our embedded form pulls from Marketo. He sent me some attachments of our setup, and the issue.  I also have our site url if you need it. 

 

Say we need to create a new script block in Wordpress, does the JS in codepen do the job or do we need to create a script akin to this product discussion.  https://nation.marketo.com/t5/product-discussions/recapture-v2-v3-implementation/m-p/115673  

I also did look over your rich text token idea, and agree with you on it. 

[SanfordWhiteman]

---

@Zach_Bollinger wrote:

I believe his response was that the JS for our embedded form pulls from Marketo. He sent me some attachments of our setup, and the issue.  I also have our site url if you need it. 

Say we need to create a new script block in Wordpress, does the JS in codepen do the job or do we need to create a script akin to this product discussion. 

---

The JS in the Pen is all you need. I don’t see why he can’t add another <script> under the existing <script> and <form> elements — that’s just a general-purpose injection area.

[Zach_Bollinger]

Got it! We have added the JS into the code block, but we noticed that the v3 icon/badge is not showing up on the webpage. Should be worried about this issue? 

Apart from that our webhooks and forms work beautifully. 

[SanfordWhiteman]

It’s possible that you have some CSS styles which inadvertently hide the badge. If you link to the page we can see.

[Zach_Bollinger]

That sounds right from what I've researched. Here is the link to the page: https://wpprod.biltd.com/contact-us/ 

Thanks,

[Zach_Bollinger]

Any luck? @SanfordWhiteman If not, there is not much to worry about!

[ntagoe]

Hi @SanfordWhiteman 

Never mind my previous post, I tried out a multitude of things and finally figured out what the problem was. Apparently I had to include the non www. version of my companies domain in the google reCAPTCHA Admin settings.

Thank you!

[Cathy_Danahy]

@SanfordWhiteman - I watched your video and followed along as best I could.  All this is new to me.

I copied your code from "MktoForms2 :: reCAPTCHA v3 v1.1.2"

HTML:  Pasted in my Form Embed Code

JS:  Updated the API Key to mine.

When I tested the form I got the following error:

Referred from Pen TEST reCAPTCHA v3

What happened?

A link in this Pen has a missing `href` value, or this Pen is trying to change the document.location more details

Take heart, you can just go back. Refresh the Pen to return to the previous page.

What should I have done differently?

[SanfordWhiteman]

What’s your CodePen URL?

[Cathy_Danahy]

Thanks @SanfordWhiteman for looking at this for me.

TEST reCAPTCHA v3 (codepen.io)

Form: TEST-reCAPTCHA v3

Embed code: 

<script src="//app-ab04.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_2818"></form> <script>MktoForms2.loadForm("//app-ab04.marketo.com", "769-JYP-784", 2818);</script>

Site Key:  6LeZzaEdAAAAAEJXii6QILApb_Rlivw9T7oUDfae

[SanfordWhiteman · Accepted solution]

You can’t put HTML tags in the JS pane in CodePen (it’s already wrapped in a script tag automatically). See https://codepen.io/figureone/pen/be5e575f969e56069a362508d8eef7f4?editors=1010

[Cathy_Danahy]

Thanks!  I was finally able to get this to work.

In your video you added the 2nd Webhook.  Where should the 2nd Webhook be added?

My next step will be to add the JS to my Marketo Landing Pages.

[SanfordWhiteman]

What’s the “2nd” webhook for in this case (I don’t remember the exact sequence in my video)?

[Cathy_Danahy]

2 Webhooks:

Google reCAPTCHA v3 Verify v1

• Response > reCAPTCHALastUserFingerprint

Google reCAPTCHA v3 Verify v2

• error-cods(0) > reCAPTCHAServerErrorCode
• success > reCAPTCHALastServerSuccess

Not yet success in finding where to add the JS to my Landing Page, created using a custom guided template.

[SanfordWhiteman]

There’s only one webhook used to verify reCAPTCHA fingerprints.

I don’t understand that first one. The fingerprint value is fed from the client (browser), not mapped in a Response Mapping.

[StephH]

Would be really good to have this guide or do you have any other available information that can support me setting up recaptcha  for my Marketo forms please? 

[Naimish_Dave]

ok thanks a lot. once you post for V3 let us know.

thanks..