How can we trigger a JS function when a CTA form is submitted?

Developer Support CMS Development
1

I have a lead capture CTA popup with a form added on my website, How can I trigger a JS function when a form is submitted within CTA popup?

2

Hi, @HJavaid :waving_hand: Welcome to the community. Thanks for your question.

  • Can you give the community a bit more info about your project, please?
  • Is your CTA pop-up and form HubSpot created? Or custom coded?

If a HubSpot Form, and you have Marketing or CMS Hub Professional or Enterprise, you can set the form to raw HTML and edit the Form Embed Code.

Here is the Global Form Events documentation — Using global form events

Form API — Submit a Form with Authentication

Hey, @alyssamwilie @daveroma @himanshurauthan, do you have an example you can share with @HJavaid?

Thank you very much! — Jaycee

3

Hi @Jaycee_Lewis
I am using hubspot lead capture CTA, it is not custom coded.

4

Hey @Jaycee_Lewis & @HJavaid

In order to trigger a JavaScript function when a form is submitted in HubSpot, you can leverage HubSpot’s onFormSubmit callback function.

Although these are based on the legacy documentation, I believe they are still applicable and can help address your need. The onFormSubmit callback function executes right after the form validation step and just before the form data is actually sent or submitted. This function is ideal for any logic that you’d like to run before the form submission begins. Please note, any changes made to form fields at this stage will not be validated.

Here’s an example of how to use the onFormSubmit callback:

hbspt.forms.create({
 portalId: 'your_portal_id',
 formId: 'your_form_id',
 onFormSubmit: function($form) {
 // Insert your JavaScript logic here
 }
});

In this snippet, replace ‘your_portal_id’ and ‘your_form_id’ with your actual HubSpot portal ID and form ID respectively. Within the onFormSubmit function, you can add your custom JavaScript logic that you’d like to execute prior to the form submission.

Dave Roma

5

Thank you, @daveroma :raising_hands: — Jaycee

6

@daveroma I have already tried this thing, it creates a new form on page and don’t fire on form submission when the form on lead capture CTA is submitted