How to use your own Marketo form for lead collection, and then redirect viewers to a Consensus Demo.
How to setup Marketo Lead Passthrough
If you are setting up the Marketo integration for the first time, you have an option to select a workflow URL for "Redirect Marketo Form Leads" as shown below.
Copy it and save it temporarily somewhere (it will be used later during Marketo Form setup).
If you've already connected to Marketo, before we added the form lead redirect feature, then please contact your CSM and they can have the Consensus product team re-send the connection link. When you open the link, you can skip all first pages of the config wizard. On the last page you will receive your Consensus Redirect URL
for the Marketo Form.
Copy it and save it temporary somewhere (it will be used later during Marketo Form setup).
Setting up the Marketo form and custom fields
1. In Marketo UI navigate to Admin
→ Field Management
Check if you have already Consensus Redirect Url
and Consensus Demo Uuid
custom form fields. I
If one of both of them are missing, then click New Custom Field
.
2. Create consensusRedirectUrl
as shown below and click Create
.
NOTE: Its allowed to set API name as consensusRedirectUrl
or consensus_redirect_url
. Both ways are supported.
3. Create consensusDemoUuid
as shown below and click Create
.
NOTE: Its allowed to set API name as consensusDemoUuid
or consensus_demo_uuid
. Both ways are supported.
4. Navigate to Design Studio
-> Forms
→ Global Forms
.
Create new form (right click on Global Forms
folder -> New form
) or use existing one (on the screen below MN-GoConsensus-TestForm
).
5. In order to edit/set form click Create draft
.
6. Create form with a following recommended fields.
!!!NOTE: Only Email Address
field is required in this form (should be marked as required
in form.
!!!NOTE: Other fields are optional and any additional fields are also optionally can be added.
7. Add additional Consensus Redirect Field
.
8. Change field type to Hidden
and click edit Autofill.
9. In Default
value insert Consensus Redirect URL
(from the step 3 above) and click Save.
10. Similarly add additional Consensus Demo UUID
field and set default value as any Demo UUID
that you need to use. Click Save
.
11. Click Finish
→ Approve And Close.
12. Click Embed code
.
13. Copy formKey
and formId
as shown on the screen below.
14. Here is prepared JS Marketo Form snippet that is adapted/modified to be ready to handle redirection form successfully submitted Marketo form.
Before you copy this snippet, on line 3 and 4 update the formKey
and formId
with values that you saved from the previous step.
<form id="mktoForm"></form>
<script>
const formKey = '<<FORM_KEY>>'; // Example: '029-GWM-072'
const formId = <<FORM_ID>>; // Example: 1003
let mktoForm = document.getElementById("mktoForm");
mktoForm.id = 'mktoForm_' + formId;
let marketoScript = document.createElement('script');
marketoScript.src = '//' + formKey + '.mktoweb.com/js/forms2/js/forms2.min.js';
document.head.appendChild(marketoScript);
marketoScript.addEventListener('load', () => {
function openPostPage(data) {
let form = document.createElement('form');
document.body.appendChild(form);
//form.target= '_blank';
form.method = 'post';
const actionUrl = ('consensusRedirectUrl' in data) ? data.consensusRedirectUrl :
(('consensus_redirect_url' in data) ? data.consensus_redirect_url : null);
if (actionUrl === null) {
console.error('Redirect url is missing.');
return;
}
form.action = actionUrl;
for (let name in data) {
let input = document.createElement('input');
input.type = 'hidden';
input.name = name;
input.value = data[name];
form.appendChild(input);
}
form.submit();
document.body.removeChild(form);
}
MktoForms2.loadForm("//" + formKey + ".mktoweb.com", formKey, formId, function (form) {
form.onSuccess(function (values) {
openPostPage(values)
return false;
});
});
});
marketoScript.addEventListener('error', (ev) => {
console.log('Error on loading Marketo form file', ev);
});
</script>
Testing the Form Redirect (before using on your website)
1. Now this JS snippet can be used/inserted in any html page.
For the testing purposes and avoiding CORS issue on localhost it would be easier to test this snippet via an available JS playground (For example: JSFiddle - Code Playground ).
Navigate to JSFiddle - Code Playground → Insert your JS form code snippet → click Run
.
2. After it you will see a Marketo Form. Fill in form data and click Submit
.
3. After successful submission form will be redirected to an appropriate demo player link with the newly created lead uuid to allow for demolytics
Summary of Lead Creation and Redirect Workflow
After Submit
button is clicked on the form, [FORM REDIRECT] Redirect Marketo form leads workflow
workflow is triggered.
This workflow will:
-
validate incoming data (check if
email
is not empty) -
create new marketing public link in Consensus with the provided Demo UUID by making request to
POST api/integr/v1.0/marketing/createlink
-
create new lead in Consensus by making request to
POST api/integr/v1.0/marketing/createlead
-
and after it will redirect the viewer to
https://<<DEMO_PLAYER_URL>>.goconsensus.com/<<LINK_HASH>> ?p1=<<LEAD_UUID>>
Finally, in Marketo UI it’s possible to verify that new Lead was also created after successful form submission.