Voxel Form Summary Widget
The {CODICTS} Voxel Form Summary Widget plugin adds an interactive table of contents and an optional circular progress ring to the Voxel Theme’s “Create Post” forms. It gives users a visual overview of all form steps and fields, lets them jump between sections, and tracks how much of the form they’ve completed — all in real time.
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, you can use the widget via a shortcode or the Elementor widget on your Voxel “Create Post” templates.
Key Features
| Feature | Description |
|---|---|
| Form Summary (TOC) | Collapsible accordion listing all form steps and their fillable fields. |
| Progress Ring | Circular SVG indicator showing real-time form completion percentage. |
| Step Navigation | Click a step in the summary to jump the Voxel form to that step. |
| Field Scrolling | Click a field name to smooth-scroll to that field in the form. |
| Field Weights | Assign percentage importance to specific fields so key fields contribute more to the progress. |
| Conditional Awareness | Respects Voxel’s conditional show/hide rules — hidden steps and fields are automatically excluded. |
| Real-Time Updates | Progress and visibility update continuously as the user fills in the form. |
| Two Delivery Methods | Available as a shortcode (form summary only) or Elementor widget (full features with progress ring). |
Shortcode vs. Elementor Widget
The plugin offers two ways to add the form summary to your pages:
| Feature | Shortcode | Elementor Widget |
|---|---|---|
| Form Summary (TOC) | ✅ | ✅ |
| Progress Ring | — | ✅ |
| Field Weights | — | ✅ |
| Style Controls | CSS only | Full Elementor controls |
| Display Mode Options | — | Summary only, Ring only, or Both |
Use the shortcode if you just need a simple table of contents without Elementor. Use the Elementor widget for the full feature set including the progress ring, field weights, and styling controls.
Using the Shortcode
Add the following shortcode to any Voxel “Create Post” template or page where a Voxel post creation form is displayed:
[codicts-voxel-form-summary-widget type="places"]Replace places with the key of the Voxel post type you want the summary for (e.g., events, hotels, jobs).
| Attribute | Required | Description |
|---|---|---|
type | Yes | The Voxel post type key. Must match exactly (case-sensitive). |
Examples:
[codicts-voxel-form-summary-widget type="places"][codicts-voxel-form-summary-widget type=”events”]
[codicts-voxel-form-summary-widget type=”jobs”]
Note: The shortcode renders a form summary only (no progress ring). For the progress ring and style controls, use the Elementor widget.
Using the Elementor Widget
Step 1: Add the Widget
In the Elementor editor on your Voxel “Create Post” template, search for “{C} Form Summary Widget” in the widget panel (under the {CODICTS} category) and drag it onto your page.
Step 2: Select the Post Type
In the widget’s Content tab, choose the Voxel post type from the “Choose Post Type” dropdown. This determines which form’s fields and steps the widget displays.
Step 3: Choose the Display Mode
| Mode | What It Shows |
|---|---|
| Form Summary Only | The collapsible table of contents with steps and fields. |
| Progress Ring Only | The circular completion indicator. |
| Both | Both the form summary and the progress ring. You can position the ring above or below the summary. |
Step 4: Configure Field Weights (Optional)
If you want certain fields to contribute more to the progress percentage, open the Field Weights section for your selected post type. Click “Add Item” to add a field weight entry, then select a field and set its weight percentage.
See the Field Weights section below for details on how weighting works.
Step 5: Style the Widget
Switch to the Style tab to customize the appearance:
Progress Ring Style:
| Setting | Default | Description |
|---|---|---|
| Ring Size | 120px | Diameter of the progress ring (50–300px). |
| Progress Color | #007cba | Color of the filled portion. |
| Background Color | #e0e0e0 | Color of the unfilled portion. |
| Ring Thickness | 8px | Stroke width of the ring (2–20px). |
| Text Color | Inherit | Color of the percentage number inside the ring. |
Form Summary Style:
| Setting | Default | Description |
|---|---|---|
| Text Color | Inherit | Color of step labels and field links. |
The Form Summary (Table of Contents)
The form summary displays all form steps as a collapsible accordion. Each step can be expanded to reveal the fillable fields within it.
How It Works
Accordion Behavior: One step is open at a time. Clicking a step expands it and collapses the previously open step. The active step appears at full opacity while inactive steps are dimmed.
Step Navigation (Edit Mode): When editing an existing post, clicking a step in the summary automatically navigates the Voxel form to that step. This makes it easy to jump between sections without clicking “Next” repeatedly.
Note: Step navigation via clicking is only available when editing existing posts (the URL contains a
post_idparameter). On new post creation, the form must be advanced through steps normally because Voxel may require field validation before proceeding.
Field Scrolling: Click any field name in the summary to smooth-scroll to that field in the form. This works in both new post and edit modes.
What Appears in the Summary
The summary only shows fillable fields — fields where users enter data. The following are automatically excluded:
| Excluded | Reason |
|---|---|
| Step dividers | These are treated as group headers, not fields. |
| Image decorations, headings, HTML blocks | These are visual UI elements with no data to fill. |
| Hidden fields | Fields marked as hidden in the Voxel configuration. |
| Conditionally hidden fields | Fields whose visibility conditions are not currently met. |
The Progress Ring
The progress ring is a circular indicator that shows what percentage of the form the user has completed. It updates in real time as the user fills in fields.
How Fields Are Counted as “Filled”
The plugin checks each field’s value to determine if it has been filled in:
| Field Value | Counted As |
|---|---|
| Empty text, null, or undefined | Not filled |
| Any non-empty text | Filled |
| An array with items | Filled |
| An object with meaningful data (non-empty text, true, or positive numbers) | Filled |
| A Product field with “enabled” turned on | Filled |
Without Field Weights
By default, all visible fields contribute equally to the progress. If a form has 10 visible fields and 4 are filled, the progress shows 40%.
With Field Weights
When field weights are configured, important fields contribute more to the percentage. See the next section for details.
Note: The progress ring is only available through the Elementor widget, not the shortcode.
Field Weights
The field weight system lets you assign different importance levels to fields. For example, a “Title” field might be worth 30% of the total progress, while a “Phone Number” field might only be worth 5%.
How to Configure
In the Elementor widget settings, open the Field Weights section for your post type. Click “Add Item” for each field you want to weight, then select the field and set its percentage.
How the Calculation Works
Fields with custom weights use their assigned percentage. The remaining percentage is split equally among fields without custom weights.
Example:
| Field | Custom Weight | Filled? | Contribution |
|---|---|---|---|
| Title | 30% | ✅ Yes | 30% |
| Description | 20% | ❌ No | 0% |
| Price | — | ✅ Yes | 16.67% |
| Location | — | ✅ Yes | 16.67% |
| Category | — | ❌ No | 0% |
Remaining percentage: 100% − 50% (Title + Description) = 50%, split among 3 unweighted fields = 16.67% each.
Total progress: 30% + 16.67% + 16.67% = 63%
Note: Only currently visible fields are included in the calculation. If a conditional field is hidden, its weight is excluded entirely, and the remaining percentage is redistributed.
Conditional Field Handling
Voxel supports conditional visibility for both steps and individual fields. The Form Summary Widget respects these rules in both the summary and the progress ring:
When a step is conditionally hidden: The step and all its fields disappear from the summary and are excluded from the progress calculation.
When an individual field is conditionally hidden: The field disappears from the summary and is excluded from the progress calculation.
When a condition becomes met: The step or field reappears in the summary, and the progress calculation adjusts. This may cause the percentage to go down temporarily since new unfilled fields have been added.
All of this updates in real time as the user interacts with the form.
Troubleshooting
“Voxel Theme Not Detected” Error
Ensure the Voxel Theme is installed and set as the active theme (or parent theme if using a child theme). Go to Appearance → Themes to verify.
Widget Not Showing on the Page
| Cause | Solution |
|---|---|
| Wrong post type key | The type attribute must match the Voxel post type key exactly (case-sensitive). Check the key in Voxel → Post Types. |
| Not on a create/edit post page | The widget only works on pages with an active Voxel create-post form. It won’t display on regular pages. |
| JavaScript error | Check the browser console for errors. The widget requires Voxel’s form to be fully initialized before it can sync. |
Steps Are Showing But No Fields Inside Them
If steps appear in the summary but have no fields listed, the fields may all be UI-only types (image decorations, headings, HTML blocks) which are excluded, or they may be hidden by Voxel’s conditional visibility rules or marked as hidden in the post type configuration.
Progress Ring Not Updating
| Cause | Solution |
|---|---|
| Using shortcode | The progress ring is only available via the Elementor widget. |
| Wrong field keys in weights | Ensure the field keys selected in the weight repeater match the actual Voxel field keys. |
| Form not detected | The widget looks for a Voxel create-post form with a matching post type. Ensure the form is present on the page. |
Step Navigation Not Working (Clicking Steps Does Nothing)
Step navigation is only active when editing an existing post (the URL contains a post_id parameter). On new post creation, the Voxel form may require field validation before advancing, so step-skipping is disabled.
Progress Shows an Unexpected Percentage
Conditional fields that are currently hidden are excluded from the calculation. This means the total number of fields in the progress denominator changes as conditions are met or unmet. This is expected behavior — it ensures the percentage reflects only the fields the user can actually see and fill in. Complex object fields (like Products) have specific fill detection rules that may differ from simple text fields.
For further support, visit codicts.com or contact us at support@codicts.com.