Documentation

Drawing Tools Field

Last modified: September 14, 2026

The Drawing Tools Field adds a configurable drawing interface to a linked Gravity Geolocation Map Field. Visitors can create and manage multiple markers, polylines, polygons, rectangles, circles, and freehand shapes while the field saves the complete drawing collection with the Gravity Forms entry.

Table of Contents

Drawing Tools Field Overview

The Drawing Tools Field is the controller and data container for map drawing. It does not create a separate map. Instead, it connects to an existing Map Field and places its controls either inside the form or as a toolbar inside that map.

Each drawing can include its geometry, color, label, and measurements. The field can also keep totals for a collection of shapes, making the saved entry useful for service areas, delivery zones, property boundaries, route sketches, coverage maps, and other geometry-based workflows.

Drawing tools displayed with a Gravity Forms map

Let visitors draw and manage shapes on a linked Gravity Geolocation map.

Required Fields

Add a Google Map Field to the same form before configuring the Drawing Tools Field. The Drawing Tools Field must be linked to that map. Add one or more Drawing Shape Fields only when you also need individually configured predefined shapes.

Drawing Tools Field Settings

1. Map Field for Drawing

Select the Map Field that will receive the drawings. Choose None only while preparing the form; the front-end drawing controls need a linked map to operate.

2. Drawing Tools UI Type

Choose Buttons for labeled controls or Icons Bar for a compact toolbar.

3. Drawing Tools UI Position

Place the interface Inside Form as a normal field area or Inside Map as an overlay on the selected map.

4. Enabled Drawing Tools

Select any combination of Marker, Polyline, Polygon, Rectangle, Circle, and Freehand. Only the chosen tools are available to visitors.

5. Shape Labels and Colors

Customize the button text and default color for each enabled shape type. The Enable Color Picker option lets visitors change a shape's color, while Enable Shape Labels lets them add or edit a label. Customize the delete button text shown in the shape panel when needed.

6. Action Buttons

Enable the actions appropriate for the form: Clear Shapes, Undo, Redo, Copy JSON, Export, and Import. The corresponding text settings control the labels used by the button-style interface.

7. Predefined Shapes (JSON)

Paste JSON exported by a Drawing Tools Field to preload an existing collection when the form opens. Use the exact structure produced by the Export action.

8. Standard Gravity Forms Settings

Configure the label, description, size, CSS class, visibility, and conditional logic as needed. The field supports conditional logic and duplicate-value restrictions.

Gravity Forms Drawing Tools Field settings

Choose the linked Map Field, interface style, and enabled drawing tools.

Predefined Shapes and Import/Export

The Drawing Tools Field can start empty or load a predefined drawing collection. A simple way to create reusable predefined data is:

  1. Enable the Export action and build the desired shapes on a test form.
  2. Export the drawing JSON.
  3. Paste that JSON into Predefined Shapes (JSON) in the form editor.
  4. Save and reload the form to verify the shapes, colors, labels, and measurements.

The Copy JSON action copies the current drawing data, while Export downloads it for reuse. Import lets a visitor load a compatible exported drawing collection into the current form.

Saved Data, Entry Output, and Merge Tags

The field saves the drawing collection as structured data. Entry details display the saved shapes on a map with collection totals. The normal merge tag uses that map-and-totals view.

Available merge-tag output modifiers include:

  • map for the saved shapes on a map.
  • metrics for a list of per-shape measurements.
  • totals for collection totals.
  • map_totals for the map and totals together.
  • json, serialized, serialized_pretty, or text for data-oriented output.

Append the modifier to the field ID in the merge tag, for example {Drawing Tools:12.totals}.

Basic Setup

  1. Add and configure a Map Field.
  2. Add the Drawing Tools Field and select that map in Map Field for Drawing.
  3. Choose the toolbar type and position.
  4. Select the shapes and actions visitors should be allowed to use.
  5. Configure labels, colors, and optional predefined drawing JSON.
  6. Save the form and test drawing, editing, undo/redo, clearing, and form submission.

Troubleshooting

  • The tools appear but do not draw: Confirm that the correct Map Field is selected and visible when the form loads.
  • The toolbar is missing: Make sure at least one drawing tool is enabled and that conditional logic is not hiding the field.
  • Predefined shapes do not load: Use unmodified JSON created by the Drawing Tools Export action and confirm that it represents a valid collection.
  • Imported data is rejected: Re-export the file from the current Drawing Tools Field version instead of using a different GeoJSON structure.
menu-circle