MyListing Add Listing Form Wizard
The {CODICTS} MyListing Add Listing Form Wizard plugin transforms the standard MyListing “Add Listing” form into a multi-step wizard with clear navigation, per-step validation, and a visual progress indicator. Instead of one long scrolling form, your users get a guided step-by-step experience.
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”.
The plugin automatically copies the necessary template files into your child theme on activation. No additional setup is needed before you start adding wizard steps to your listing types.
Key Features
| Feature | Description |
|---|---|
| Multi-Step Wizard | Splits the MyListing add-listing form into manageable steps using a drag-and-drop field in the listing type editor. |
| Visual Progress Indicator | An animated progress bar at the top of the form shows users how far through the process they are. |
| Step-by-Step Validation | Required fields are validated on each step before the user can advance, preventing incomplete submissions. |
| Next / Previous Navigation | Header navigation with chevron arrows and step counter, plus full-width footer buttons labeled “Next step” and “Previous step”. |
| Sidebar Navigation Sync | The MyListing sidebar section navigation updates dynamically to show only the sections relevant to the current step. |
| Mapbox Resize Fix | Automatically triggers map resize when navigating between steps, preventing rendering issues. |
| RTL Support | Full right-to-left language support with mirrored icons, animations, and spacing. |
| Automatic Cleanup | Template files are automatically removed from your child theme when the plugin is deactivated or uninstalled. |
How It Works
The plugin adds a new field type called “{C} Form Wizard Group” to the MyListing listing type editor. These fields act as step dividers — they don’t store any data or display anything on their own. Instead, they tell the plugin where to split the form into steps.
On the frontend, the plugin’s JavaScript detects these markers and automatically restructures the form into a wizard with navigation controls, a progress bar, and per-step validation.
Minimum requirement: You need at least 2 Form Wizard Group fields for the wizard to activate. With 0 or 1, the wizard is disabled and the form functions normally as a single page.
Setting Up the Wizard
Step 1: Open the Listing Type Editor
Navigate to WordPress Admin → Listing Types and edit the listing type you want to add the wizard to. Go to the Fields tab.
Step 2: Add Form Wizard Groups
In the editor sidebar, click the “{C} Form Wizard Group” button to insert a wizard group marker. Add one for each step you want in your wizard.
Step 3: Position the Groups
Drag the {C} Form Wizard Group fields to position them as step dividers between your existing form sections. Everything between two wizard group markers becomes one step.
Step 4: Label Each Step
Click on each Form Wizard Group field to expand it, and give it a label. This label becomes the step title displayed in the wizard header on the frontend.
Step 5: Save
Save the listing type. The wizard is now active on the frontend for that listing type’s add-listing form.
Example Layout
Here’s how a typical 3-step wizard layout looks in the listing type editor:
| Form Wizard Group | Fields Below It |
|---|---|
| “Basic Information” | Title, Description, Category |
| “Location & Contact” | Location, Phone, Email |
| “Media” | Logo, Cover Image, Gallery |
This creates a 3-step wizard where users fill in basic details first, then location and contact info, then upload their media.
The Wizard Flow
| Step | What the User Sees |
|---|---|
| First step | The “Previous” button is disabled. Only the first group’s fields are visible. The progress bar shows the beginning. |
| Middle steps | Both “Previous” and “Next” buttons are active. The progress bar fills incrementally with each step. |
| Final step | The “Next” button is hidden. The MyListing submit button appears so the user can submit their listing. |
The page automatically scrolls to the top on each step change so users always start at the beginning of the new section.
Step Validation
When a user clicks “Next step”, all required fields in the current step are validated before advancing. If any required field is empty or invalid, the browser’s native validation tooltip appears on the first problem field, and navigation is blocked until it’s corrected.
Clicking “Previous step” does not trigger validation — users can always go back freely.
Tip: If you need to exclude a specific field from the wizard’s per-step validation, add the CSS class
ignore-formwizardto that input element. The wizard will skip it during validation.
Field Compatibility
The wizard works with all standard MyListing field types. It simply groups existing form sections into steps — it doesn’t modify how individual fields work. Text fields, textareas, selects, file uploads, location pickers, and all other MyListing fields function normally within wizard steps.
The plugin also includes an automatic Mapbox resize fix. Maps that are hidden during other wizard steps are automatically resized when their step becomes visible, preventing the common issue where Mapbox maps render at the wrong size or appear blank.
RTL Language Support
The plugin includes full right-to-left language support. When your site uses an RTL language, the wizard automatically mirrors navigation icons (chevrons), reverses the progress bar animation direction, and adjusts all spacing and layout to match RTL conventions.
Why a Child Theme Is Required
The plugin works by copying a template override file into your MyListing child theme. This is how MyListing’s template system works — child theme templates take priority over parent theme templates. Without a child theme, there’s no location for the override.
If you don’t have a child theme active, you’ll see this admin notice:
{CODICTS} MyListing Add Listing Form Wizard Error: My Listing Child Theme Not Detected, please install and activate the My Listing Child Theme.
On activation, the plugin automatically copies the template file into your child theme. On deactivation or uninstall, it removes the file, restoring MyListing’s default form behavior.
Frequently Asked Questions
How many wizard steps do I need?
At least 2 Form Wizard Group fields are required for the wizard to activate. With fewer than 2, the wizard is disabled and the form functions as a normal single-page form.
What happens to the submit button?
The MyListing submit button is hidden on all steps except the final one. On the last step, it appears so users can submit their listing after completing all the wizard steps.
Does it work with all MyListing field types?
Yes. The wizard groups existing form sections without modifying individual field behavior. All standard MyListing fields work within wizard steps.
Will it break my Mapbox maps?
No. The plugin includes an automatic map resize that fires on every step change, ensuring Mapbox maps render correctly when their step becomes visible.
What happens if I deactivate the plugin?
The template file copied to your child theme is automatically removed. The add-listing form reverts to the standard MyListing single-page layout. Your Form Wizard Group fields will still exist in the listing type editor but will have no effect.
What happens if I switch themes?
The plugin detects theme switches and automatically cleans up template files. If you switch to a different MyListing child theme, templates are re-evaluated and re-installed on the next page load.
Troubleshooting
“MyListing Theme Not Detected” Error
The MyListing theme must be installed and set as the active parent theme. Go to Appearance → Themes to verify.
“MyListing Child Theme Not Detected” Error
A MyListing child theme must be active. If you’re using the MyListing parent theme directly, create and activate a child theme. The plugin cannot function without one.
Wizard Not Appearing on the Frontend
| Cause | Solution |
|---|---|
| Fewer than 2 wizard groups | Add at least 2 Form Wizard Group fields to your listing type. With 0 or 1, the wizard is disabled. |
| Template file not installed | Deactivate and reactivate the plugin to force the template to be re-copied into your child theme. |
| JavaScript error on the page | Check the browser console for errors. Another plugin or theme customization may be conflicting. |
| jQuery not loaded | The wizard requires jQuery, which WordPress loads by default. Verify it hasn’t been removed by another plugin or theme. |
“{C} Form Wizard Group” Button Not in the Listing Type Editor
| Cause | Solution |
|---|---|
| Not on the Fields tab | The button only appears on the Fields tab of the listing type editor. |
| Plugin not activated | Verify the plugin is active in Plugins → Installed Plugins. |
| Admin script not loading | Check the browser console for JavaScript errors that may prevent the button from being injected. |
Validation Not Working on a Step
| Cause | Solution |
|---|---|
| Field not marked as required | The wizard validates required fields using the browser’s native validation. Ensure the fields you want validated are marked as required in the listing type editor. |
Field has ignore-formwizard class | Fields with this CSS class are excluded from wizard validation by design. Remove the class if you want the field validated. |
Map Renders Incorrectly After Changing Steps
The plugin includes an automatic Mapbox resize fix, but if maps still appear incorrectly, try navigating away from the map step and back again. If the issue persists, check the browser console for JavaScript errors that may be preventing the resize trigger from firing.
Template Files Remain After Deactivation
The plugin should automatically remove its template file from your child theme on deactivation. If it remains (which can happen due to file permissions), manually delete templates/add-listing/form-fields/form-wizard-field.php from your child theme folder.
For further support, visit codicts.com or contact us at support@codicts.com.