1. User Documentation (Admin / Content Editors)

1.1 Overview

The AxisPoints for Gravity Forms plugin allows administrators to create an interactive image-based form experience. Users can click on points (AxisPoints) on an image to answer specific Gravity Form fields step by step, before completing the rest of the form normally.

This ensures:

• A guided, visual data collection process
• One single native Gravity Forms submission
• No partial or duplicate entries

1.2 Plugin Requirements

Before installing the AxisPoints add-on:

• Gravity Forms Pro must be installed and activated
• The AxisPoints plugin will not activate without Gravity Forms Pro

1.3 Creating a Gravity Form

Admins can create any Gravity Form using Gravity Forms Pro, such as:

• Body Consultation Form
• Team Donation Form
• Part Picker Form

These forms will later be linked to an AxisPoints configuration.

1.4 AxisPoints Manager (Admin Setup)

After activating the plugin:

• A new Custom Post Type called AxisPoints Manager appears in the admin menu
• Each AxisPoints Manager post represents:
  • One interactive image
  • One associated Gravity Form

1.5 Assigning a Gravity Form

Inside an AxisPoints Manager post:

• Select one existing Gravity Form from the dropdown
• Example: Body Consultation Form

1.6 Image Upload & AxisPoint Setup

• Upload an image inside the AxisPoints Manager post
• The image preview allows:
  • Adding multiple AxisPoints
  • Dragging AxisPoints to precise XY positions
  • Clicking an AxisPoint to open its configuration popup

1.7 AxisPoint → Gravity Form Field Mapping

In the AxisPoint popup:

• All main fields from the assigned Gravity Form are listed
• Admin selects one field per AxisPoint
• Example:
  • AxisPoint on head → “Head Concern” (Radio / Dropdown)

Rules:

• Only main fields can be assigned
• Read-only dropdown options can be mapped
• Multiple AxisPoints can map to different fields

AxisPoints can be:

• Edited (position or field)
• Deleted

1.8 Display & Styling Settings

Each AxisPoints Manager post includes customization options:

• Title text
• Button labels (e.g., “Add Consultation”, “Final Consultation”)
• Button colors
• AxisPoint icon style
• Frontend layout and styling preferences

1.9 Shortcode Usage

Each AxisPoints Manager post auto-generates a shortcode:

Select Concerns

How To Use?

1. Click the body parts to view concerns.
2. Select your allergies.
3. Submit & receive your personalized treatment recommendations.

How To Use?

Your Concerns

No Options Selected

You havenot selected any options yet. Please select option to continue.

Start by making a selection to continue.

3 of 3 AxisPoints have fields assigned.

Your Selections

No Options Selected

You haven't selected any concerns. Select concerns to continue.

Back to Selection Finish Consultation

Your Selections

Add To My Consultation Save Changes Cancel

A hotspot form for the body, accepting conditional payments.

Name

First Last

Phone

Email

Areas of Concern

Head

(select)HeadachesWrinklesHair

This area is a hotspot area that you would add in the hotspot image. The "choices" are where the concerns would show up.

Head Depend

Hands

(select)NailsFingersKnuckles

This area is a hotspot area that you would add in the hotspot image. The "choices" are where the concerns would show up.

Leg

ToeKneeTigh

Nails, Fingers, Knuckles

SpotsStiffness

This area is a CONDITIONAL hotspot area that displays the options in a second screen where the previous options were displayed.

Notes

Extra Notes

Extra text area that is displayed at the end with the primary fields (name, phone, email).

Treatment Summary

Hand Consult

Price:

Conditional product amount that is tied to the selection in areas of concern.

Head Consult

Price:

Conditional product amount that is tied to the selection in areas of concern.

Totals and Payment

Total

Total that is populated based on the product that is conditionally selected from the areas of concern.

• This shortcode can be placed on any page or post
• It renders the full interactive AxisPoints experience on the frontend

1.10 Frontend User Flow

Initial View

• Left side: Image with AxisPoints
• Right side: Gravity Form loaded natively
• All form fields are initially hidden
• The form exists fully in the DOM (no cloning or duplication)

Step 1: AxisPoint Interaction

• User clicks an AxisPoint
• Only the assigned Gravity Form field becomes visible
• All other fields remain hidden
• Field displays exactly like native Gravity Forms (radio, image choice, product fields, etc.)

Add Consultation

• After filling the visible field, user clicks “Add Consultation”
• The value is stored temporarily (not submitted)
• User can select another AxisPoint and repeat the process

Edit AxisPoint

• Completed AxisPoints include an Edit option
• Clicking Edit:
  • Reopens the field
  • Prefills the previously entered value
  • Allows updating the value

Delete AxisPoint

• Clicking Delete:
  • Clears the stored value
  • Hides the field again
  • The field remains part of the form but empty

Final Consultation

• Clicking “Final Consultation”:
  • Reveals all remaining Gravity Form fields
  • AxisPoint-related fields are hidden from view
• Gravity Forms conditional logic works natively at this stage

Step 2: Submit the Form

• User completes remaining fields
• Clicks Submit once
• Gravity Forms receives one complete native submission

1.11 Important Notes

• No partial submissions
• No multiple entries
• No duplicated forms
• Gravity Forms structure and data integrity remain intact

1.12 Submission Result

• One Gravity Forms entry is created
• Includes:
  • AxisPoint-selected field values
  • Remaining form field values

2. Conclusion

The AxisPoints add-on backend is fully functional and stable.
Frontend limitations are due to core Gravity Forms constraints, not plugin defects.