Skip to main content

MageMe WebForms Magento 2 Module | Hyvä Compatibility

This guide provides detailed instructions on installing the Hyva_MageMeWebForms compatibility module, which integrates WebForms functionalities seamlessly with Hyva Themes.

warning

WebForms 3.3 or later is required for Hyvä Theme compatibility. Make sure you have the correct version installed before proceeding.

info

Version 2 of the compatibility module, described on this page, requires WebForms 3.3 or later. On WebForms 3.2 and earlier, install version 1 instead. It is available in your Hyvä Composer repository with any Hyvä license key, including the free one:

composer require hyva-themes/magento2-mageme-webforms

That gives you 1.9.1, the last release of the version 1 line (May 2024).

Both lines are MageMe modules and both register the same Magento module, Hyva_MageMeWebForms, so remove version 1 before installing version 2:

composer remove hyva-themes/magento2-mageme-webforms

Version 1 was distributed through the Hyvä compatibility repository. Version 2 is distributed through the MageMe repository, so Hyvä updates and access follow your Support & Update plan.

Prerequisites​

  • Magento 2: Ensure Magento 2 is installed on your server.
  • Server Access: You must have administrative access to your server's command line.
  • Composer: Confirm that Composer is installed for managing Magento 2 components.
  • Hyvä Themes: Hyvä Themes must be installed in your Magento 2 environment.
  • WebForms: Version 3.3 or later must be installed.

Alpine.js version​

Hyvä ships both Alpine.js 2 and Alpine.js 3, and each theme picks which one it loads. The module works with either, so there is nothing to configure: it detects the version your theme loads and emits the matching component syntax.

To see which version a theme uses, open the storefront and run this in the browser console:

Alpine.version

A theme selects Alpine 3 through the alpine key in its etc/hyva-libraries.json file:

{
  "alpine": "3"
}

A theme with no such file, or with no alpine key in it, gets Alpine 2. Note that there is no alpine2.min.js in Hyvä, so setting the key to "2" produces a broken page: leave the key out instead.

warning

Do not switch a theme from Alpine 2 to Alpine 3 just for WebForms. That change affects every Alpine component in the theme, and a theme written for Alpine 2 needs its own components migrated first. Treat it as a theme upgrade, not a form setting.

Install the Hyva_MageMeWebForms Compatibility Module​

Install the compatibility module to integrate WebForms with Hyva Themes. The Hyva Compatibility Module Fallback it depends on comes from your Hyvä Composer repository and is installed automatically.

  1. Install the module using Composer: 
    composer require mageme/module-webforms-3-hyva
  2. Enable the module: 
    php bin/magento module:enable Hyva_MageMeWebForms
    php bin/magento setup:upgrade
    php bin/magento setup:di:compile
    php bin/magento cache:clean

Hyvä Theme Developer Configuration Settings​

The Hyvä Theme Developer Configuration page provides an array of customizable settings for developers to control the visual layout and behavior of forms in Magento 2. These settings are specifically tailored to the Hyvä theme, offering flexibility for developers to enhance user interface elements such as form layouts, field layouts, input elements, and validation messages. The settings allow you to apply custom CSS classes to various components of the form, enabling precise styling and behavior adjustments.

Key Settings Include:​

  • Form Layout: Adjusts the overall form structure, including CSS classes for the form container and fieldset.
  • Field Layout: Customizes the layout of individual field blocks.
  • Input Elements: Provides options to style text inputs, textareas, select dropdowns, radio buttons, checkboxes, and time input fields with specific CSS classes.
  • Labels and Messages: Allows customization of label and message appearance, including field labels, validation messages, and success messages.

Location in Admin:​

  • Navigate to Stores -> Configuration -> WebForms -> Hyvä Theme Developer to access these settings.

This configuration page is essential for Magento 2 developers who want to fine-tune form presentation without direct template modifications, using CSS to achieve a visually cohesive user experience.

Verify Installation​

  1. Check module status:

    php bin/magento module:status

    Ensure Hyva_CompatModuleFallback and Hyva_MageMeWebForms are listed as enabled.

  2. Test the integration on your website to confirm that WebForms features adapt well to your Hyva theme.