Image Marker

February 21, 2025 |
blank

Image Marker for Gravity Forms

Ask about our discount bulk pricing here.

Interactively mark specific points on an image

We've developed a custom Gravity Forms field called Image Marker, designed to enhance form functionality by allowing users to interactively mark specific points on an image directly within a form. This field is perfect for scenarios where visual input is valuable-think marking pain points on a medical diagram, indicating locations on a map, or highlighting areas of interest in a photo. It's built to integrate seamlessly into the Gravity Forms ecosystem, providing an intuitive experience for both form administrators and end-users.

Who Needs It, What is it for?

Doctors, for medical notes.
Medical Recording, Interactive Patient Form.
Medical Patient Onboarding Tool

Key Features

Here's what makes the Image Marker field stand out:

  • Interactive Marking: Users can click on an image to place marks-visualized as small indicators like red dots-and the coordinates of these marks are captured and stored for processing.
  • Mandatory Input Option: Administrators can set the field as "Required," ensuring users add at least one mark before submitting the form. If no marks are added, a validation message prompts the user to engage with the image.
  • Customizable Settings: In the Gravity Forms editor, form creators can configure the field by selecting the image, setting canvas dimensions, and applying options like CSS classes or conditional logic for a tailored setup.
  • Processed Output: After submission, the marks are scaled to the original image size, drawn onto the image (e.g., as red dots), and saved as a new file linked to the form entry.
  • Email Integration: The marked image is automatically included in Gravity Forms' email notifications, so recipients can see the user's input right in their inbox.
  • User-Friendly Design: The field blends naturally into Gravity Forms, appearing as a standard field type with its own settings and validation, making it easy to use for everyone involved.
  • Real-Time Interaction: Front-end JavaScript powers the interactive experience, capturing clicks on the image and storing coordinates in a hidden input field for submission.

If you are interested in the plugin please get in touch with us.

Screenshots of the back end interface

Use any image you like for your form

We built a new type of form field where you can leave detailed marks. Try clicking on the silhouettes and submit the form.

(DEMO) New Patient Questions

Name(Required)
This image Marker field can use any jpeg or png file in your media library, and is mobile friendly.
By submitting this form you acknowledge we will be contacting you.(Required)
Posted in plugins