Conditional Fields do not work in a popup.

I have a menu item created to display the form.
I also have a popup set to display the very same form.

Conditional fields display properly on the page, but not the popup.

Not only do the conditional fields not work, but the form doesn't respect a significant portion of the custom code I had to write just to make a basic bootstrap 5 form display properly.

The popup ignores most of that completely. Select fields pop out of their containers and do not respect the field width settings.

Thanks for your help.
 

Hello sjb1963,

this looks like custom coding resulting in JavaScript errors (conditional fields not working) and basic CSS incompatibilities (fields pop out of their containers).

First, a popup in HTML has many possible ways and a variety of different approaches to get implemented.
There are tools for this (e.g, part of the template or result of a widget kit) or you may even provide your very own JavaScript.
How should I know?

Second, a popup is no standard view mode for forms and is therefore not officially documented in any way.
As there exist so many and different tools and ways to create a popup, any official documentation does not make much sense.
Even one documented way of doing it, would not serve much of an auditorium out there.

Third - the good news, it is of course possible to have a form in a popup well functioning.
It requires decent development skills (JavaScript, CSS, HTML, employed UI framework), much experience and a good understanding of possible challenges.
Development in this context means core debugging (JavaScript, CSS, HTML) on the client side in the developer tools of one of the big web-browsers.

As to forms in Bootstrap 5 layout I have to state, that Visforms supports and renders clean in Bootstrap 5 and it works quite fine.
I have no idea what all might going on on your page.

Best regards, Ingmar

Hi,

thanks for providing a link to the website.

As far as I can see there is a problem with the error messages, which should be displayed, if a user does not provide proper data for the email field.In the Visforms default en-GB translation file in the message the @ in the example email address is escaped with a Unicode character.

This escaping is necessary, because of the Joomla feature of hiding/cloaking email addresses in order to prevent spammer to collect email addresses from websites.
If we would use a true @, the Joomla content plugin which cloaks email addresses would also cloak the email address example in our message, if a form is displayed inside an article or a module using the content plugin form view.

As far as I can see, you have modified the default messages/created custom validation messages which contain example email addresses with a true @.
I think, this is causing the problem.
These email addresses are cloaked by Joomla which breaks the JavaScript code.
Features, like the conditional display of fields, can only be managed with JavaScript and if the JavaScript code is broken, they cannot work.

Could you please try using @ instead of @

Regards,
Aicha

Hi sjb1963,

the bug is fixed in the latest release from 05.04.2022 for Joomla 4:
Visforms 4.1.5
Visforms Subscription 4.1.3

You may now use the '@' sign directly in custom error message, default messages and alike.

Greetings, Ingmar