0 items
Sign in
Buy

Docs

GravityView CSS guide

Estimated reading: 91 minutes

Updated on April 24, 2026

This guide covers the HTML structure and CSS classes for all GravityView layouts. It is designed for developers who want to customize the appearance of GravityView Views using CSS.

Table of contents #

Container wrapper #

The outermost View wrapper uses the pattern div#gv-view-{View ID}-{counter}. This ID is unique per View instance on a page.

All layouts share the following container classes added by the gv_container_class() function:

  • .gv-container — Standard container class on all Views
  • .gv-container-{id} — View-specific container (e.g., gv-container-47)

The following state classes are added conditionally:

  • .gv-container-no-results — Added when there are zero entries to display
  • .gv-hidden — Added when “Hide Until Searched” is active and no search has been performed, or when no_entries_options === 3
  • Custom CSS class — User-defined class from View settings ($context->view->settings->get('class'))

Each layout also has an outermost template wrapper <div> with a layout-specific class:

  • .gv-template-table — Table layout
  • .gv-template-list — List layout
  • .gv-template-layout-builder — Layout Builder layout
  • .gv-template-datatables — DataTables layout

This wrapper HTML can be modified using the gravityview/view/wrapper_container filter. See also: All about the View container. The container classes listed above apply to ALL layouts.

Table layout #

Multiple entries

The Table layout renders entries as table rows with column headers.

Class hierarchy:

div#gv-view-{id}-1.gv-template-table
├── div.gv-grid.gv-widgets-header (widget zone)
│   └── div.gv-grid-row
│       └── div.gv-grid-col-1-1.gv-left
└── div.gv-table-view.gv-table-container.gv-table-multiple-container.gv-container.gv-container-{id}
    └── table.gv-table-view
        ├── thead > tr > th.gv-field-{form}-{field}
        ├── tbody > tr.alt > td.gv-field-{form}-{field}
        └── tfoot > tr > th.gv-field-{form}-{field}

HTML example:

<div id="gv-view-47-1" class="gv-template-table">
  <div class="gv-grid gv-widgets-header">
    <div class="gv-grid-row">
      <div class="gv-grid-col-1-1 gv-left">
        <!-- Search widget -->
      </div>
    </div>
  </div>

  <div class="gv-table-view gv-table-container gv-table-multiple-container gv-container gv-container-47">
    <table class="gv-table-view">
      <thead>
        <tr>
          <th id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">
            <span class="gv-field-label">Entry ID</span>
          </th>
          <th id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <span class="gv-field-label">Name</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="alt" data-row="0">
          <td id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">12</td>
          <td id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <a href="/your-view-page/entry/12/">John Doe</a>
          </td>
        </tr>
        <tr class="" data-row="1">
          <td id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">13</td>
          <td id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <a href="/your-view-page/entry/13/">Jane Smith</a>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">
            <span class="gv-field-label">Entry ID</span>
          </th>
          <th id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <span class="gv-field-label">Name</span>
          </th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Single entry

The single-entry view uses horizontal row orientation: each <tr> contains one field with the label in <th> and value in <td>.

Key differences:

  • Container uses .gv-table-single-container instead of .gv-table-multiple-container
  • Table uses .gv-table-view-content class
  • Each field is a table row (horizontal orientation)
  • Back link appears before the container

HTML example:

<p class="gv-back-link">
  <a data-viewid="47" href="/your-view-page/">← Go back</a>
</p>

<div class="gv-table-view gv-table-container gv-table-single-container gv-container gv-container-47">
  <table class="gv-table-view-content">
    <thead></thead>
    <tbody>
      <tr id="gv-field-1-id" class="gv-field-1-id">
        <th scope="row"><span class="gv-field-label">Entry ID</span></th>
        <td>12</td>
      </tr>
      <tr id="gv-field-1-1" class="gv-field-1-1">
        <th scope="row"><span class="gv-field-label">Name</span></th>
        <td>John Doe</td>
      </tr>
      <tr id="gv-field-1-5" class="gv-section gv-field-1-5">
        <th scope="row"><span class="gv-field-label">Additional details</span></th>
        <td></td>
      </tr>
      <tr id="gv-field-1-8" class="gv-field-1-8">
        <th scope="row"><span class="gv-field-label">Photo</span></th>
        <td>
          <a class="gravityview-fancybox" href="..." rel="gv-field-1-8-12">
            <img src="..." alt="Photo" class="gv-image gv-field-id-8">
          </a>
        </td>
      </tr>
    </tbody>
    <tfoot></tfoot>
  </table>
</div>

No results state

When there are no entries, the Table layout displays the message inside a <td> spanning all columns:

<tbody>
  <tr>
    <td colspan="3" class="gv-no-results gv-no-results-text">
      <p>No entries match your request.</p>
    </td>
  </tr>
</tbody>

Or with an embedded form (no_entries_options = 1):

<tbody>
  <tr>
    <td colspan="3" class="gv-no-results gv-no-results-form">
      <!-- Gravity Forms form rendered here -->
    </td>
  </tr>
</tbody>

Note: The no-results markup differs by layout. Table uses <td> inside the table structure, while List and Layout Builder use <div> elements.

Table-specific notes

  • The gv_class() function generates .gv-field-{form}-{field} classes on <th> and <td> elements
  • Sort links appear in headers with .gv-sort and state classes (.gv-icon-caret-up-down, .gv-icon-sort-asc, .gv-icon-sort-desc)
  • The .alt class alternates on table rows in <tbody>
  • Mobile responsive: <thead> and <tfoot> hidden at ≤575.98px; <td> elements use :before pseudo-elements with data-label attribute values

Filter: gravityview/template/table/entry/class modifies CSS class on each <tr> row.

List layout #

Multiple entries

The List layout displays entries as individual list items with title, content, and footer zones.

Class hierarchy:

div#gv-view-{id}-1.gv-template-list
└── div.gv-list-container.gv-list-multiple-container.gv-container.gv-container-{id}
    └── div#gv_list_{entry_id}.gv-list-view
        ├── div.gv-list-view-title
        │   ├── h3.gv-field-{form}-{field} > a (linked title)
        │   └── div.gv-list-view-subtitle > h4
        ├── div.gv-grid.gv-list-view-content
        │   ├── div.gv-grid-col-1-3.gv-list-view-content-image
        │   └── div.gv-grid-col-2-3.gv-list-view-content-description
        └── div.gv-grid.gv-list-view-footer
            ├── div.gv-grid-col-1-2.gv-left
            └── div.gv-grid-col-1-2.gv-right

HTML example:

<div id="gv-view-22-1" class="gv-template-list">
<div class="gv-list-container gv-list-multiple-container gv-container gv-container-22">

  <div id="gv_list_5" class="gv-list-view">

    <div class="gv-list-view-title">
      <h3 class="gv-field-2-1">
        <a href="/your-view-page/entry/5/">John Doe</a>
      </h3>
      <div class="gv-list-view-subtitle">
        <h4 id="gv-field-2-2" class="gv-field-2-2">
          Software Engineer at Example Corp
        </h4>
      </div>
    </div>

    <div class="gv-grid gv-list-view-content">
      <div class="gv-grid-col-1-3 gv-list-view-content-image">
        <div id="gv-field-2-8" class="gv-field-2-8">
          <a class="gravityview-fancybox" href="...image.jpg" rel="gv-field-2-8-5">
            <img src="...image.jpg" width="250" alt="Featured Image"
                 class="gv-image gv-field-id-8">
          </a>
        </div>
      </div>
      <div class="gv-grid-col-2-3 gv-list-view-content-description">
        <div id="gv-field-2-3" class="gv-field-2-3">
          <p>A brief description of the directory listing goes here.</p>
        </div>
      </div>
    </div>

    <div class="gv-grid gv-list-view-footer">
      <div class="gv-grid-col-1-2 gv-left">
        <div id="gv-field-2-4.1" class="gv-field-2-4.1">123 Main Street</div>
      </div>
      <div class="gv-grid-col-1-2 gv-right">
        <div id="gv-field-2-entry_link" class="gv-field-2-entry_link">
          <a href="/your-view-page/entry/5/">View Details</a>
        </div>
      </div>
    </div>

  </div>

</div>
</div>

Single entry

Key differences:

  • Container uses .gv-list-single-container
  • Back link appears first
  • Title is NOT linked (plain text in <h3>)
  • Content zone does NOT have .gv-grid class
  • No footer zone
  • Fields may include span.gv-field-label

HTML example:

<div id="gv-view-22-1" class="gv-template-list">
<div class="gv-list-container gv-list-single-container gv-container gv-container-22">

  <p class="gv-back-link">
    <a data-viewid="22" href="/your-view-page/">← Go back</a>
  </p>

  <div id="gv_list_5" class="gv-list-view">

    <div class="gv-list-view-title">
      <h3 class="gv-field-2-1">John Doe</h3>
      <div class="gv-list-view-subtitle">
        <h4 id="gv-field-2-2" class="gv-field-2-2">
          Software Engineer at Example Corp
        </h4>
      </div>
    </div>

    <div class="gv-list-view-content">
      <div class="gv-list-view-content-image gv-grid-col-1-3">
        <div id="gv-field-2-entry_map" class="gv-field-2-entry_map">
          <!-- Google Map canvas -->
        </div>
        <div id="gv-field-2-4" class="gv-field-2-4">
          123 Main Street<br>Springfield, Illinois 62701<br>United States
        </div>
      </div>

      <div class="gv-list-view-content-description">
        <div id="gv-field-2-3" class="gv-field-2-3">
          <p>A detailed description of the listing goes here.</p>
        </div>
        <div id="gv-field-2-7" class="gv-field-2-7">
          <span class="gv-field-label">Website:</span>
          <p><a href="https://www.example.com" target="_blank">example.com</a></p>
        </div>
        <div id="gv-field-2-6" class="gv-field-2-6">
          <span class="gv-field-label">Email address:</span>
          <p><a href="mailto:john@example.com">john@example.com</a></p>
        </div>
        <div id="gv-field-2-5" class="gv-field-2-5">
          <span class="gv-field-label">Phone:</span>
          <p><a href="tel:(555)%20123-4567">(555) 123-4567</a></p>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

No results state

Same pattern as Table layout — uses .gv-no-results, .gv-no-results-text, or .gv-no-results-form classes.

Filter: gravityview/template/list/entry/class modifies entry wrapper classes.

Layout Builder layout #

Multiple entries

The Layout Builder uses a BEM-style grid system for complete layout control.

Class hierarchy:

div#gv-view-{id}-1.gv-template-layout-builder
├── div.gv-grid.gv-widgets-header (widget zone)
└── div.gv-layout-builder-container.gv-layout-builder-multiple-container.gv-container.gv-container-{id}
    └── div.gv-layout-builder-view.gv-layout-builder-view--entry.gv-grid
        ├── div.gv-grid-row
        │   ├── div.gv-grid-col-2-3
        │   │   └── div.gv-field-{form}-{field}
        │   │       └── div.gv-grid-value
        │   └── div.gv-grid-col-1-3
        │       └── div.gv-field-{form}-{field}
        │           └── div.gv-grid-value
        └── div.gv-grid-row
            └── div.gv-grid-col-1-1
                └── div.gv-field-{form}-{field}
                    └── div.gv-grid-value

HTML example:

<div id="gv-view-63-1" class="gv-template-layout-builder">

  <div class="gv-grid gv-widgets-header">
    <div class="gv-grid-row">
      <div class="gv-grid-col-1-1 gv-left">
        <!-- Search widget here -->
      </div>
    </div>
  </div>

  <div class="gv-layout-builder-container gv-layout-builder-multiple-container gv-container gv-container-63">

    <div class="gv-layout-builder-view gv-layout-builder-view--entry gv-grid">
      <div class="gv-grid-row">
        <div class="gv-grid-col-2-3">
          <div id="gv-field-3-1" class="gv-field-3-1">
            <div class="gv-grid-value">
              <a href="/your-view-page/entry/8/">John Doe</a>
            </div>
          </div>
        </div>
        <div class="gv-grid-col-1-3">
          <div id="gv-field-3-date_created" class="gv-field-3-date_created">
            <div class="gv-grid-value">
              September 16, 2025
            </div>
          </div>
        </div>
      </div>
      <div class="gv-grid-row">
        <div class="gv-grid-col-1-1">
          <div id="gv-field-3-4" class="gv-field-3-4">
            <div class="gv-grid-value">Springfield, IL</div>
          </div>
          <div id="gv-field-3-5" class="gv-field-3-5">
            <div class="gv-grid-value">
              Full time
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Note: The BEM modifier .gv-layout-builder-view--entry distinguishes entry blocks. The .gv-featured-entry class is available in the stylesheet for styling featured entries, but it is not applied automatically. To add it, use the gravityview/template/layout-builder/entry/class filter to conditionally add the class (e.g., for starred entries).

Single entry

Key differences:

  • Container uses .gv-layout-builder-single-container
  • Back link inside container
  • Single grid row with all fields stacked in .gv-grid-col-1-1
  • Fields include span.gv-field-label before value

HTML example:

<div class="gv-layout-builder-container gv-layout-builder-single-container gv-container gv-container-63">

  <p class="gv-back-link">
    <a data-viewid="63" href="/your-view-page/">← Go back</a>
  </p>

  <div class="gv-layout-builder-view gv-layout-builder-view--entry gv-grid">
    <div class="gv-grid-row">
      <div class="gv-grid-col-1-1">

        <div id="gv-field-3-date_created" class="gv-field-3-date_created">
          <span class="gv-field-label">Date created</span>
          <div class="gv-grid-value">September 16, 2025</div>
        </div>

        <div id="gv-field-3-1" class="gv-field-3-1">
          <span class="gv-field-label">Name</span>
          <div class="gv-grid-value">John Doe</div>
        </div>

        <div id="gv-field-3-6" class="gv-field-3-6">
          <span class="gv-field-label">Category</span>
          <div class="gv-grid-value">Full time</div>
        </div>

        <div id="gv-field-3-4" class="gv-field-3-4">
          <span class="gv-field-label">Location</span>
          <div class="gv-grid-value">Springfield, IL</div>
        </div>

        <div id="gv-field-3-3" class="gv-field-3-3">
          <span class="gv-field-label">Description</span>
          <div class="gv-grid-value">
            <p>A detailed description of the entry goes here.</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

No results state

<div class="gv-no-results">
  <div class="gv-layout-builder-view-title">
    <h3>No entries match your request.</h3>
  </div>
</div>

Filter: gravityview/template/layout-builder/entry/class modifies entry class.

DataTables layout #

Multiple entries

The DataTables layout extends the Table layout with the DataTables.net JavaScript library. The underlying table structure reuses Table layout classes, but adds DataTables-specific wrappers and controls.

Class hierarchy:

div#gv-view-{id}-1.gv-template-datatables
├── div.gv-grid.gv-widgets-header (widget zone)
└── div#gv-datatables-{id}.gv-datatables-container.gv-container.gv-container-{id}
    └── div#DataTables_Table_0_wrapper.dataTables_wrapper
        ├── div.dt-buttons (export buttons)
        ├── div.dataTables_length (page size selector)
        ├── div.dataTables_processing (loading indicator)
        ├── table.gv-datatables.display.dataTable.nowrap.dtr-inline
        │   ├── thead > tr > th.gv-field-{form}-{field}.sorting
        │   ├── tbody > tr.odd|.even > td
        │   └── tfoot > tr > th
        ├── div.dataTables_info (entry count)
        └── div.dataTables_paginate.paging_simple_numbers (pagination)

HTML example:

<div id="gv-view-85-1" class="gv-template-datatables">

  <div class="gv-grid gv-widgets-header">
    <div class="gv-grid-row">
      <div class="gv-grid-col-1-1 gv-left">
        <!-- Search widget -->
      </div>
    </div>
  </div>

  <div id="gv-datatables-85" class="gv-datatables-container gv-container gv-container-85">
    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper">

      <div class="dt-buttons">
        <button class="dt-button buttons-csv buttons-html5" type="button">
          <span>CSV</span>
        </button>
        <button class="dt-button buttons-excel buttons-html5" type="button">
          <span>Excel</span>
        </button>
        <button class="dt-button buttons-print" type="button">
          <span>Print</span>
        </button>
        <button class="dt-button buttons-collection buttons-colvis" type="button">
          <span>Columns</span><span class="dt-down-arrow">&#x25BC;</span>
        </button>
      </div>

      <div class="dataTables_length" id="DataTables_Table_0_length">
        <label>Show
          <select name="DataTables_Table_0_length">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="-1">All</option>
          </select> entries
        </label>
      </div>

      <div class="dataTables_processing" role="status" style="display: none;">
        <div class="dataTables_processing_text">Loading data&hellip;</div>
        <div><div></div><div></div><div></div><div></div></div>
      </div>

      <table data-viewid="85"
             class="gv-datatables display dataTable nowrap dtr-inline"
             id="DataTables_Table_0">
        <thead>
          <tr>
            <th id="gv-field-4-1" class="gv-field-4-1 sorting" scope="col">
              <span class="gv-field-label">Name</span>
            </th>
            <th id="gv-field-4-3" class="gv-field-4-3 sorting" scope="col">
              <span class="gv-field-label">Department</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd">
            <td data-row-index="0" data-column-index="0" class="dtr-control">
              <a href="...">John Doe</a>
            </td>
            <td data-row-index="0" data-column-index="1">Engineering</td>
          </tr>
          <tr class="even">
            <td data-row-index="1" data-column-index="0" class="dtr-control">
              <a href="...">Emily Smith</a>
            </td>
            <td data-row-index="1" data-column-index="1">Marketing</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="gv-field-4-1" scope="col">
              <span class="gv-field-label">Name</span>
            </th>
            <th class="gv-field-4-3" scope="col">
              <span class="gv-field-label">Department</span>
            </th>
          </tr>
        </tfoot>
      </table>

      <div class="dataTables_info" role="status" aria-live="polite">
        Showing 1 to 10 of 10 entries
      </div>

      <div class="dataTables_paginate paging_simple_numbers">
        <a class="paginate_button previous disabled">Previous</a>
        <span>
          <a class="paginate_button current" aria-current="page">1</a>
        </span>
        <a class="paginate_button next disabled">Next</a>
      </div>

    </div>
  </div>
</div>

Separating GravityView classes from DataTables library classes

GravityView classes:

  • gv-template-datatables, gv-datatables-container, gv-datatables, gv-field-{form}-{field}, gv-field-label, gv-container, gv-container-{id}

DataTables library classes:

  • dataTables_wrapper, dataTable, display, nowrap, dtr-inline, dtr-control, sorting, odd, even, dataTables_length, dataTables_filter, dataTables_info, dataTables_paginate, paginate_button, current, previous, next, disabled

DataTables Buttons extension classes:

  • dt-buttons, dt-button, buttons-csv, buttons-excel, buttons-print, buttons-html5, buttons-collection, buttons-colvis, dt-down-arrow

Single entry

The DataTables single-entry view uses the standard Table layout single-entry template — no DataTables-specific markup. See the Table layout section.

Filter: gravityview_datatables_table_class modifies table CSS classes. See DataTables styling documentation for DataTables library classes.

External documentation: DataTables.net styling documentation

Maps layout #

The Maps layout displays entries as markers on a Google Map with an entry listing table below (or above) the map. The map container is placed in the header widget zone, and the entry listing uses the standard Table layout with a .gv-has-map modifier.

Map container

The map is rendered inside the header widget area using Google Maps JavaScript API.

HTML example:

<div id="gv-map-canvas-31"
     class="gv-map-canvas gk-map-canvas gk-multi-entry-map gk-map-visible gk-map-markers-generated gk-map-generated"
     data-entryid=""
     data-gk-map='{"view_id":31,"entry_id":"","is_multi_entry_map":true,"markers_data":[...]}'
     data-gk-map-settings='{"MapOptions":{...},"icon":{...},"layers":{...}}'
     style="position: relative; overflow: hidden;">
  <!-- Google Maps renders its internal DOM here -->
</div>

Entry listing

The entry listing uses the standard Table layout structure with the .gv-has-map modifier:

<div class="gv-table-view gv-table-container gv-table-multiple-container gv-container gv-container-31 gv-has-map">
  <table class="gv-table-view">
    <thead>
      <tr>
        <th id="gv-field-5-1" class="gv-field-5-1" data-label="Name">
          <span class="gv-field-label">Name</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="alt" data-row="0">
        <td id="gv-field-5-1" class="gv-field-5-1" data-label="Name">
          John Doe
        </td>
      </tr>
    </tbody>
    <tfoot></tfoot>
  </table>
</div>

Info window structure

Info windows (marker popups) are rendered when a marker is clicked. The HTML is stored in the data-gk-map JSON attribute.

Without image:

<div class="gv-infowindow-container gv-infowindow-no-image">
  <div class="gv-infowindow-content">
    <h4>
      <a href="/your-view-page/entry/3/" class="gv-infowindow-entry-link">
        John Doe
      </a>
    </h4>
    <p>123 Main Street, Springfield, Illinois 62701</p>
  </div>
</div>

With image:

<div class="gv-infowindow-container">
  <div class="gv-infowindow-image">
    <img src="..." alt="...">
  </div>
  <div class="gv-infowindow-content">
    <h4>
      <a href="..." class="gv-infowindow-entry-link">Business Name</a>
    </h4>
    <p>Address details</p>
  </div>
</div>

The geolocation search field adds location-based filtering with address autocomplete, current-location button, and radius/unit selectors.

HTML example:

<div class="gv-search-box gk-search-geolocation-field">
  <input type="hidden" class="gk-maps-search-current-geolocation-has-search" value="0">
  <input type="hidden" class="gk-maps-current-view" value="31">
  <input type="hidden" name="lat" class="gk-maps-search-geolocation-lat" value="0" disabled>
  <input type="hidden" name="long" class="gk-maps-search-geolocation-lng" value="0" disabled>

  <div class="gv-grid-col-1-1">
    <label for="search-box-filter_geolocation">Geolocation Radius</label>
  </div>

  <div class="gv-grid-col-1-1">
    <div class="gk-maps-search-geolocation-address-autocomplete-container">
      <input type="text"
             class="gk-maps-search-geolocation-address-autocomplete pac-target-input"
             name="address_search" value="" placeholder="Enter a location">
      <button type="button" class="gk-maps-search-current-geolocation"
              title="Click to use current location">
        <svg><!-- location pin icon --></svg>
      </button>
    </div>
  </div>

  <div class="gv-grid-col-1-1">
    <select name="filter_geolocation"
            class="gk-maps-search-current-geolocation-radius">
      <option value="1">1</option>
      <option value="5" selected>5</option>
      <option value="10">10</option>
    </select>
    <select name="unit" class="gk-maps-search-current-geolocation-unit">
      <option value="km">Kilometers</option>
      <option selected value="mi">Miles</option>
    </select>
  </div>
</div>

Maps-specific classes

GravityView Maps classes (gk-* prefix):

  • gk-map-canvas — Map canvas container
  • gk-multi-entry-map — Multi-entry map identifier
  • gk-map-visible, gk-map-markers-generated, gk-map-generated — Map state classes
  • gk-search-geolocation-field — Geolocation search container
  • gk-maps-search-geolocation-address-autocomplete — Address input
  • gk-maps-search-current-geolocation — Current location button
  • gk-maps-search-current-geolocation-radius — Radius selector
  • gk-maps-search-current-geolocation-unit — Unit selector (km/mi)

Info window classes:

  • gv-infowindow-container — Outer wrapper
  • gv-infowindow-no-image — Modifier for entries without images
  • gv-infowindow-image — Image container
  • gv-infowindow-content — Content area
  • gv-infowindow-entry-link — Link to entry detail

Google Maps library classes (gm-* prefix):

These classes are generated by the Google Maps JavaScript API — they are NOT GravityView classes:

  • gm-style, gm-bundled-control, gm-fullscreen-control, gm-style-cc, gm-style-mtc, etc.

DIY layout #

The DIY layout provides minimal markup for maximum customization flexibility. Unlike other layouts, DIY intentionally has almost no structural HTML.

Multiple entries

Class hierarchy:

div#gv-view-{id}-{seq}.gv-container.gv-container-{id}.gv-diy-container.gv-diy-multiple-container
└── div#gv_diy_{entry_slug}.gv-diy-view
    ├── {field value} (bare output, no wrapper by default)
    ├── <div class="{css_classes}">Value</div> (with container tag)
    └── {Before HTML}{value}{After HTML} (with Before/After Output)

HTML example:

<div id="gv-view-100-1"
     class="gv-container gv-container-100 gv-diy-container gv-diy-multiple-container">

  <div id="gv_diy_abc123" class="gv-diy-view">
    John Doe
    <div class="custom-field-class">john@example.com</div>
    <strong>Phone:</strong> 555-1234<br>
  </div>

  <div id="gv_diy_def456" class="gv-diy-view">
    Jane Smith
    <div class="custom-field-class">jane@example.com</div>
    <strong>Phone:</strong> 555-5678<br>
  </div>

</div>

Single entry

Key differences:

  • Container uses .gv-diy-single-container
  • Back link before container
  • Both container and entry classes on same element (.gv-diy-view.gv-diy-container.gv-diy-single-container)

HTML example:

<p class="gv-back-link"><a href="/your-view-page/">&larr; Go back</a></p>

<div id="gv_diy_abc123"
     class="gv-container gv-container-100 gv-diy-view gv-diy-container gv-diy-single-container">

  John Doe
  <div class="email-field">john@example.com</div>
  <p>Full bio text here...</p>

</div>

No results state

<div class="gv-diy-view gv-no-results gv-no-results-text">
  <div class="gv-diy-view-title">
    <h3>No entries match your request.</h3>
  </div>
</div>

Available filters

DIY provides extensive customization through filters:

  • gravityview-diy/container — Change or remove container element (default: div)
  • gravityview-diy/wrap/multiple — Toggle entry wrapping in the multiple-entry view (default: true)
  • gravityview-diy/wrap/single — Toggle entry wrapping in the single-entry view (default: true)
  • Per-field Container Tag setting — Choose from: none, div, h1–h4, p, blockquote, pre, address
  • Per-field Before/After Output HTML — Supports Merge Tags for dynamic content

Note: DIY is intentionally minimal for maximum customization. Fields output bare values with no labels, no wpautop processing, and no default wrapper classes.

Edit Entry #

The Edit Entry view is a shared component that appears across all layouts. When a user clicks an “Edit Entry” link, GravityView renders a form using Gravity Forms’ native GFFormDisplay::get_form(), wrapped in GravityView-specific containers.

Complete structure

<div class="gv-edit-entry-wrapper">

  <h2 class="gv-edit-entry-title">
    <span>Edit Entry</span>
  </h2>

  <div class="gv-notice">
    Entry Updated. <a href="{back_link}">Return to Entry</a>
  </div>

  <form method="post" id="gform_{form_id}" enctype="multipart/form-data">

    <input type="hidden" name="is_gv_edit_entry" value="..." />

    <div class="gform_wrapper gravity-theme">
      <div class="gform_body">
        <ul class="gform_fields">
          <li class="gfield">
            <label class="gfield_label">Field Label</label>
            <div class="ginput_container ginput_container_{field_type}">
              <!-- Input elements -->
            </div>
          </li>
        </ul>
      </div>

      <div class="gform-footer">
        <div id="publishing-action">

          <!-- Previous button (multi-page forms only) -->
          <input id="gform_previous_button_{form_id}"
                 class="btn btn-lg button button-large gform_button button-primary gv-button-previous"
                 type="submit" value="Previous" name="save" />

          <!-- Next button (multi-page forms only) -->
          <input id="gform_next_button_{form_id}"
                 class="btn btn-lg button button-large gform_button button-primary gv-button-next"
                 type="submit" value="Next" name="save" />

          <!-- Update button -->
          <input id="gform_submit_button_{form_id}"
                 class="btn btn-lg button button-large gform_button button-primary gv-button-update"
                 type="submit" value="Update" name="save" />

          <!-- Cancel link -->
          <a class="btn btn-sm button button-small gv-button-cancel"
             onclick="history.go({-N}); return false;"
             href="{back_link}">
            Cancel
          </a>

          <!-- Delete button (added by Delete Entry extension) -->
          <a class="btn btn-sm button button-small alignright pull-right btn-danger gv-button-delete"
             onclick="{confirm_dialog}" href="{delete_url}">
            Delete
          </a>

          <input type="hidden" name="action" value="update" />
        </div>
      </div>
    </div>

  </form>
</div>

Cancel button behavior

The cancel button’s onclick dynamically calculates how many history steps to go back based on how many times the entry has been updated in the current session. On first visit, it is history.go(-1). After two updates, it becomes history.go(-3). The formula is (update_count + 1) * -1. For multi-page (paged) forms, it uses window.location.href instead of history.go().

Button classes

Update button:

btn btn-lg button button-large gform_button button-primary gv-button-update

Cancel button:

btn btn-sm button button-small gv-button-cancel

Delete button:

btn btn-sm button button-small alignright pull-right btn-danger gv-button-delete

Previous/Next buttons (multi-page forms):

btn btn-lg button button-large gform_button button-primary gv-button-previous
btn btn-lg button button-large gform_button button-primary gv-button-next

Success/error notices

After an entry is updated, a notice is displayed:

<div class="gv-notice">
  Entry Updated. <a href="{back_link}">Return to Entry</a>
</div>

The notice can have an error class for validation failures:

<div class="gv-notice error">
  There was an error updating this entry.
</div>

Gravity Forms CSS Ready Classes support

Edit Entry fully supports Gravity Forms CSS Ready Classes because the form is rendered using the native GFFormDisplay::get_form() engine. All standard GF layout classes work:

  • gf_left_half / gf_right_half — Two-column layout
  • gf_left_third / gf_middle_third / gf_right_third — Three-column layout
  • gf_inline — Inline fields
  • gf_list_2col / gf_list_3col etc. — Multi-column choice lists

The Gravity Forms 2.5+ “gravity-theme” wrapper is also included, providing the modern form styling framework. See Gravity Forms CSS Ready Classes documentation for the full list of available layout classes.

Search bar widget #

The search widget appears in the header widget zone of any layout. It supports horizontal and vertical layouts, various field types (text, select, date, number range), and optional clear buttons.

Search layout classes

The search form uses one of two layout classes on the <form> element:

  • .gv-search-horizontal — Fields displayed side by side (horizontal layout)
  • .gv-search-vertical — Fields stacked vertically (vertical layout)

These classes are set based on the “Search Layout” setting in the Search Bar widget configuration.

Horizontal layout

Class hierarchy:

form.gv-widget-search.gv-search-horizontal.gv-search-rows
└── div.gv-widget-search-general-search.gv-grid
    ├── div.gv-grid-row
    │   └── div.gv-grid-col-1-1
    │       └── div.gv-search-widget-area.gv-search-horizontal
    │           ├── div.gv-search-box.gv-search-field-text.gv-search-field-search_all
    │           ├── div.gv-search-box.gv-search-field-select
    │           ├── div.gv-search-box.gv-search-date.gv-search-field-entry_date
    │           └── div.gv-search-box.gv-search-field-text
    └── div.gv-grid-row (submit row)
        ├── div.gv-grid-col-1-2
        │   └── div.gv-search-box.gv-search-box-submit
        │       ├── a.button.gv-search-clear (optional)
        │       └── input.button.gv-search-button
        └── div.gv-grid-col-1-2
            └── input[type=hidden][name=mode]

Search box types

  • Text: div.gv-search-box.gv-search-field-text
  • Search all: div.gv-search-box.gv-search-field-text.gv-search-field-search_all
  • Select: div.gv-search-box.gv-search-field-select
  • Multiselect: div.gv-search-box.gv-search-field-multiselect
  • Checkbox: div.gv-search-box.gv-search-field-checkbox
  • Radio: div.gv-search-box.gv-search-field-radio
  • Link: div.gv-search-box.gv-search-field-link.gv-search-box-links
  • Date: div.gv-search-box.gv-search-date.gv-search-field-entry_date
  • Date range: div.gv-search-box.gv-search-date-range
  • Number range: div.gv-search-box.gv-search-number.gv-search-number-range

Buttons

  • Submit: input.button.gv-search-button
  • Clear: a.button.gv-search-clear

Active search state

The form receives .gv-is-search class when an active search is in progress.

Advanced search sections use:

  • .gv-widget-search-advanced-search — Container
  • .gv-search-advanced--open — Expanded state

HTML example

<form class="gv-widget-search gv-search-horizontal gv-search-rows"
      method="get" action="/your-view-page/#gv-view-47-1"
      data-viewid="47">

  <div class="gv-widget-search-general-search gv-grid">
    <div class="gv-grid-row">
      <div class="gv-grid-col-1-1">
        <div class="gv-search-widget-area gv-search-horizontal">

          <div class="gv-search-box gv-search-field-text gv-search-field-search_all">
            <div class="gv-search">
              <label for="gv_search_47">Search entries</label>
              <p>
                <input type="search" name="gv_search" id="gv_search_47" value="">
              </p>
            </div>
          </div>

          <div class="gv-search-box gv-search-field-select">
            <label for="search-box-filter_5">Status</label>
            <p>
              <select name="filter_5" id="search-box-filter_5">
                <option value="" selected>—</option>
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
              </select>
            </p>
          </div>

          <div class="gv-search-box gv-search-date gv-search-field-entry_date">
            <label for="gv_start_date_47">Filter by date:</label>
            <p>
              <input name="gv_start" id="gv_start_date_47" type="text"
                     class="gv-datepicker datepicker mdy hasDatepicker" value="">
            </p>
          </div>

        </div>
      </div>
    </div>

    <div class="gv-grid-row">
      <div class="gv-grid-col-1-2">
        <div class="gv-search-widget-area">
          <div class="gv-search-box gv-search-box-submit">
            <input type="submit" class="button gv-search-button" value="Search">
          </div>
        </div>
      </div>
      <div class="gv-grid-col-1-2">
        <div class="gv-search-widget-area">
          <input type="hidden" name="mode" value="any">
        </div>
      </div>
    </div>
  </div>

</form>

The gv_class() function #

The gv_class() function (a wrapper for GravityView_API::field_class()) generates CSS classes for field containers. It is used across all layouts.

How it works

The function builds an array of CSS classes from two sources:

1. Custom class setting — If the field has a custom_class setting (configured in the View Editor), it is added with Merge Tag support

2. Field ID class — Generates gv-field-{form_id}-{field_id} format

Format pattern

gv-field-{form_id}-{field_id}

Concrete examples

Form ID Field ID Generated Class
1 5 gv-field-1-5
3 12 gv-field-3-12
1 1.3 gv-field-1-1.3 (Address Street sub-field)
1 1.6 gv-field-1-1.6 (Address Country sub-field)

Complex fields (address sub-fields)

Address, Name, and other composite fields have sub-fields with decimal IDs:

  • Address field 1, Street: gv-field-1-1.3
  • Address field 1, Country: gv-field-1-1.6

Cross-form fields (joins)

When a field comes from a different form than the View’s primary form, an additional class is added:

<div class="gv-field-1-5 gv-field-3-5">
  <!-- Field ID 5 from form 3, displayed in form 1's View -->
</div>

Merge Tag CSS class conversion

Custom classes support Merge Tags. The field value is sanitized with sanitize_html_class(), which strips spaces and special characters.

Example:

Custom class {Status:8} where Status = “Office Manager” produces class OfficeManager (single class token, not two separate classes).

Filter hook

The gravityview/field_output/context/class filter allows customization:

add_filter( 'gravityview/field_output/context/class', function( $class, $args, $context ) {
    return $class . ' my-custom-class';
}, 10, 3 );

Grid system #

GravityView uses its own responsive grid system across all layouts and widgets.

Grid column classes

Class Width Description
.gv-grid — Grid container
.gv-grid-row 100% Grid row
.gv-grid-col-1-1 100% Full-width column
.gv-grid-col-1-2 50% Half-width column
.gv-grid-col-1-3 33.3% One-third width column
.gv-grid-col-2-3 66.6% Two-thirds width column
.gv-grid-col-1-4 25% Quarter-width column
.gv-grid-col-1-6 16.6% One-sixth width column
.gv-grid-col-1-8 12.5% One-eighth width column

Alignment classes

Class Description
.gv-left Left-aligned content (widget zones, footers)
.gv-right Right-aligned content (List layout footers)

See also: Adding Custom CSS Classes to fields or widgets

Responsive behavior

Grid columns collapse to 100% width at:

  • 320px (mobile portrait)
  • 480px (mobile landscape)

Other styles #

The back link appears on single-entry Views across all layouts:

<p class="gv-back-link">
  <a data-viewid="47" href="/your-view-page/">← Go back</a>
</p>

Pagination widget classes

  • Page links: .gv-widget-page-links container
    • .page-numbers — List and link class
    • .page-numbers.current — Current page
    • .prev.page-numbers — Previous button
    • .next.page-numbers — Next button
  • Pagination info: .gv-widget-pagination (“Displaying X – Y of Z”)
  • Page size: .gv-widget-page-size container

Sort indicator classes

Table layout column headers with sorting enabled use:

  • .gv-sort — Base class on sort link
  • .gv-icon-caret-up-down — Neutral sort state
  • .gv-icon-sort-asc — Sorted ascending
  • .gv-icon-sort-desc — Sorted descending

No results state classes

  • .gv-no-results — No entries wrapper
  • .gv-no-results-text — Text message variant
  • .gv-no-results-form — Embedded form variant
  • .gv-container-no-results — Container modifier when no entries

Other utility classes

  • .gv-powered-by — “Powered by GravityView” credit
  • .gv-widgets-header — Header widget zone
  • .gv-widgets-footer — Footer widget zone

Responsive breakpoints

SCSS variables:

  • $mobile-portrait: 320px
  • $mobile-landscape: 480px
  • $small-tablet: 600px
  • $tablet-portrait: 768px

Behavior:

  • Grid columns collapse to 100% at 320px and 480px
  • Table layout: <thead> and <tfoot> hidden at ≤575.98px; <td> displayed as block
  • Layout Builder: stacks at 768px
  • Edit Entry: buttons stack at 400px

CSS customization filters #

Container filters

gravityview/render/container/class

Modify the CSS class added to the wrapper <div> of a View.

Parameter Type Description
$css_class string Default: gv-container gv-container-{view_id}. Adds gv-container-no-results when no entries, gv-hidden when hidden until searched.
$context \GV\Template_Context The template context object.

Since: 1.5.4, 2.0

add_filter( 'gravityview/render/container/class', function( $css_class, $context ) {
    return $css_class . ' my-custom-container';
}, 10, 2 );

gravityview/view/wrapper_container

Modify the wrapper container HTML markup.

Parameter Type Description
$wrapper_container string Wrapper container HTML markup.
$anchor_id string (optional) Unique anchor ID to identify the View.
$view \GV\View The View object.

Since: 2.15

add_filter( 'gravityview/view/wrapper_container', function( $wrapper, $anchor_id, $view ) {
    return '<section id="' . esc_attr( $anchor_id ) . '" class="gv-template-table">{content}</section>';
}, 10, 3 );

Entry row filters

gravityview/template/table/entry/class

Modify the class applied to each entry row in Table layout.

Parameter Type Description
$class string The existing class.
$context \GV\Template_Context The template context object.

Since: 2.0.6.1

add_filter( 'gravityview/template/table/entry/class', function( $class, $context ) {
    $entry = $context->entry->as_entry();
    if ( ! empty( $entry['is_starred'] ) ) {
        $class .= ' gv-featured-entry';
    }
    return $class;
}, 10, 2 );

gravityview/template/table/entry/row/attributes

Filter the HTML attributes for a row in Table layout.

Parameter Type Description
$attributes array The HTML attributes.
$context \GV\Template_Context The template context object.

Since: 2.0

gravityview/template/list/entry/class

Modify the class applied to each entry in List layout.

Parameter Type Description
$class string The existing class.
$context \GV\Template_Context The template context object.

Since: 2.0.6.1

gravityview/template/layout-builder/entry/class

Modify the class applied to each entry in Layout Builder layout.

Parameter Type Description
$class string The existing class.
$context \GV\Template_Context The template context object.

Since: 2.46.2

gravityview_entry_class (deprecated)

Modify the class applied to an entry row. Use the layout-specific filters above instead.

Parameter Type Description
$class string Existing class. Default: alt for odd rows, empty string for even rows.
$entry array Current entry being displayed.
$view \GravityView_View Current GravityView_View object.

Field filters

gravityview/field_output/context/{$tag}

Filter content for a specific template tag placeholder. For CSS class customization, use the class tag: gravityview/field_output/context/class.

Parameter Type Description
$value string The content to be shown instead of the {{ tag }} placeholder.
$args array Arguments passed to the function.
$context \GV\Template_Context The template context object.

Since: 1.11, 2.0

add_filter( 'gravityview/field_output/context/class', function( $class, $args, $context ) {
    return $class . ' custom-field-class';
}, 10, 3 );

gravityview/field_output/args

Modify the args before field output generation begins.

Parameter Type Description
$args array Associative array; field and form are required.
$passed_args array Original associative array with field data.
$context \GV\Template_Context The template context object.

Since: 1.7, 2.0

gravityview_field_output

Modify the final rendered field HTML output.

Parameter Type Description
$html string Existing HTML output.
$args array Arguments passed to the function.
$context \GV\Template_Context The template context object.

Since: 2.0

gravityview/field_output/pre_html

Modify the field HTML template before placeholder replacement.

Parameter Type Description
$markup string The HTML markup template.
$args array All args for the field output.
$context \GV\Template_Context The template context object.

Since: 1.11, 2.0

Search filters

gravityview_search_class

Modify the CSS class for the search form.

Parameter Type Description
$search_class string The CSS class for the search form. 
add_filter( 'gravityview_search_class', function( $search_class ) {
    return $search_class . ' custom-search-class';
});

gk/gravityview/search/widget/grid/column-class

Filter the CSS class for search widget grid columns.

Parameter Type Description
$column_class string The CSS class for the column (e.g., gv-grid-col-1-3).
$col string The original column specification.
$areas array Array of areas within the column.
$search_fields \Search_Field_Collection The search fields collection.

Since: 2.44

DIY-specific filters

gravityview-diy/container

Changes the container element type (default: 'div'). Return false or empty string to remove container.

add_filter( 'gravityview-diy/container', function() {
    return 'section'; // or '__return_false' to remove
});

gravityview-diy/wrap/multiple

Toggles entry wrapping in the multiple-entry view (default: true).

gravityview-diy/wrap/single

Toggles entry wrapping in the single-entry view (default: true).

gravityview-diy/container-tags

Modifies available container tag options for field wrapping.

Returns: array of 'tag' => 'LABEL'

Widget zone filters

gravityview/widgets/wrapper_css_class

Modify the CSS class applied to the widget zone wrapper <div> (the .gv-widgets-header and .gv-widgets-footer containers).

Parameter Type Description
$css_class string Default: gv-grid gv-widgets-{zone}. Adds gv-widgets-no-results when the View has no results.
$zone string Current widget zone: header or footer.
$widgets array Array of widget configurations for the current zone.

Since: 1.16.2

add_filter( 'gravityview/widgets/wrapper_css_class', function( $css_class, $zone, $widgets ) {
    if ( 'header' === $zone ) {
        $css_class .= ' my-custom-header';
    }
    return $css_class;
}, 10, 3 );

Other filters

gravityview_lightbox_script

Override the lightbox script to enqueue. Default: thickbox.

Parameter Type Description
$script_slug string If you want to use a different lightbox script, return the name of it here.
$view \GV\View The View object.

Since: 2.5.1

add_filter( 'gravityview_lightbox_script', function( $script_slug ) {
    return 'my-lightbox-script';
}, 10, 2 );

gravityview_datatables_table_class

Modifies the CSS classes applied to the DataTables <table> element.

Parameter Type Description
$classes array Array of CSS class strings. 
add_filter( 'gravityview_datatables_table_class', function( $classes ) {
    $classes[] = 'my-custom-table-class';
    return $classes;
});

Related links #

Was this page helpful?

Table Of Contents