How to Submit a Gravity Form While Offline

I get requests to build apps with offline form submission every so often, so I thought it would be fun to build one.

In this tutorial I’ll show you how to build a web page on your site that works while offline, and can submit to Gravity Forms on your website when it regains a connection.

You can upload this project to your web server and make a few modifications, and have an offline Gravity Form in no time.


  • HTML, CSS, and JS. No frameworks or dependencies.
  • Progressive web app, in other words a web page that can work offline.
  • Gravity Forms REST API

With this app, you will be able to create a form that will work offline on any device, and save a form submission to send when you go back online.

There isn’t much polish on this, but it works. If you want a more polished version, let me know in the comments.

View this project on Github, or read the tutorial below.


In the demo below, I have the form loaded in the browser and then I turn off my connection and submit the form. You’ll see the message popup, then when I reconnect the form is successfully submitted to my site. This will appear in Gravity Forms under entries.

The entry in WordPress:

How to use this on your site

This project is not exactly drag and drop, but here’s how to use it on your site.

Build Your Form HTML

First, build the form HTML in index.html.

Each field needs to be added, for example if you have an email field you need to add that to index.html. (Technically you only need required fields to submit)

You need to go to your desired Gravity Form to get the correct field IDs. Note: you’ll see field IDs like “input_1_1_3” on your site. You need to remove the first number, so change that to “input_1_3” for the app. I have no idea why.

You can use your web inspector to find these IDs. In the example below, the input ID should be “input_2”.


Next you’ll need to enable the Gravity Forms API and get a url signature.

Visit Gravity Forms settings in your wp-admin, click Web API, and enable.

Visit main.js in the app and change line 6 (app.url) to your website and form ID. For example

var app = {
url: ‘’,
sendLater: false

HTTPS is required for the service worker.

Upload the offline-gravity-form folder to your web server and load it up at

Try it out!

Remember that if you make changes to any files, you need to delete the cache-storage in your browser and reload.

How It’s Done

This is a simple static web page that has an HTML form, and it’s submitted with Javascript.

Offline PWA

I made it work offline by making it a progressive web app, which is done by adding the manifest.json file and service worker (sw.js). The only thing the progressive web app does is cache our files so they work offline, that’s it.

The code is boilerplate, so I’m not going to explain it here.

Important: if you are making changes in development with a service worker registered, the changes will not show up until you delete the cache. Every time you make a change, open Chrome developer tools and go to Application => Cache storage => delete. Then refresh the page.

This project uses offline.js by Hubspot to get more reliable connection information.

Grab the files on Github here.



Get more great content like this, enter your email below.


Loading comments...

Leave a comment

Your email address will not be published. Required fields are marked *