How can we help you?

The Gravity Forms Offline Form Submission Add-on equips your WordPress forms with resilient, client-side offline storage. In mission-critical workflows—such as field engineering audits, trade show registrations, medical intake, or rural surveys—intermittent cellular coverage or dead zones can result in lost entries and abandoned leads. This addon intercepts form submissions during network dropouts, securely queues data in browser-native storage, and prompts users to restore or submit their work once internet connectivity is re-established.

Step-by-Step Installation & Configuration

Enabling offline protection requires zero database configuration or external API credentials. Follow these 3 simple steps to activate and configure offline resilience on any of your forms:

Step 1: Installing the Addon

1. Log into your WordPress Administrator dashboard.
2. Navigate to Plugins → Add New → Upload Plugin.
3. Click Choose File, select the downloaded gf-offlineformaddon-premium.zip package, and click Install Now.
4. Once installation completes, click Activate Plugin.

Step 2: Activating Your License Key

1. Go to Forms → Settings in the left admin sidebar.
2. Select the Offline Form Add-On sub-tab.
3. Paste your License Key provided in your GravityExtra purchase confirmation email and click Save Settings to activate automatic updates and premium support.

Step 3: Enabling Offline Protection for Specific Forms

Offline protection is managed on a granular per-form basis. This gives you complete flexibility to enable offline storage on field inspection forms or audit checklists while leaving standard short contact forms untouched.

1. Navigate to Forms → Forms and click on the form you wish to protect.
2. Hover over Settings in the top navigation bar and select Offline Form Add-On.
3. Check the box labeled Enable offline.
4. Click the blue Save Settings button.

Form Settings — Enable offline mode with a single checkbox toggle.

Technical Architecture & Client-Side Storage Engine

Understanding how the addon operates under the hood ensures your team can build compliant, high-performing field forms. The architecture comprises three coordinated subsystems:

1. Network Connection Heartbeat Monitor

Relying purely on navigator.onLine can produce false positives (e.g. connected to an airport WiFi hotspot with no real internet throughput). To guarantee accuracy, the addon runs an active background heartbeat:

• Heartbeat Ping: Dispatches lightweight HTTP HEAD requests to a static endpoint (assets/connection.txt) every 30 seconds.
• Timeout Threshold: If the ping does not respond within 3 seconds, the connection is instantly flagged as offline.
• Native Event Hooks: Pairs with browser-level window.online and window.offline listeners to catch sudden network state changes immediately.

2. Browser LocalStorage Namespacing & TTL

When a form submission is attempted while offline, the submission event is captured via e.preventDefault(). Form inputs are serialized and stored under a dedicated namespace hierarchy:

3. Security & Privacy Compliance (GDPR & PCI DSS)

In compliance with strict data security standards, sensitive fields are never stored in unencrypted client-side storage. During the serialization cycle, the engine automatically detects and disables the following field types prior to serialization:

• Password Fields (.gforms-field-password): Stripped to protect account credentials.
• Credit Card & Payment Fields (.gforms-field-credit-card): Strictly omitted to maintain full PCI DSS compliance.
• Signature Fields (.gforms-field-signature): Bypassed to prevent unauthorized signature caching.

User Experience & Offline Submission Flow

Here is the exact visual sequence of what users and field staff experience during an offline session:

1. Alert While Typing Without Connection

If a user is typing on an offline-enabled form when internet connectivity drops (or if they open the page while offline), the form displays a notification bar informing them that their inputs will be securely preserved in local storage:

State 1: Form detects offline status and displays reassurance alert above inputs.

2. Submitting While Disconnected

When the user finishes filling out the form and clicks Submit while offline, the addon intercepts the request, saves the entry into local storage, clears the form to its clean state, and displays the confirmation banner:

State 2: Submission intercepted and queued safely in client storage.

3. Reconnecting & Restoring Data

Once internet connectivity is restored (e.g. returning to office WiFi or cellular range), the page immediately updates to show the [ Restore ] and [ Clear ] action buttons. Clicking Restore instantly re-populates all previous answers so the user can submit the form online with a single click:

State 3: One-click Restore prompt re-populates all offline data for immediate transmission.

How to Test & Simulate Offline Form Submissions

You can easily verify offline functionality right inside your browser without physically disconnecting your router:

1. Step 1 — Fill Out the Form: Open the page containing your offline-enabled Gravity Form. Populate sample data into required fields (names, emails, dates, checklists).
2. Step 2 — Simulate Offline Disconnection: Open Chrome Developer Tools (F12 or Cmd + Option + I), click on the Network tab, and select Offline from the network throttling dropdown (alternatively, enable Airplane Mode on your laptop or mobile device).
3. Step 3 — Submit While Disconnected: Click the form submit button. The plugin intercepts the POST request, commits the serialized payload into localStorage, resets the form to default, and displays the reassurance notification.
4. Step 4 — Reconnect & Restore: Switch the Network dropdown back to No throttling (Online) or reconnect to WiFi. The page immediately detects the live connection and provides a one-click [ Restore ] action button that re-populates all field values identically.

Multi-Page Forms, AJAX & Edge-Case Handling

Enterprise forms frequently incorporate complex logic, pagination, and file attachments. Here is how the offline engine manages these scenarios:

Multi-Page Forms & Step Navigation

For multi-page Gravity Forms, the addon saves field inputs across all completed steps. When restoring, the engine deserializes values into the form structure and synchronizes page indicators so users do not have to restart from page one.

AJAX vs. Standard Page Submissions

The offline submission engine is completely agnostic to your form’s submission mode. It supports both standard HTTP POST submissions and AJAX-enabled forms (ajax="true"). On AJAX forms, the engine binds directly to the submit button event handler to prevent browser network error screens.

File Upload Attachments

Browser localStorage is capped at 5MB–10MB per origin across all browsers. As a result, large binary file attachments cannot be reliably stored in local key-value storage. If your form requires photo attachments or PDF uploads:

• Field notes, checklists, and metadata will be 100% saved and restored.
• File upload fields will prompt the user to re-attach their file upon final submission when live internet connectivity is confirmed.

Private & Incognito Browsing Caveats

In Private Browsing (Safari) or Incognito Mode (Chrome/Firefox), browsers allocate temporary storage in RAM. While offline queueing will function during an active incognito session, closing the incognito window completely flushes the browser’s storage sandbox. Inform field workers to conduct audits in standard browser sessions.

Developer Filter & Customization Reference

Developers can customize the polling frequency, timeout parameters, and frontend UI copy using standard WordPress hooks.

1. Customizing Connection Intervals & Alert Strings

Use the gf_offline_forms_frontend_localize_data filter to adjust the heartbeat ping interval or translate notification notices:

/**
 * Customize Gravity Forms Offline Form Submission settings
 */
add_filter( 'gf_offline_forms_frontend_localize_data', function( $data ) {
    // Tighten connection heartbeat interval to 15 seconds (default: 30)
    $data['check_connection_interval'] = 15;

    // Adjust ping response timeout to 5 seconds
    $data['check_connection_timeout'] = 5;

    // Customize offline notification message
    $data['text_restore_single'] = '<p><strong>Audit Saved!</strong> Your inspection records have been securely stored on this tablet. Click Restore to sync.</p>';
    $data['text_restore_btn']    = __( 'Restore Audit Draft', 'my-theme' );

    return $data;
} );

2. Customizing Notice Banner Styling

Match the offline reassurance alert to your brand palette using custom CSS:

/* Custom Elevation & Accent for Offline Reassurance Alert */
.gforms-notice {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 4px solid #10b981 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08) !important;
}

.gforms-notice-action[href="#offline_restore"] {
    background: #10b981 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
}

Troubleshooting & Frequently Asked Questions

Related Resources & Next Steps

Explore these related resources to maximize your form submission resilience: