---
title: "Adding custom JavaScript to your Views"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-javascript-or-jquery-code-snippets-to-your-views/"
---

GravityView allows you to add custom JavaScript directly to a View through the **Custom Code** tab in the View Settings. The JavaScript loads only when that View renders, so it won't run on other pages.

**Note:** The Custom Code tab requires GravityView 2.19 or later. Placeholders require GravityView 2.50 or later.

## How to add custom JavaScript

- Edit your View in WordPress.
- Scroll down to the **Settings** metabox.
- Click the **Custom Code** tab (the code icon).
- Enter your JavaScript in the **Custom JavaScript** field.
- Click **Update** or **Publish**.

The JavaScript is placed inside `` tags in the page's footer, after GravityView's scripts have loaded. This means jQuery and GravityView's frontend library are available when your code runs.

## Available placeholders

GravityView provides placeholders that are automatically replaced with View-specific values. These work in both the Custom CSS and Custom JavaScript fields.

| Placeholder | Replaced with | Example output |
|---|---|---|
| `VIEW_SELECTOR` | A CSS selector targeting only this View | `.gv-container.gv-container-123` |
| `VIEW_ID` | The View's ID number | `123` |
| `GF_FORM_ID` | The connected Gravity Forms form ID | `5` |

### Example: highlight a row on click

```
/* Toggle a "highlighted" class on table rows when clicked */
jQuery( 'VIEW_SELECTOR .gv-table-view tbody tr' ).on( 'click', function() {
    jQuery( this ).toggleClass( 'highlighted' );
});
```

```
/* Toggle a "highlighted" class on table rows when clicked */
jQuery( 'VIEW_SELECTOR .gv-table-view tbody tr' ).on( 'click', function() {
    jQuery( this ).toggleClass( 'highlighted' );
});
```

### Example: log the View and form IDs

```
/* Output the View and Form IDs to the browser console */
console.log( 'View ID:', 'VIEW_ID' );
console.log( 'Form ID:', 'GF_FORM_ID' );
```

```
/* Output the View and Form IDs to the browser console */
console.log( 'View ID:', 'VIEW_ID' );
console.log( 'Form ID:', 'GF_FORM_ID' );
```

## Important notes

- Placeholders are **case-sensitive** and must be uppercase.
- Placeholders are replaced everywhere in your code, including inside comments and strings.
- Custom JavaScript is output only once per View, even if the same View is embedded multiple times on a page.
- If the View does not have a connected form, `GF_FORM_ID` is left as-is.
- **Warning:** Invalid JavaScript can break GravityView's functionality on the page. Test your code in the browser console first.

## Developer notes

Custom JavaScript is added using WordPress's `wp_add_inline_script()` function, attached to the `gravityview-fe-view` script handle with the `after` position. This means your code runs after GravityView's frontend script has loaded.

You can add custom placeholders using the [`gk/gravityview/custom-code/placeholders` ](https://www.gravitykit.dev/docs/gravityview/filters/gk-gravityview-custom-code-placeholders/) filter:

```
/**
 * Add a custom SITE_URL placeholder for use in Custom CSS and JavaScript.
 *
 * @since 2.50.0
 *
 * @param array    $placeholders Associative array of placeholder => replacement value pairs.
 * @param \GV\View $view         The View object.
 * @param string   $content      The original content before replacement.
 *
 * @return array Modified placeholders array.
 */
add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_URL'] = home_url();
    return $placeholders;
}, 10, 3 );
```

```
/**
 * Add a custom SITE_URL placeholder for use in Custom CSS and JavaScript.
 *
 * @since 2.50.0
 *
 * @param array    $placeholders Associative array of placeholder => replacement value pairs.
 * @param \GV\View $view         The View object.
 * @param string   $content      The original content before replacement.
 *
 * @return array Modified placeholders array.
 */
add_filter( 'gk/gravityview/custom-code/placeholders', function( $placeholders, $view, $content ) {
    $placeholders['SITE_URL'] = home_url();
    return $placeholders;
}, 10, 3 );
```

**See also:** [Adding custom CSS to your Views](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-css-to-your-website/), [Where to put code samples](https://www.gravitykit.com/docs/gravityview/customizing-your-views/where-to-put-code-samples/), and [Using custom code in the View settings](https://www.gravitykit.com/docs/gravityview/view-settings/view-settings-custom-code/).