---
title: "How to Run JavaScript After a Kadence Form is Successfully Submitted (On Event)"
source: "https://docs.nexcess.com/software/kadence/blocks/run-javascript-after-form-submitted/"
description: "You can run custom JavaScript immediately after someone submits a Kadence Form on your site. Kadence Blocks makes this possible by providing JavaScript events t…"
vertical: "Software"
area: "Kadence Blocks"
date: "2025-08-15"
last_modified: "2026-07-02"
---

# How to Run JavaScript After a Kadence Form is Successfully Submitted (On Event)

You can run custom **JavaScript** immediately after someone submits a **Kadence Form** on your site. Kadence Blocks makes this possible by providing **JavaScript events** that fire only when the form is successfully submitted. The event you use depends on the type of form block you are working with.

For example, you might want to do the following:

- Track submissions in Google Analytics or Google Tag Manager
- Trigger an animation or send the data to another application
- Hide or show HTML elements

Table of Contents

- [Targeting a Specific Form Block](#targeting-a-specific-form-block)

Form (Adv) Block Submission Event

**Event name:** *kb-advanced-form-success*  
  
**Example:**

```javascript
document.body.addEventListener('kb-advanced-form-success', function (event) {
    console.log('Advanced Form submitted!', event.detail);
    alert('Thank you for submitting the advanced form!');
});
```

**Targeting a Specific Advanced Form**

You can make your script run only for one specific form by using the **HTML Anchor** setting in the block.

1. In the block settings, go to Advanced > HTML Anchor and set a unique anchor.  
    Example: `myContact`

![](https://docs.nexcess.com/wp-content/uploads/2026/06/my-contact.jpg)2. **JavaScript Example:**

```javascript
document.body.addEventListener('kb-advanced-form-success', function(event) {
  const uniqueId = 'wp-block-kadence-advanced-form' + event.detail.uniqueId;
  const formDiv = document.querySelector('#myContact');
  if (formDiv.classList.contains(uniqueId)) {
    console.log("This form");
  }
});
```

**How it works:**

- The HTML Anchor you set (e.g., myContact) becomes the form’s ID in the page HTML.
- The script checks if the submitted form’s unique ID matches that element before running your custom code.

****Form Block**** Submission Event

**Event name:** *kb-form-success*  
  
**Example:**

```javascript
document.body.addEventListener('kb-form-success', function (event) {
    console.log('Form submitted!', event.detail);
    alert('Thank you for submitting the form!');
});
```

#### **Targeting a Specific Form** Block

You can also run your script for only one specific Form block by giving it an **HTML Anchor**.

1. In the block settings, set the **HTML Anchor** to something unique.   
    Example: `myContact`
2. Use this JavaScript:

```javascript
 document.body.addEventListener('kb-form-success', function (event) {
   const form = document.querySelector('.kadence-form-' + event.detail);
   if (form && form.id === 'myContact') {
      console.log('form sent');
   }
});

```

**How it works:**

- The HTML Anchor you set becomes the ID of the form element.
- The script checks if the submitted form’s ID matches before running your code.