# External API call and pass Data from

**URL:** <https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365>\
**Category:** APIs & Integrations\
**Tags:** developer-tools\
**Created:** [January 27, 2020, 12:48pm UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365 "2020-01-27T12:48:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![shyam\_est](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shyam_est/32/102945_2.png) [@shyam\_est](https://community.hubspot.com/u/shyam_est)\
**Post date:** [January 27, 2020, 12:48pm UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/1 "2020-01-27T12:48:01Z")

</div>

Hello All,

I am new to hubspot and i was wondering if I can make external API call from Hubspot → Marking-\>Forms on click of submit button and i want to pass the data which user will type in my form, Thanks in advance

---

<div class="post-metadata">

**Author:** ![jackcoldrick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jackcoldrick/32/5119_2.png) [@jackcoldrick](https://community.hubspot.com/u/jackcoldrick)\
**Post date:** [January 28, 2020, 8:24am UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/2 "2020-01-28T08:24:05Z")

</div>

[@shyam\_est](https://community.hubspot.com/t5/user/viewprofilepage/user-id/116841),

Thanks for your post. This would be possible by customizing the form embed code and leveraging the “onFormSubmit” handler. You can learn more about this [here](https://developers.hubspot.com/docs/methods/forms/advanced_form_options). The handler executes after form is validated, just before the data is actually sent. This is for any logic that needs to execute during the submit. Any changes will not be validated.

Alternatively you could use the “onFormSubmitted” handler .This executes when the data is actually sent.T his allows you to perform an action when the submission is fully complete, such as displaying a confirmation or thank you message.

If you are attempting to do this on a HubSpot page you would need to either embed the form in a rich text module when in the source code mode or use a custom module. If it’s on an external page you should be easily able to modify the embed code.

An example would look something like this:

```auto
hbspt.forms.create({
 portalId: 'XXXX',
 formId: 'XXXXXXXXXXXX',
 onFormSubmit: function($form) {
 // YOUR SCRIPT HERE
 } 
}); 

```

Regards,

Jack

---

<div class="post-metadata">

**Author:** ![shyam\_est](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shyam_est/32/102945_2.png) [@shyam\_est](https://community.hubspot.com/u/shyam_est)\
**Post date:** [January 28, 2020, 10:24am UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/3 "2020-01-28T10:24:07Z")

</div>

Hello  
Thanks for the reply!, I think it would be great help if you can please answer the following question  
My Question and issue is below  
1.Can i call an external API which is made by me to accept the data which is being typed in form which is available at the location from the Marketing-\>lead Capture-\>Form.

2.If this is possible which you said yes,where is the exact location to edit the embed code so that i can write an script on onFormSubmit click in form which is provided by hubspot  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![jackcoldrick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jackcoldrick/32/5119_2.png) [@jackcoldrick](https://community.hubspot.com/u/jackcoldrick)\
**Post date:** [January 28, 2020, 12:33pm UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/4 "2020-01-28T12:33:55Z")

</div>

Hi [@shyam\_est](https://community.hubspot.com/t5/user/viewprofilepage/user-id/116841),

Please find the answers to your questions below:

**1.Can i call an external API which is made by me to accept the data which is being typed in form which is available at the location from the Marketing-\>lead Capture-\>Form.** Yes it is possible to leverage an external API and pass form data from HubSpot. You would do this by following the documentation [here](https://developers.hubspot.com/docs/methods/forms/advanced_form_options). Whether you want to make an AJAX request onFormReady or onFormSubmit is entirely up to you.

**2.If this is possible which you said yes,where is the exact location to edit the embed code so that i can write an script on onFormSubmit click in form which is provided by hubspot.** When you create a form in HubSpot you have the option to use the embed code. Instructions on that can be found [here](https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site). You can embed this code into a rich text module or alternatively you can include it within a [custom module](https://knowledge.hubspot.com/cos-general/create-and-edit-modules) and add that to your page/template.

Regards,

Jack

---

<div class="post-metadata">

**Author:** ![shyam\_est](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shyam_est/32/102945_2.png) [@shyam\_est](https://community.hubspot.com/u/shyam_est)\
**Post date:** [January 29, 2020, 4:51am UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/5 "2020-01-29T04:51:58Z")

</div>

I am sharing you the screenshot. I am not getting any such options to edit in rich text module

 ![Screenshot (42).png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/663bebd0b0892f70a4c4b7550a50e6db72f5fb6d.png)

---

<div class="post-metadata">

**Author:** ![jackcoldrick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jackcoldrick/32/5119_2.png) [@jackcoldrick](https://community.hubspot.com/u/jackcoldrick)\
**Post date:** [January 29, 2020, 9:25am UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/6 "2020-01-29T09:25:06Z")

</div>

Hi [@shyam\_est](https://community.hubspot.com/t5/user/viewprofilepage/user-id/116841),

I was referring to using a rich text module on a landing page within HubSpot. However I can see that you do not have access to this tool. I presume that you will be embedding your forms on your own website (external to HubSpot). If that is the case you simply need to click “Share” and copy and paste the embed code into your page.

Once the code is in place you are then able to [modify the embed code](https://developers.hubspot.com/docs/methods/forms/advanced_form_options) or leverage [global form events](https://developers.hubspot.com/global-form-events) to implement whatever additional logic you like.

I’ve shared an example for you [here](http://dev.jackcoldrick.com/global-form-events.html). This is a Hubspot form that has been embedded on an external page. If you open up the console you will see the events being fired as you interact with the form. I’ve also copied the code below:

```auto
	<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
	<script>
		hbspt.forms.create({
			portalId: "2990812",
			formId: "08c2f61b-3f56-4c97-8baf-d7a28e599995",
			onBeforeFormInit: function($form){
				console.log("OnBeforeFormInit callback - Form is being initialized and currently not in the DOM");
			},
			onFormReady: function($form){
				console.log("OnFormReady callback - Form has been initialized and has been inserted into the DOM")
			},
			onFormSubmit: function($form){
				console.log("OnFormSubmit callback - Form is being submitted but has data has not been captured by HubSpot")
			},
			onFormSubmitted: function($form){
				console.log("OnFormSubmitted callback - Form has been submitted and data has been captured by HubSpot")
			}
		});
	</script>

	<script>
		//1) onBeforeFormInit - Called before form has been inserted into DOM
		window.addEventListener('message', event => {
			if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onBeforeFormInit') {
				console.log("onBeforeFormInit event - Form is being initialized and currently not in the DOM");
			}
		});

		//2) onFormReady - Called after form has been inserted into DOM
		window.addEventListener('message', event => {
			if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
				console.log("onFormReady event - Form has been initialized and has been inserted into the DOM");
			}
		});

		//3) OnFormSubmit - Called at the start of form submission, submission hasn't been persisted yet
		window.addEventListener('message', event => {
			if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
				console.log("onFormSubmit event - Form is being submitted but has data has not been captured by HubSpot");
			}
		});

		//4) OnFormSubmitted - Called after the form has been submitted and submission has been persisted
		window.addEventListener('message', event => {
			if (event.data.type === 'hsFormCallback' && event.data.eventName === 'OnFormSubmitted') {
				console.log("onFormSubmitted event - Form has been submitted and data has been captured by HubSpot");
			}
		});
	</script>

```

You are able to make external API requests by leveraging these handlers.

regards,

Jack

---

<div class="post-metadata">

**Author:** ![shyam\_est](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/shyam_est/32/102945_2.png) [@shyam\_est](https://community.hubspot.com/u/shyam_est)\
**Post date:** [January 29, 2020, 10:02am UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/7 "2020-01-29T10:02:43Z")

</div>

Hello

**I was referring to using a rich text module on a landing page within HubSpot. However I can see that you do not have access to this** tool ------\> How can I get the access of that . I have already enrolled for Sales Enterprise,do i need to get enroled for anything else also ?  
Thanks

---

<div class="post-metadata">

**Author:** ![jackcoldrick](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jackcoldrick/32/5119_2.png) [@jackcoldrick](https://community.hubspot.com/u/jackcoldrick)\
**Post date:** [January 29, 2020, 10:41am UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/8 "2020-01-29T10:41:38Z")

</div>

Hi [@shyam\_est](https://community.hubspot.com/t5/user/viewprofilepage/user-id/116841),

Sales Enterprise does not give you any ability to create landing pages. This is a part of our Marketing suite of tools or CMS. You would need to look into [Marketing Hub Professional](https://www.hubspot.com/pricing/marketing) or [the CMS](https://www.hubspot.com/pricing/cms) in order to achieve this from within HubSpot.

Regards,

Jack

---

<div class="post-metadata">

**Author:** ![CLaGuardia](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/claguardia/32/38459_2.png) [@CLaGuardia](https://community.hubspot.com/u/CLaGuardia)\
**Post date:** [February 2, 2021, 10:54pm UTC](https://community.hubspot.com/t/external-api-call-and-pass-data-from/18365/9 "2021-02-02T22:54:47Z")

</div>

While following these recommendations, I ran into two issues:

1. Embedding the code in a rich text module on a website page leads to malformed code on save. I think there might be some validation or formatting happening on save that breaks my code.
2. I have embedded the code for the entire site (in the footer), and now my page has an additional form at the bottom. It seems that using `hbspt.forms.create` may only work in the form context.

@jackcoldrick Do you have any more insights or documentation on how to customize a form’s submit behavior?