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.

Technology

  • 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.

Demo

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”.

GF Web API

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: 'https://mysite.com/gravityformsapi/forms/8/submissions',
 sendLater: false
};

HTTPS is required for the service worker.

Upload the offline-gravity-form folder to your web server and load it up at https://yoursite.com/offline-gravity-form/index.html.

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.

Enjoy!


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

  1. Thanks Scott For Sharing Gravity Form,Good Tackle.What i Looking For…

    Reply

  2. This is exactly what I was looking for! I want an solution for an iPad with frontend input of forms offline. All data should then be sent to a database when there is access to the internet again.

    Reply

  3. Hey Scott, really useful stuff here. I am currently using this to create custom posts for a family project. I got everything to work in my setup with the exception of file uploads. I was able add a condition for the file type field and change the data. But GF refuses to accept the data. I tried just the value from the input and the base 64 of the image. Do you know what data is necessary to provide API. This field seems like the least documented field.

    Reply

    1. I don’t know, sorry. You’d also have to figure out how to save the file while offline, which is tricky because you can’t use browser storage for that.

      Reply

Leave a Reply

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

Want to learn more about mobile apps and business? Enter your email below.
Holler Box

Ionic + WordPress

Enter your email below and I'll send you more details on my Ionic + WordPress toolkit.
Holler Box