A bundle bringing compatibility our contao 4 environment.

0.7.0 2022-10-13 13:14 UTC


A bundle enhancing Formhybrid compatibility with our Contao 4 environment.


  • support for Encore Bundle
  • replaces jquery code with native js code
  • js code is automatically added to pages where forms are included (needs formhybrid version >= 3.13)

Not all js features ported yet

Currently ported js features:

  • asynchronous form submit
  • scroll to status message after submit
  • submitOnChange

Current limitations:

  • Only encore bundle is currently supported for assets


  1. Add this bundle as dependency

    composer require heimrichhannot/contao-formhybrid-compatibility-bundle
  2. Update your Encore bundles file and your compile your webpack dependencies

  3. Check if you need polyfills for supporting IE and (non-chromium) Edge (or other annoying outdated browsers) (see Polyfills section)


Styling when asynchronous form submit

A submitting class is added to the form element when doing an asynchronous form submit.


JS Events

Following events are fired during lifecycle.

Event Description
formhybrid_ajax_start Fired before the ajax call is execute . For example before an asynchronous form submit.
formhybrid_ajax_complete Fired after an ajax event completed. For example after an asynchronous form submit.


For compatibility with IE and Edge browsers you need to polyfill following js functions:

Function Polyfill Required
ChildNode.replaceWith() https://developer.mozilla.org/de/docs/Web/API/ChildNode/replaceWith Yes
CustomEvent https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent Optional, no finish event is fired
NodeList.prototype.forEach() https://github.com/imagitama/nodelist-foreach-polyfill Yes

Add these polyfills to your main project js entrypoint.



  • Renamed namespace from ContaoFormhybridCompatibilityBundle to FormhybridCompatibilityBundle


  • Renamed HeimrichHannotContaoFormhybridCompatibilityBundle to HeimrichHannotFormhybridCompatibilityBundle.
  • JS code is automatically added to forms. If you don't want this, uncheck active on contao-formhybrid-compatibility-bundle entry in your encore settings.


  • Async submit animation: Instead of adding animated dots to the submit button text when doing an asynchronous form submit, a submitting class is added to the form element.