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
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. 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:
hbspt.forms.create({
portalId: 'XXXX',
formId: 'XXXXXXXXXXXX',
onFormSubmit: function($form) {
// YOUR SCRIPT HERE
}
});
Regards,
Jack
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
Hi @shyam_est,
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. 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. You can embed this code into a rich text module or alternatively you can include it within a custom module and add that to your page/template.
Regards,
Jack
Hi @shyam_est,
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 or leverage global form events to implement whatever additional logic you like.
I’ve shared an example for you here. 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:
<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
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
Hi @shyam_est,
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 or the CMS in order to achieve this from within HubSpot.
Regards,
Jack
While following these recommendations, I ran into two issues:
- 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.
- 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?