Custom Form Theme not loading with JavaScript embedding

Product Support
1

Software
My Mautic version is: 5.1.1
My PHP version is: 8.1

Problem
My problem is: I am developing a custom form theme and facing an issue where the custom CSS I created works perfectly when the form is embedded as an iFrame. However, when embedding the form using JavaScript (the recommended method), the custom CSS does not load.

I have tried several approaches to resolve this issue without success. For context, I downloaded the default “Oxygen” theme from the Mautic instance and adjusted it to fit my needs.

Steps I have tried to fix the problem:

  1. Added custom CSS to themename/html/MauticFormBundle/Builder/style-html.twig - The CSS is applied correctly in the iFrame but not when using the JavaScript method.
  2. Edited the CSS file located at themename/css/oxygen.css - Same result: The CSS is applied in the iFrame but not in the JavaScript method.
  3. Inserted the CSS directly into themename/html/base.html.twig - Same result: The CSS is applied in the iFrame but not in the JavaScript method.

The only workaround I’ve found is to add the CSS directly into the form itself using an HTML block. While this works, it’s not the solution I’m looking for, as it defeats the purpose of using a custom theme.

Question:
Is there a way to apply custom CSS to forms embedded via JavaScript? Could this be a bug or a limitation of the JavaScript rendering method?

Thank you for taking the time to read this!