MyListing Form Percent Indicator
The {CODICTS} MyListing Form Percent Indicator plugin enhances the Add Listing and Edit Listing forms by adding a real-time circular percentage progress indicator, section completion checkmarks, and sticky sidebar navigation. Users can see at a glance how complete their listing form is as they fill it in, encouraging them to complete every field.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
Once activated, the percentage indicator appears automatically on all Add Listing and Edit Listing forms. No configuration is needed for the default equal-weight mode. Optionally, navigate to “Form Percent Indicator” in the admin menu to configure custom field weights.
Key Features
| Feature | Description |
|---|---|
| Circular Progress Indicator | An animated circle at the top of the sidebar navigation shows the form’s completion percentage in real time (0–100%), updating as users fill in fields. |
| Color-Coded Progress | The circle changes color based on completion: red (0–59%), orange (60–89%), green (90–100%). |
| Section Completion Checkmarks | Green tick marks appear on the sidebar navigation for each form section that has all its fields filled in. |
| Sticky Sidebar Navigation | The form’s section navigation stays visible as the user scrolls through long forms. |
| Custom Field Weighting | Optionally assign specific percentage weights to individual fields per listing type, instead of equal distribution. |
| Real-Time Updates | The progress indicator updates every second, scanning all form inputs including text, textareas, selects, checkboxes, file uploads, and rich text editors. |
How It Works
When a user opens the Add Listing or Edit Listing form, the plugin injects a circular progress indicator into the sidebar navigation. Every second, it scans all form inputs and calculates how many are filled in.
The Progress Circle
The circle displays the current completion percentage as a number inside an animated ring. The color changes based on progress:
| Percentage Range | Color | Meaning |
|---|---|---|
| 0–59% | Red | Form is mostly incomplete. |
| 60–89% | Orange | Good progress — keep going. |
| 90–100% | Green | Nearly or fully complete. |
Section Checkmarks
When every input in a form section is filled in, that section’s sidebar navigation item gets a green checkmark icon, indicating the section is complete. If any field in the section becomes empty, the checkmark is removed.
Sticky Navigation
The sidebar navigation becomes “sticky” as the user scrolls past it, staying visible on screen so users always see their progress and can quickly jump between sections.
What Counts as “Filled”
The plugin detects filled fields across all input types:
| Field Type | Considered “Filled” When… |
|---|---|
| Text / Number / Date / etc. | The value is non-empty after trimming. |
| Textarea | The value is non-empty after trimming. |
| Select / Dropdown | A non-empty value is selected. |
| Checkbox | The checkbox is checked. |
| Rich Text Editor (TinyMCE) | The editor’s text content is non-empty. |
| File Upload | A file has been uploaded (existing file URL detected). |
Some fields are automatically excluded from the count because they are auto-populated: latitude/longitude fields, timezone selects, reCAPTCHA fields, and search inputs within dropdowns.
Default Mode (Equal Weight)
By default, the plugin assigns equal weight to every visible form input. The percentage is simply:
Percentage = Filled Fields ÷ Total Fields × 100
No configuration is needed — the plugin works immediately upon activation.
Custom Field Weights
For more control, you can assign specific percentage weights to individual fields per listing type, making certain fields contribute more (or less) to the total.
Navigate to “Form Percent Indicator” in the WordPress admin menu.
Setting Up Custom Weights
1. Select the listing type tab you want to configure.
2. Check “Enable custom field weights for this listing type”.
3. Assign a percentage value (0–100) to each field. The running total updates in real time as you type.
4. Ensure the total equals exactly 100%. The display shows “OK” in green when correct, or “Should be 100%” in red when the total is wrong.
5. Click “Save Changes”. The form will not save if any enabled listing type doesn’t total 100%.
How Custom Weights Work
When custom weights are enabled, the percentage is calculated as the sum of the weights of all filled fields, rather than a simple ratio. For example:
If “Business Name” is weighted at 30%, “Description” at 25%, “Categories” at 20%, “Phone” at 15%, and “Address” at 10%, and the user has filled in Business Name and Description, the progress shows 55% (30% + 25%).
Fields Excluded from Weight Assignment
The following field types cannot be assigned weights because they are decorative elements, not data fields: form-heading, form-section, and form-wizard.
Frequently Asked Questions
Does the plugin need any configuration?
No. It works immediately upon activation using equal-weight mode. Custom field weights are entirely optional.
Where does the percentage circle appear?
At the top of the sidebar navigation on Add Listing and Edit Listing form pages.
How often is the percentage updated?
Every 1 second. The plugin continuously scans form inputs and updates the progress indicator in real time.
Does this appear on every page?
No. The plugin only loads on Add Listing and Edit Listing form pages. It detects these pages by checking for the listing form shortcode, page template, or URL parameters. It does not appear on any other pages.
What do the green checkmarks mean?
When every field in a form section is filled in, that section’s sidebar navigation item shows a green checkmark, indicating the section is fully complete.
What do the colors mean?
Red (0–59%) means mostly incomplete. Orange (60–89%) means good progress. Green (90–100%) means nearly or fully complete.
Can I weight certain fields more heavily than others?
Yes. Navigate to “Form Percent Indicator” in the admin menu, enable custom weights for a listing type, and assign percentage values to each field. The total must equal exactly 100%.
What happens if I don’t configure custom weights?
Every field contributes equally. The percentage is simply the number of filled fields divided by the total number of fields.
Why are location latitude/longitude fields excluded?
These fields are auto-populated by the map when a user selects a location. Since users don’t fill them manually, they are excluded from the percentage count.
Does the plugin work with MyListing’s work hours field?
Yes, with special handling. The timezone select is excluded (it’s auto-detected), and when a day is set to “Enter hours,” only the actual hour inputs are counted. Hidden day entries are not counted.
Does this affect the admin listing editor?
No. The progress indicator only appears on the frontend Add/Edit Listing forms. The only admin component is the optional custom weights settings page.
Troubleshooting
Progress Circle Not Appearing
| Cause | Solution |
|---|---|
| Not on an Add/Edit Listing page | The plugin only loads on pages with the listing form shortcode, the listing page template, or the correct URL parameters (job_id or listing_type). |
| Plugin not activated | Verify the plugin is active in Plugins → Installed Plugins. |
| MyListing not active | The plugin requires the MyListing theme. Install and activate it. |
| JavaScript error | Check the browser console (F12 → Console) for errors that might prevent the script from running. |
| No sidebar navigation | If the form has only one section and no sidebar, the plugin creates a navigation element dynamically. Ensure your form has at least one section defined in the listing type. |
Percentage Seems Incorrect
| Cause | Solution |
|---|---|
| Auto-populated fields are excluded | Fields like latitude, longitude, and timezone are auto-populated and excluded from the count by design. This is expected behavior. |
| Hidden fields not counted | Hidden inputs, search fields, and submit buttons are intentionally excluded. Only visible, user-editable fields are counted. |
| Custom weights don’t total 100% | Go to the settings page and ensure the field weights for the listing type add up to exactly 100%. |
| Duplicate field names | If multiple inputs share the same name (e.g., radio buttons), only the first is counted to avoid inflating the total. |
Section Checkmarks Not Appearing
| Cause | Solution |
|---|---|
| Section not fully complete | Every field in the section must be filled for the checkmark to appear. Check for any empty fields, including file uploads and dropdowns. |
| Section has no inputs | Sections with only decorative elements (headings, dividers) and no actual data fields won’t trigger checkmarks. |
Custom Weights Not Saving
| Cause | Solution |
|---|---|
| Total doesn’t equal 100% | The form won’t save if any enabled listing type’s field weights don’t total exactly 100%. Adjust the values until the indicator shows “OK” in green. |
| Custom weights not enabled | Check the “Enable custom field weights for this listing type” checkbox before assigning values. |
“MyListing Theme Not Detected” Error
The MyListing theme must be installed and active. Go to Appearance → Themes to verify.
For further support, visit codicts.com or contact us at support@codicts.com.