Adding custom JavaScript 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

1. Edit your View in WordPress.
2. Scroll down to the Settings metabox.
3. Click the Custom Code tab (the code icon).
4. Enter your JavaScript in the Custom JavaScript field.
5. Click Update or Publish.

The JavaScript is placed inside <script>  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.

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' );
});

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' );

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 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 );