View Settings: Custom Code

The Custom Code tab in the View Settings metabox lets you add custom CSS and JavaScript that loads only when that specific View is displayed. This keeps your customizations organized inside the View itself, rather than scattered across theme files, the WordPress Customizer, or separate plugins.

Note: The Custom Code tab requires GravityView 2.19 or later.

Where to find it

Edit your View in WordPress.
Scroll down to the Settings metabox.
Click the Custom Code tab (the code icon).

The tab contains two fields: Custom CSS and Custom JavaScript. Both fields include a code editor with syntax highlighting.

Available placeholders

Since GravityView 2.50, both fields support placeholders that are automatically replaced with View-specific values when the page loads.

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`

Placeholders are case-sensitive, must be uppercase, and are replaced everywhere in your code (including comments). If the View has no connected form, GF_FORM_ID is left as-is.

How it works

Custom CSS

Output inside <style> tags in the page's <head>
Loads after GravityView's default stylesheet (gravityview_default_style), so your styles take priority
Uses WordPress's wp_add_inline_style() function

Custom JavaScript

Output inside <script> tags in the page's footer
Loads after GravityView's frontend script (gravityview-fe-view), so jQuery and GravityView's library are available
Uses WordPress's wp_add_inline_script() function

Both CSS and JavaScript are output only once per View, even if the same View is embedded multiple times on a page.

Developer notes

You can register additional placeholders using the gk/gravityview/custom-code/placeholders filter (available since 2.50):

/**
 * Add a custom SITE_NAME 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_NAME'] = get_bloginfo( 'name' );
    return $placeholders;
}, 10, 3 );

Note: If you have removed the default container classes using the gravityview/render/container/class filter, the VIEW_SELECTOR placeholder will not match your View's container. Use VIEW_ID instead.

Detailed guides

Adding custom CSS to your Views — includes placeholder examples, VIEW_SELECTOR usage, and tips for targeting multiple View instances
Adding custom JavaScript to your Views — includes placeholder examples and practical code snippets
Adding custom PHP code snippets to your website