Referring someone new via a Marketo form (and attributing that referral to the person who submitted the form)

[MarianoAdunseCO]

Hi all,

As the title suggests, I would like a functionality that will allow users to submit a form referring a new person. When the form is submitted, a new record will be created within Marketo. Ideally I would like to do this without the use of JavaScript hacks (ideally I would prefer a webhook). I've searched, but I can't find any topics specifically covering this (I don't need to do anything more complicated than simply submitting a form that creates a new record (referee) and updates an existing one (referrer)). Is this possible at all?

Thanks!

[Darshil_Shah1]

Well, it's pretty straight fwd if you do via JS - you can build a form that let's the referrer add data about themselves and also the referee - you can clear the referee details during the first form POST in the onSubmit() function (thereby submitting the referrer data only in form post 1), and in the onSuccess() function set the form field values for the referee and make an another POST (i.e., form submission for submitting the referee data). You can use hidden field(s) to add data about the referee while submitting the form for referrer - for attribution.

Just to clarify, both the form submissions are regular/usual Marketo form submissions - i.e., a new lead will be created if not already present in the database, else an existing lead with the matching email address will be updated.

Before submitting the form again for the referee - JS can take care of clearing out the previously created cookie as well, as per this Marketo dev page.

You can refer Sandy's sample script to pull this off here (it's pretty sleek and straight fwd).

[MarianoAdunseCO]

I see @Darshil_Shah1 . So in the example, you provided, the "FA's Email" populates to a hidden form field (on the same form) when the form is submitted to the visible form field value that corresponds to it (in the hidden field)? Just so I'm understanding this correctly (I believe I am but would like to verify). 

In which case, If I needed to add a First Name, Last Name, Country and Company for the referee, I would need to do this:

'Email': originalValues['Email_Address_2__c'],

'FirstName': OriginalValues['Email_Address_2__c'],

'ComapnyName': OriginalValues['Email_Address_2__c'],

Finally, I'm a little in the dark about this other aspect of the script... What do these numbers need to be populated with?:

MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 441);

And apologies to ask another set of questions - but what other aspects of the script need to be customised with values unique to your own form and LP?

Is that correct? And I'd assume the scripts would sit at layout template level...

[Darshil_Shah1 · Accepted solution]

---

@MarianoAdunseCO wrote:

I see @Darshil_Shah1 . So in the example, you provided, the "FA's Email" populates to a hidden form field (on the same form) when the form is submitted to the visible form field value that corresponds to it (in the hidden field)? Just so I'm understanding this correctly (I believe I am but would like to verify). 

In Sandy's script the "FA's Email" field's value is not appended to any hidden field during the referrer's form submission (i.e., during the form submission 1), but this can be easily done with the formObject.setValues() function (we would need the API name of the field(s) to which the referee's email and/or other details need to be added during referrer form submission).

In which case, If I needed to add a First Name, Last Name, Country and Company for the referee, I would need to do this:

'Email': originalValues['Email_Address_2__c'],

'FirstName': OriginalValues['Email_Address_2__c'],

'ComapnyName': OriginalValues['Email_Address_2__c'],

You need to replace the 'Email_Address_2__c' with the actual fields' API names being used in the form - you can find the API names of the fields from the field management, read about it here.

---

Finally, I'm a little in the dark about this other aspect of the script... What do these numbers need to be populated with?:

MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 441);

---

Well, these are not just random characters - these are the baseUrl, munchkinId, and formId, respectively you can look for these values in the Embed Form code - go to Marketo > Navigate to and select the Marketo form you're gonna use for this project > Select Form Actions in the right Pane > Click on the Embed Code - A dialog box will appear with the script to embed the form - this script will have MktoForms2.loadForm("<baseUrl>", "<MunchkinId>", <formId>) - you need to plug values you see here into the actual script. 

And apologies to ask another set of questions - but what other aspects of the script need to be customised with values unique to your own form and LP?

Is that correct? And I'd assume the scripts would sit at layout template level...

---

This is a starter script with the recipe for the multiple form submissions, clearing cookies after first submission, assigning apt referrer and referee data during each of the form submissions - you need to update the API names of the fields you're using in the form, instance base URL, munchkin-id, form-id, and the form-js script address.

This can be added at the LP/webpage level unless all the LPs you're gonna create from the template need to reference this script.

[SanfordWhiteman]

FYI much newer and improved code is at

MktoForms2 :: Referral v2.0.2

[MarianoAdunseCO]

This has worked brilliantly @Darshil_Shah1 @SanfordWhiteman 

Thank you both. 

[Darshil_Shah1]

Awesome, very cool!

[MarianoAdunseCO]

Hey @Darshil_Shah1 , as it turns out, I was wrong - the code didn't actually work. I (without my realisation) actually completed the form twice - so in fact, it didn't work as perfectly as I expected....

Here's a screenshot of the exact code I used. I've annotated the bits I changed (relevant to my own form). I'm really not sure what I'm missing here? I put this code in the layout template (after the body tag) - sorry to point out the obvious, just want to make my process clear.

Also ideally I would like to be able to use the form at the template level instead of adding it to the landing page (by adding the form in the LP wizard) (the first red annotation in the screenshot). Can I simply strip that code out? I know you said I can do this, but when I use the code as it is below (and then create a landing page based on the template), the form is invisible. And this is even after I moved the form tag to the body of the HTML (in the template).

Hopefully this has been descriptive enough! Sorry about the confusion. The code's just driving me nuts. Could you perhaps add some comments to the original code you provided on what to do to make this work? Also - I'm not sure why but the field for "Email" isn't showing up twice on the landing page (one for referrer and one for referee)..

I know I'm screwing up somewhere really obvious so I really appreciate your patience with this.

[Darshil_Shah1]

Thank you for describing your issue in detail - this certainly helps a lot (having a clear understanding of problem most of time translates to winning half of the battle)!

Well, you need to have a separate field to capture the Email Address of the referee  - in Sandy's example the referee's email address is captured in the "FA's Email" field which is different from the "Your Email" field used to capture the referrer email address - you would need to add two different fields on the form for one for referee's and the other for referrer's email address.

I added comments for your reference in the whenReady function:

MktoForms2.whenReady(function(form) {
    var originalValues;
    
    form.addHiddenFields({'_mkt_trk':''});

    form.onSubmit(function(form) {
/* First form submission when visitor clicks submit button on form - form submitted for the referrer lead*/

      originalValues = form.getValues();
      form.setValues({
        'Email_Address_2__c': '' 
/* Replace 'Email_Address_2__c' with the API name of the Referee's Email Address field. Also, if you would like this field's value to appear on the Referrer's record in Marketo for the purpose of attribution - you can omit this line of code, and the setValues function too, if you're not resetting any of the fields on referrer form submit*/

      });
    })

    form.onSuccess(function(vals, thankYouURL) {
      this.onSuccess(); // clear onSuccess for 2nd run
      this.setValues({
        'LastName': '',
        'FirstName': '',
        '_mkt_trk': '',
        'Email': originalValues['Email_Address_2__c'] 
/*Replace the API name of the Referrer's email address field in the Key (Email) and Referee's email address field in the value, i.e., replace 'Email_Address_2__c' with the referee email field's API name in the originalValues['Email_Address_2__c']*/

      });
      this.submit(); // send it again - this will submit the data for the referee
    }.bind(form));

  });

---

Also ideally I would like to be able to use the form at the template level instead of adding it to the landing page (by adding the form in the LP wizard) (the first red annotation in the screenshot). Can I simply strip that code out?

Well, the <form id="mktoForm_<insert-form-id>"></form> is essentially the container for the form - if you remove this you won't have any container to load the form on the web-page and that is the reason you didn't see the form when you removed it - put the form element (i.e., <form id="mktoForm_<insert-form-id>"></form>) where you would like to show / display the form on the webpage. I don't think I said to remove the form container.

Also. if haven't already, I would suggest changing the base-url in the script with your Marketo instance's - you can find the base url in the embed form script of the form that you referred for the form-id and Munchkin-id. If you see my earlier comment - I've added a skinny about the base-url.

Let us know how it goes, or in case if you have questions. 🙂

[SanfordWhiteman]

Strongly recommend the newer code in my CodePen as it provides a much smoother UX thanks to the "freeze" feature.