How do I send the data to external API after a form is submitted on a landing page ?

Anonymous
Not applicable

How do I send the data to external API after a form is submitted on a landing page ?

I have a marketo form on another landing page. I need to hit another external API to send the form data when the form is submitted. Please let me know what is the way of doing this in marketo.

Tags (2)
12 REPLIES 12
Grégoire_Miche2
Level 10

Re: How do I send the data to external API after a form is submitted on a landing page ?

Hi Nitish,

Use a webhook, as per your other post earlier today (Call webhook on form submission ). This is the only mechanism in Marketo than enables Marketo server to call an external service.

You also could use some Javascript on your LP and the forms 2.0 API (Forms 2.0 » Marketo Developers ​) but this would be a client side integration (the call would be done from the visitor's browser).

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: How do I send the data to external API after a form is submitted on a landing page ?

Nitish, please provide details about this "external API."  There's no single correct answer here.  As Greg mentioned, you can use a webhook to call an external API from the server side. However, if the API is equipped for cross-domain communication, you can call it from the browser which is far more efficient (there is no reason to involve the Marketo server in the transaction, as it just creates a possible bottleneck).

Anonymous
Not applicable

Re: How do I send the data to external API after a form is submitted on a landing page ?

Hi Stanford, We want to directly feed a lead to our product 'ConnectAndSell' from Marketo form which in turn will dial the lead and will connect them to the users. Yes the API is equipped with cross-domain communication.

Grégoire_Miche2
Level 10

Re: How do I send the data to external API after a form is submitted on a landing page ?

Hi Nitish,

Then you will need to call the API from the browser, on form submit. This will be done using the Javascript Forms 2.0 API. In the line of

MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function(form) {

    // Add an onSubmit handler

    form.onSubmit(function(){

        // Get the form field values

        var vals = form.vals();

        // You may wish to call other function calls here, for example to fire google analytics tracking or the like

        // callSomeFunction(vals);

        // We'll just alert them to show the principle

        alert("Submitted values: " + JSON.stringify(vals));

    });

});

-Greg

Anonymous
Not applicable

Re: How do I send the data to external API after a form is submitted on a landing page ?

Gregoire - Normally in Javascript we have AJAX call which takes API url as the parameter. In this case how will I hit the API I have to ? The example you mentioned above I found in the Product docs. Since it does not tell how to hit the external API it is not that helpful. Additionally I need to pass some extra hardcoded parameters to the API. How can I add them to from.vals() ?

Thanks in advance.

Anonymous
Not applicable

Re: How do I send the data to external API after a form is submitted on a landing page ?

Will the normal AJAX call work in Javascript Forms 2.0 API of Marketo ?

Grégoire_Miche2
Level 10

Re: How do I send the data to external API after a form is submitted on a landing page ?

Hi Nitish,

I do not know AJAX well enough to help you on this point.

Sanford Whiteman​ will be much better than I am on this

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: How do I send the data to external API after a form is submitted on a landing page ?

Will the normal AJAX call work in Javascript Forms 2.0 API of Marketo ?

Of course.  Marketo's forms2.js library doesn't make any changes to native XMLHttpRequest objects or any other XHR/Ajax wrappers.

You need to break down your project into components.  Not just technically splitting it into functions and callbacks (which you also must do) but discussing each component separately here, since you're mixing too many things together.

Posting data to ConnectAndSell via Ajax is one component.   I assume you know how to package an Ajax payload (URL parameters and/or request body) to send to ConnectAndSell.  This should be wrapped up in its own function that (at least) allows you to pass it an onSuccess callback.

Posting form data to Marketo is another component.  This is done automatically unless you hook into the Forms 2.0 API onSubmit event, as Greg noted. If you add an onSubmit listener, you can delay the Marketo form submission, post data to CAS, wait for the response, and when you get a success callback from CAS, finish submitting the Marketo form.

But if you do not understand the JS event loop or the "A" part of Ajax, to be frank, you're unlikely to get this right.

Anonymous
Not applicable

Re: How do I send the data to external API after a form is submitted on a landing page ?

Thanks for the explanation. I do know the concept of JS event loop and Ajax. I was just unsure how will it work with Marketo. In the example Greg posted he tells how we can edit onSubmit function of Forms and read the values of the field in the form. It was still unclear to me how to hit the API and will normal Ajax work. Guess being a newbie in marketo I was not good at explaining my query. I will finish this up from here.

Thanks.