How to Add a Drawing Field to Gravity Forms (Draw on an Image)

Some answers are much easier to draw than to write. Where exactly is the dent on the car? Which part of the back hurts? Where should the new shelves go? A form full of text boxes makes people describe a picture in words, and your team then has to turn those words back into a picture. This guide shows why a plain form and the usual workarounds fall short, and how to add a freehand drawing field to Gravity Forms, with a blank canvas or a picture to draw on, using the Gravity Forms Sketch & Drawing Field add-on.

The problem: some answers do not fit in a text box

Think of the forms where people keep writing long, vague descriptions. A driver reports damage after a car hire: “small scratch on the left side near the back, and a dent on the front somewhere”. A new patient fills in a physiotherapy intake: “pain in the lower back, sometimes the right leg”. A customer orders a fitted wardrobe: “the wall is about three metres, with a window on the right”. A site manager sends an inspection report: “crack in the second bay from the gate”.

Each of these answers is a location on a picture. Text loses the location. Staff call back to ask “which side?” or “how far from the door?”, the answer still leaves room for doubt, and in a dispute nobody can show what the customer actually meant at the time. A dropdown of fixed areas (front, back, left, right) helps a little, but it never matches the real shape of a car, a body or a room.

Gravity Forms has no drawing field of its own. A File Upload field lets people send a photo, but most people do not want to draw on a printout, photograph it and upload it from a phone. A signature field accepts strokes, but it is built for one signature line: one pen, no colours, no eraser, no picture underneath, and a small box that is meant to hold a name, not a floor plan.

What these forms need is simple to describe: a canvas inside the form where people can draw with a finger, a mouse or a pen, in a few colours, ideally on top of a picture you provide; and a clean image of that drawing saved with the entry, ready for your team, your e-mails and your PDFs.

Why hosted form apps and paper workarounds are a poor fit

There are three common ways around the missing field, and each has a cost.

Switching to a hosted form app with a drawing widget. Some hosted form builders offer a drawing or “draw on image” element. Using it means moving that form, and its entries, off your WordPress site: another monthly subscription (often charged per form, per submission or per user), another place where customer data is stored, and no access to your Gravity Forms notifications, add-ons, payment fields and workflows. You end up running two form systems side by side.

Paper, photos and e-mail. Print the diagram, ask people to mark it, photograph it and e-mail it in, or upload it with the form. This works for the few people who bother. Many skip it, photos arrive sideways or blurred, and the drawing is never linked to the right entry automatically.

Custom development or automation chains. A developer can build a canvas into a form, or an automation service such as Zapier or Make can move files between apps. Both cost money and time to build, and someone has to maintain the custom code through every Gravity Forms and WordPress update, test it on phones and keep the images secure.

For a site that already runs on Gravity Forms, keeping the drawing in the same form, the same entry and the same notification is the simplest and cheapest path.

How to add a drawing field to Gravity Forms

Step 1: install the add-on and activate your licence

Upload the add-on in Plugins → Add New → Upload Plugin and activate it. Open Forms → Settings → Sketch, enter your licence key and press Activate License. On the same page you can set the default pen colours and sizes for all Sketch fields, the width of the saved image (1200 pixels unless you change it) and whether image links may be opened by anyone who has them, which you need for images in e-mails.

Step 2: add the Sketch field and choose a picture

Edit your form and click Sketch in the Advanced Fields group. Give it a label that says what to draw, such as Mark the damage on the car, and a short description such as Circle dents in red and scratches in blue. Under Canvas, press Choose picture and pick a diagram from your Media Library, or leave it blank and choose the shape of the canvas: landscape, wide, square or portrait. Under Drawing tools, list the colours and pen sizes you want for this field, or leave them empty to use the defaults.

Pictures with light grey outlines on white work best, because coloured strokes stand out on them. The canvas takes the shape of the picture automatically.

Step 3: let people draw

On the form, people see a toolbar with your colours and pen sizes, an eraser, undo, redo and clear, above the canvas. They draw with a mouse, a finger or a pen. The eraser removes strokes but never the picture, and clear can be undone. On phones the canvas fills the width of the screen and the page stays still while a finger draws.

Mark the field Required if every report needs a drawing: the form then asks for at least one stroke. If the form shows an error for another field, or people move between the pages of a multi-page form, their drawing is kept.

Step 4: use the drawing in entries, e-mails and PDFs

When the form is submitted, the drawing is checked on your server and saved as a PNG image with the entry. The entry screen shows the image with the number of strokes and a full-size link; the entry list shows a small preview; exports contain the image link. In notifications and confirmations, {all_fields} and the field’s merge tag show the image. Add :url for the link only, :data to write the image into the message itself for PDF tools that cannot load links, and :strokes for the number of strokes.

Pro tips for drawing fields that people actually use

• Say what each colour means. A description such as “red = dent, blue = scratch, orange = broken part” turns a doodle into a report your team can read at a glance. Limit the field to those colours.
• One picture per question. For a full vehicle check, use one Sketch field for the top view and another for the interior, each with its own picture, instead of one crowded diagram.
• Ask for a sentence too. Add a short text field next to the drawing for details a picture cannot hold, such as the size of a dent or when the pain started. It also gives people who cannot draw a way to answer.
• Route by what was drawn. Use conditional logic on other fields (for example the type of damage) to send the notification with the drawing to the right team.
• Put the drawing in the customer’s copy. Add the merge tag to the confirmation and to the customer’s e-mail, so both sides keep the same picture of what was reported.
• Keep the drawing steps. With the steps kept, staff can open the entry, add their own notes in another colour and save a new version of the image.

Frequently asked questions

Does the drawing field work on phones and tablets?

Yes. It uses the browser’s pointer events, so a finger, a stylus and a mouse all draw. The canvas fits the screen width, stays sharp on high-resolution screens and keeps the strokes in place when the device is turned.

What file format is the drawing saved in?

A PNG image, 600 to 2400 pixels wide (1200 by default), with the background picture and the strokes together. It is stored in a protected folder inside the Gravity Forms uploads folder on your server and opened through signed links. The individual strokes can be kept with the entry as well, so staff can edit the drawing later.

Is it the same as a signature field?

No. A signature field is made for one signature line. The Sketch field is a drawing tool with colours, pen sizes, an eraser, undo and redo, any canvas shape and a picture to draw on.

Which versions and plans are supported?

Gravity Forms 2.8 and newer, including the 3.x versions, on WordPress 6.5+ and PHP 7.4+. Plans cover one site, five sites or unlimited sites; see the add-on page for details, and the setup guide for every setting.