Jump to content

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


Juergen

Recommended Posts

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

@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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

LoginRegisterPro-FrontendForms.thumb.jpg.cb693871fc052d423621fd7522ee8dd7.jpg

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

  • Like 1
Link to comment
Share on other sites

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

  • Thanks 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

@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.

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

On module install, I get the following:

Warning: file_get_contents(https://api.github.com/repos/danielmiessler/SecLists/contents/Passwords/Common-Credentials/10-million-password-list-top-100.txt): Failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found
 in .../html/site/modules/FrontendForms/FrontendForms.module:455

Seems the password file has moved....

  • Like 1
Link to comment
Share on other sites

Hi Juergen,

I'm trying to get me head around FrontendForms, but some questions/problems remain... Hope you don't mind.

How can I prevent outputting the success message after successfully submitting the form? 

$form->setSuccessMsg(' ');

is working (setting the message to a space), but not very elegant...

Thank you

  • Like 1
Link to comment
Share on other sites

Hello @dynweb

Thanks for pointing out this issue. To be honest, I have never thought of such a possibility, because I always wanted to output a feedback message after the form submission.

Your contribution leads me to update the setSuccessMsg() and setErrorMsg() methods to accept boolean values too. So if you want to disable the output of one of them please add false inside the parenthesis. These prevents the output of a message after form submission.

$form->setSuccessMsg(false);

This is more elegant than adding an empty string, but you need to replace the following file from Github with yours: https://github.com/juergenweb/FrontendForms/blob/main/Formelements/Form.php

This addition will be automatically included in the next update, but I do not want to update the module today.

You will find more infos about the new additions inside the changelog.md.

Best regards Jürgen

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...