FrontendForms - A module for creating and validating forms on the frontend

[Juergen]

Here is my ouput from the source code:

<div class="uk-margin uk-grid-small error uk-grid" data-uk-grid="data-uk-grid" id="test-checkbox-fieldwrapper">
  <div class="uk-width-auto uk-first-column">
    <input id="test-checkbox" name="test-checkbox" type="checkbox" class="uk-checkbox uk-form-danger" required="" aria-invalid="true" aria-           errormessage="test-checkbox-errormsg">
  </div>
  <div class="uk-width-expand">
    <label class="uk-form-label required" for="test-checkbox">My Checkbox Label<span class="asterisk">*</span></label>
  </div>
  <p class="uk-text-danger uk-width-1-1 uk-grid-margin uk-first-column" id="test-checkbox-errormsg">My custom required text</p>
</div>

As you can see the class "uk-width-1-1" is set on the error text.

[PWaddict]

I'm 100% sure. I checked it mutliples times and no class added at all. Only with the hook I can see the uk-width-1-1 there. Maybe the module still having issues with the namespace?

[Juergen]

2 minutes ago, PWaddict said:

Maybe the module still having issues with the namespace?

No, this could not be a reason, because you are also using these lines of code to manipulate the classes:

$checkbox->getFieldWrapper()->setAttributes(['data-uk-grid', 'class' => 'uk-grid-small']);
$checkbox->getLabel()->wrap()->setAttribute('class', 'uk-width-expand');

This methods are working in the same way as the getErrorMessage() method.

I cannot tell you, why getFieldWrapper() and getLabel() works, but getErrorMessage() not. As written before, in my case everything works as expected.

If you cannot find the cause, please use the hook method to get your desired result.

[PWaddict]

You're right. The problem is on my side. I have another hook Errormessage::render to add the font awesome icon on the errors. Problem solved.

[PWaddict]

@Juergen the module's CSS / JS are getting executed on a page where LoginRegisterPro is executed even though I have already removed all CSS / JS from your module and the form used by FrontendForms is on a different page.

EDIT: These are the files:

site/modules/FrontendForms/backend/frontendforms.css?v=2.2.32-1745913193&time=1745913193
site/modules/FrontendForms/image-picker/image-picker.css?v=2.2.32-1745913193

site/modules/FrontendForms/backend/frontendforms.js?v=2.2.32-1745912921&time=1745912921
site/modules/FrontendForms/image-picker/image-picker.min.js?v=2.2.32-174591292

[Juergen]

Hello @PWaddict

You're talking about backend files, not frontend files. You can only remove frontend files within the module configuration (or via the API call).

In the frontend, only pages that contain at least 1 form of FrontendForms contain the JS and CSS files. I tested it on my local installation. On all other pages the files will not be inserted.

But you're right, the backend JS and CSS files are added on every admin page and not just on the configuration page of the FrontendForms module. I'll fix that.

I hope that's what you mean. Otherwise, please correct me if I have misunderstood you.

Best regards Jürgen

[PWaddict]

9 hours ago, Juergen said:

You're talking about backend files, not frontend files.

I'm talking about backend files that getting inserted on frontend. I removed everything (header, footer etc.) from my template and just added only the execution line of LoginRegisterPro:

<?php namespace ProcessWire;

echo $modules->get('LoginRegisterPro')->execute(); ?>

and as you can see from the screenshot below the FrontendForms files I mentioned on the previous post are getting inserted. This happens on every form of LoginRegisterPro (login, register, edit profile, forgot password) which are all exist on the same template and triggered by the above 1 line of code.

These files are also inserted on every admin page too. You're right.

[Juergen]

Hello @PWaddict

I have added a possible fix to Github. Please replace the following file:

https://github.com/juergenweb/FrontendForms/blob/main/FrontendForms.module

I do not have LoginRegisterPro, so I cannot reproduce your issue, but the new fix contains a check, if page is an admin page or not. So the files should only be loaded on admin pages now.

Please test it and let me know if it works for you now.

Best regards

[PWaddict]

@Juergen Problem solved. No longer getting these files on frontend. Thank you.
The only problem needs to be solved is to not load them on every admin page.

[Juergen]

Yes I am working on a solution 😜

[Juergen]

Hello @PWaddict

I have added selectively loading of the JS and CSS files in the backend. To test it, you only need to replace the file https://github.com/juergenweb/FrontendForms/blob/main/FrontendForms.module once more. It contains now additional methods to check if the files should be loaded on the current page or not.

It was not so easy, because the image picker files of FrontendForms will also be used by other modules from the FrontendForms family and I have to take care of it.

Best regards

[PWaddict]

@Juergen I just tested it and it works but now there is a new issue. On console I'm getting this error on all admin pages except the FrontendForms page module.

Uncaught TypeError: $(...).imagepicker is not a function

Check the initializeImagePicker function.

[Juergen]

You have an eagle eye @PWaddict😀

I have fixed this issue now. If you have the latest version 2.2.33 installed, you need to replace the file https://github.com/juergenweb/FrontendForms/blob/main/FrontendForms.module.

Otherwise you can update the module as usual and you are done.