Better questions.
Better enquiries.

Install and open the builder

Use the installer made for your OpenCart major version. This guide follows the current OC3 development release, 0.1.5-dev.

1. Back up your store files and database. Start on a staging copy, particularly when another theme or extension affects your forms.
2. In OpenCart administration, open Extensions > Installer and upload the OC3 .ocmod.zip file without extracting it.
3. Wait for the installer to report success. Open Extensions > Extensions and select the Modules extension type.
4. Find ViralMESH Form Builder. On a first installation, install the module, then open its edit screen. For an update, open the existing builder rather than uninstalling it.
5. Open Diagnostics and check the version. Return to Forms and choose New form.

1. Build your form

Start with a short, specific form name, such as "Request a garage door quote". The default enquiry fields give you a starting point, not a fixed template.

1. Select a field on the canvas to change its label and whether an answer is required.
2. Choose Add a field. Search for a field or browse all the options in the pop-up.
3. Select the new field and make the question meaningful to a customer. "Which finish would you like?" is clearer than "Image choices".
4. Use the move controls to change the order. Duplicate a field when it is easier to adapt an existing question.
5. Use More field settings only when you need additional control. Check any conditions, calculations or multi-step behaviour with realistic answers.
6. Choose Save draft and use Preview. When the questions are ready, select Next: Email delivery.

Keep required questions to the information you genuinely need. Shorter forms are usually easier to complete. Saving a draft is not the same as publishing it.

Give image choices a name and a layout

1. Open Add a field, then choose Image choices.
2. Set the field label to the question the customer should answer.
3. Enter an Image name and select Choose image. Pick an image from the OpenCart image manager.
4. Wait for the image manager to close, then choose Add image choice for each additional option. Give every option its own clear name.
5. Under Images per row, choose your Mobile columns, Tablet columns and Desktop columns.
6. Preview all three sizes. If the images look too small, reduce the number of columns.

What the screen sizes mean

Mobile is below 768px. Tablet is 768px to 1023px. Desktop is 1024px and above. These are screen-width breakpoints, so use fewer columns if the form is placed in a narrow sidebar.

After changing a published form, finish the update workflow. A saved draft alone does not change the published version.

2. Decide where enquiries go

The email step controls form notifications. Your OpenCart store's existing mail or SMTP configuration handles the actual delivery.

1. Leave Send email notifications on if staff should receive enquiries by email.
2. Enter the intended address under Send enquiries to. Check spelling carefully.
3. Choose a useful Email subject. The {form_title} tag inserts the form name.
4. Set Reply to the visitor to the form's email field if replies should go to the customer. Do not use a free-text name field as an email address.
5. Confirm Store availability. Review each intended store and its recipient settings when using multiple stores.
6. Select Next: Review form.

If you need more than one recipient

Look under Advanced settings instead of putting several addresses into the single-address field. Test the intended routing before relying on it.

3. Review, then create

The final step brings the important decisions together: form name, fields, email delivery, stores and the after-submission message.

1. Use the Change buttons to correct anything in the summary.
2. Open Preview customer form and check the reading order, image choices and responsive sizes.
3. Choose Create form, or Update form for an existing form, when you are ready to publish.
4. When the ready screen appears, note the module name and module number. These identify the module you need to place.
5. Continue to the layout instructions. Publishing and adding to a page are separate actions.

4. Add the module to an OpenCart page

Use the native layout editor for a standard OpenCart placement. Before editing an existing layout, record its current modules, positions and sort order.

1. From the ready screen, use Open Design > Layouts, or open the layout editor from your administration menu.
2. Edit the layout used by the intended page. A shared layout can affect several pages, so confirm you have selected the right one.
3. Add the newly created ViralMESH Form Builder module instance, matching the name shown in the builder.
4. Choose an appropriate position and sort order, then save the layout.
5. Open the customer-facing page and check it on a phone-sized, tablet-sized and desktop-sized screen.
6. Submit a controlled test enquiry. Check Entries, the confirmation message and any intended email recipients.

For a single product, category or information page, you may need a dedicated layout and a layout override rather than changing a layout shared by the whole store.

Using the Journal theme

Journal storefront compatibility is being tested. The current admin and preview checks are not a guarantee that every Journal version, skin or placement works.

1. Record your exact OpenCart, PHP and Journal versions. Test on a staging copy with the same skin and settings.
2. Create the form and its OpenCart module first. Keep a note of the module name.
3. Choose the Journal guidance on the builder's ready screen. Journal manages its page composition under Journal > Layouts; use the placement method supported by your installed version for external OpenCart modules.
4. Check the intended page, layout, row and column. Avoid adding the form to all layouts unless you want it site-wide.
5. After a change, clear the relevant theme/page cache through the theme's own controls. Do not edit Journal or OpenCart core files.
6. Test visibility, image columns, validation, a real test submission and email delivery. Repeat if a module is inserted through a popup or other dynamic content area.

Use Journal's layout documentation and custom layout guidance for the theme's own page-building controls.

Update without losing your place

1. Back up both the store files and database. Keep a copy of the previous extension installer and record your layout placements.
2. Export important form definitions where useful. A form export is not a full backup of entries, store settings or layouts.
3. Upload the correct new .ocmod.zip through Extensions > Installer. Do not uninstall the existing module as a routine update step.
4. Wait for success, refresh the builder and check Diagnostics for the new version. A hard refresh may be needed for browser assets.
5. Reopen an existing form and check its saved values. Preview each screen size, then test the published page.

The current release is 0.1.5-dev. It fixes the tablet preview breakpoint and the installed version shown in Diagnostics. Development releases should be tested before use on a live store.

Troubleshooting and common questions