Gravity Forms Sketch & Drawing Field Setup Guide

The Gravity Forms Sketch & Drawing Field add-on adds a Sketch field to Gravity Forms. People draw freehand with a mouse, a finger or a pen, either on a blank canvas or on top of a picture you choose for the field: a car diagram to mark damage, a body chart to show where it hurts, a floor plan, a site photo or a product drawing. They pick pen colours and sizes, use an eraser, undo, redo and clear. When the form is submitted the drawing is checked on your server and saved as a PNG image in the entry, where you see it on the entry screen, in the entry list, in notifications and confirmations, in exports and in PDF tools. This guide covers installing the add-on, adding the field, the field settings, what people see on the form, how the image is stored, the merge tags, entry editing, privacy and the most common questions.

What you need

You need Gravity Forms 2.8 or newer (tested with 2.8, 2.9 and 3.1), WordPress 6.5 or newer and PHP 7.4 or newer. The PHP GD extension is recommended (almost every host has it): with GD the add-on re-encodes every drawing before saving it. Everything runs on your own server. The drawing tool is plain browser code shipped with the add-on: no outside script, font or service is loaded, and the only outside requests are the usual GravityExtra licence checks and updates.

Install and activate

• Upload the add-on zip in Plugins → Add New → Upload Plugin and activate it.
• Go to Forms → Settings → Sketch, enter your GravityExtra licence key and press Activate License.
• The Sketch button appears in the Advanced Fields group of the form editor once the licence is active.

Without an active licence the Sketch field is not shown to visitors (form editors see a short note instead) and it never blocks a form from being submitted. Drawings that are already saved stay in their entries and staff can still open them.

Step 1: add a Sketch field

Open a form, click Sketch under Advanced Fields and give the field a clear label and description, for example Mark the damage on the car and Circle dents in red and scratches in blue. The usual Gravity Forms settings work as with any other field: Required, conditional logic, visibility, admin label, label placement, custom CSS class and the validation message.

Step 2: choose the canvas

The Canvas settings of the field decide what people draw on:

• Background picture: press Choose picture and pick or upload an image in the Media Library (PNG, JPEG, GIF or WebP). The canvas takes the shape of the picture, so a wide car diagram gives a wide canvas and a square body chart gives a square one. Remove goes back to a blank canvas.
• Shape without a picture: landscape 4:3 or 3:2, wide 16:9, square, or portrait 3:4 or 2:3.
• Background colour: the colour of the canvas (white unless you change it). It also shows through transparent parts of a PNG picture.

Pictures with clear, light line work work best: grey outlines on white leave room for coloured strokes. Use the full-size image: the add-on draws the picture under the strokes in the saved image at up to 2400 pixels wide.

Step 3: set the drawing tools

Under Drawing tools, set the Pen colours (hex colours separated by commas, 1 to 12; the first one is selected when the form opens) and the Pen sizes (whole numbers from 1 to 80, at most 6). Leave both empty to use the defaults from Forms → Settings → Sketch: black, red, blue, green, orange and purple, and sizes 3, 6, 12 and 24. Sizes are measured on a drawing 1000 pixels wide, so a line looks the same on a phone, a tablet, a large screen and in the saved image. Tick Hide the eraser if you do not want people to rub anything out.

What people see on the form

The field shows a toolbar above the canvas: the colour swatches, the pen sizes, Eraser, Undo, Redo and Clear.

• Draw with the mouse (left button), a finger on a phone or tablet, or a pen. Each line from press to release is one stroke; draw as many strokes as you like.
• The Eraser rubs out strokes only. The background picture is never erased. Choosing a colour switches back to the pen.
• Undo removes the last stroke, Redo brings it back. Clear empties the canvas and can itself be undone. With the drawing area focused, Ctrl+Z undoes and Ctrl+Y (or Ctrl+Shift+Z) redoes; on a Mac use Cmd.
• The canvas always fills the width of the form, keeps its shape and stays sharp on retina screens. Strokes are kept as positions on the picture, not as screen pixels, so they stay in place when a phone is turned or the window is resized.
• A required field needs at least one pen stroke. Strokes made only with the eraser do not count.
• If the form shows a validation error, or people go to the next page of a multi-page form and back, the drawing is still there and can still be undone stroke by stroke.

On phones the toolbar wraps onto several rows of large buttons and the page does not scroll while a finger draws on the canvas.

How the drawing is saved

On every change the browser prepares a PNG image of the background colour, the picture and the strokes, at the width set under Saved image width (1200 pixels unless you change it; 600 to 2400). When the form is submitted the server checks that the image really is a PNG, at most 4 MB and at most 3000 pixels on each side, re-encodes it with GD and saves it with a random 32-character name in a folder of its own inside the Gravity Forms uploads folder. That folder has a random name too and a .htaccess file that blocks direct access on Apache and LiteSpeed. On nginx, direct access is blocked only by the random names, so the images are opened through signed links instead of file addresses (see below).

If your Media Library is served from another domain that does not allow it, the browser cannot copy the picture into the image. The add-on then sends only the strokes and draws them over the picture on your server, so the saved image looks the same.

With Keep the drawing steps on (the default), every stroke with its colour and size is also kept with the entry. That is what lets staff edit a drawing stroke by stroke later.

Where you see the drawing

• Entry screen: the image with the number of strokes, its size, the date and an Open full size link.
• Entry list: a small preview when the field is one of the list columns.
• Exports: the image link.
• {all_fields} in notifications and confirmations: the image.

Merge tags

Use the field’s merge tag from the merge tag list, for example {Mark the damage on the car:2}, with these modifiers:

• {Label:2}: the image (in HTML e-mails and confirmations) or the image link (in plain text).
• {Label:2:url}: the signed image link only, for a link of your own or for PDF tools.
• {Label:2:data}: the image written inline in the message (data:image/png;base64), for PDF tools that cannot load links and for sites where image links are private.
• {Label:2:strokes}: the number of strokes.

Image links

Every image link is long and signed: it names the form, the field and the random file name and carries a code made with a secret of your site, so it cannot be guessed or changed to open another image. A link only works while its entry exists and is active (staff can also open links of entries in the trash or marked as spam).

Under Images and data in the settings you choose who may open the links. Anyone who has the link (the default) is needed for images in e-mails and for PDF tools that load images over the web. Switch it off and only logged-in staff who can view entries open the images; use the :data modifier for e-mails then.

Editing an entry

Staff who can edit entries press Edit on the entry screen and see the drawing on the canvas. They can add strokes, erase or clear and then press Update: a new image is saved and the old file is deleted. If they do not touch the canvas, the stored image is kept as it is.

Accessibility

All tools are real buttons with names for screen readers (for example Pen colour 2 (#dc2626) and Pen size 12) and show which colour, size and tool is selected. The canvas has a name and a description, keyboard shortcuts for undo and redo, and a status line that announces the number of strokes after each change. Drawing itself needs a pointer: for people who cannot draw, keep the field optional or add a text field such as Describe the damage next to it.

Privacy and uninstalling

Drawings are stored only on your server. Deleting an entry deletes its images. When you uninstall the add-on, its settings, the image link secret and the licence data are removed; the images stay in the uploads folder unless you switch on Delete the saved sketch images when the add-on is uninstalled first. Entries are never deleted by the add-on.

Frequently asked questions

Is this a signature field?

No. It is a drawing tool: several colours and pen sizes, an eraser, undo and redo, any canvas shape and a picture to draw on. For signatures on contracts and waivers use a signature field.

Can people draw on a photo they take themselves?

Not in this field. The background picture is chosen by you in the form editor. Add a File Upload field for people’s own photos.

Can I use several Sketch fields in one form?

Yes, each with its own picture, shape, colours and sizes, also on different pages of a multi-page form.

Does it work with conditional logic and AJAX forms?

Yes. A hidden Sketch field is not checked, and the drawing tool starts again after an AJAX submission or page change.

Can I get the image into a PDF?

Yes. PDF tools that load images from links use the image (keep Anyone who has the link on). For tools that cannot load links, put {Label:2:data} in the PDF template.