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

[Juergen]

Glad to hear that. Thats what CAPTCHAS are for 😃!

[Juergen]

Version 2.1.47 is out!!

Now FrontendForms supports Ajax form submission!

Ajax form submission prevents a page reload after the form has been submitted. This could be useful in scenarios, where you do not want a reload (fe if your form is inside a modal box or inside a tab) after the form has been submitted. You can disable/enable Ajax submission by checking a checkbox inside the module configuration, or you can overwrite the global value by using the setSubmitWithAjax() method on per form base.

If you are enabling this feature, a progress bar will be displayed after you have pressed the submit button to inform the user, that the form will be validated now. Otherwise, the user will not see any action until the validated form will be loaded back into the page. If you do not want to show the progress bar, you can disable it inside the module configuration too. With the showProgressbar() method, you can overwrite this global setting on per form base.

In the case, you want to redirect the visitor to another page, after the form has been submitted successfully, you cannot do this via a PHP session redirect, because the form has been submitted via Ajax. In this case a JavaScript redirect has to be done. To force a JS redirect after the submission, you need to use the setRedirectUrlAfterAjax() method. Put the new URL inside the parenthesis, and the user will be redirected to this URL after the form has been validated successful.

You will find a more detailed information about these 3 new methods here: https://github.com/juergenweb/FrontendForms/blob/main/README.md#setsubmitwithajax---use-ajax-for-form-submission

Screenshot of the new Ajax configuration settings:

As always, please test your forms if you are changing to Ajax support and report any bugs directly on Github. A lot of changes have been done, so keep an eye on unwanted side effects.

I have tested it with my other module FrontendContact too and it works without problems if you are using Ajax support.

Best regards!

[dynweb]

Hi,

I'm using your module for the first time, looks really promising 🙂

It seems that password fields *always* show a password toggle, even if the showPasswordToggle() method is not called in user code.

In InputPassword.php, line 105, it unconditionally appends the checkbox:

$this->append($this->showPasswordToggle()->___render());

My solution was the following, but not sure if that won't break other things:

// InputPassword.php

// Line 26
// protected InputCheckbox $showPasswordToggle; // The password toggle checkbox object
protected bool $showPasswordToggle = false;

// Line 85
// $this->showPasswordToggle = $toggle;
$this->showPasswordToggle = true;

// Line 105
// $this->append($this->showPasswordToggle()->___render());
if($this->showPasswordToggle) {
	$this->append($this->showPasswordToggle()->___render());
}

 

[Juergen]

Hello @dynweb

Thank you for reporting this issue and offering a solution!!

You are right, there was a logical mistake inside the InputfieldPassword class. I have corrected this wrong behavior and updated the module to 2.1.49.

You can read the complete changelog here: changelog.md

Be aware, that the checkbox will be appended by default and you have to manually disable it by using the following method including false as parameter

showPasswordToggle(false);

Best regards

[Juergen]

New Class "PrivacyText" added on version  2.1.50

This is a new feature, that offers you to display a text only version (including a link if set) instead of a checkbox version for the "Accept our Terms and Privacy Policy". Thanks to @Chris-PW from the support forum for informing me, that a checkbox is no longer recommended, and a text would be the better option.

Please read the changelog.md for full information about the new feature.

Preview of text without link:

Preview of text including a link to the privacy policy page if set inside the module configuration

Best regards

[xweb]

Hello Juergen,

I like the PrivacyText feature but I'm struggling to find a way to translate the text without touching the source file? 

Thanks for your great work!

[Juergen]

Hello @xweb

It seems that you are new to ProcessWire 😉.

Every text inside the module is translatable in the backend. This feature is called "translatable strings" in ProcessWire. No need to touch the sourcefile!

All you need is to enable language support in the backend. You will find it under Modules/core:

After you have installed it, a new navigation item called "Languages" appear under Setup:

 

After clicking this navigation point, you will be redirected to a page, that contains all installed languages. In your case it is the language "default". Click on it and you will be redirected to the translation page, where you can translate every translatable string of the whole installation.

The last step ist to find the file, where the text for the privacy could be translated. It is called privacytext.php.json.

Click on edit and translate the text to your needs.

Thats all!!!!

I recommend you to study the multilanguage feature of ProcessWire and how translatable strings work.

Hope this helps! Best regards!!

 

[Juergen]

Just to mention: If you do not find the privacytext.php.json file, you have to add it first.

Click at the top at the "Find Files To Translate" Button.

Look at the first scroll-down field "Translatable files in /site/" inside the category "No translation files exist" and look for the file there. If you have found it, click on it and click the "Submit" button on the top right corner.

Now you will find the file as written in the previous post.

 

[Flashmaster82]

Are you planning on implementing save to new page (admin) feature? Also a feature that would be nice then is to choose if send only to a new page and not to email.

[Juergen]

It is on the list as an additional feature, but not in the next time, because I am using the module only to send emails.

[Juergen]

Sorry @Flashmaster82

I guess I will not implement this on the FrontendForms module, but on the FrontendContact module. That was a misunderstanding. The FrontendForms module is only the base class for all others.

If you need such a feature you can do it inside the isValid() method (creating a new page, sending mails and so on). That should not be a problem.

if($form->isValid()){
	// create the new page
}

Best regards

[donatas]

Hi. Is it just me, but the newer versions don't work for me. I have tried a fresh PW install, fresh FrontendForms install via PW module installation from directory.

I used the most minimal form variant with one field and a submit button (but tried with more complex setups too) and I get a "ERR_EMPTY_RESPONSE" response when I submit.

PHP is 8.2+, everything is working fine on PW side.

I have used FrontendForms v2.1.46 before and it all worked fine. I copied older version module files to the same fresh PW install and it works. But the newest v2.1.54 is bugged. Both with AJAX and without it is failing on submit. Any idea what could be wrong?

[Juergen]

Hello @donatas

First of all, thank you for reporting this issue.

Interesting! I do not have heard of this kind of error before, but Google says that this is a browser related problem and not a server problem. They say that this could be caused by browser extensions or the browser cache, but there are more issues that can be responsible for such a scenario.

Could you please try to use another browser than the one that you are still using. It would be interesting if the problem persists. If the problem will be still there I can recommend you to deinstall and reinstall FrontendForms. I cannot reproduce the error and I cannot find out the cause only by the error message itself. Sometimes a fresh install helps to solve a problem.

Corrected: Ok, I see you have tried this before.

I guess this is not a general problem, because this is the first report of such a problem. Otherwise other users would have reported such an issue before.

Best regards

[Juergen]

I have done a fresh install with the latest PW and FrontendForms version. On my side everything works as expected, but I have tested on Xampp and not on a shared server.

If you are using a VPN, please disable it too to see what happens.

[donatas]

Hi @Juergen Thank you for your time.

I have already tried to test it with a new clean PW installation and a clean fresh module install.
I don't use any VPN
I tried with different browsers (Chrome, Safari, Firefox) - all give something similar of a reply. (Safari: "Server unexpectedly dropped the connection").
No browser plugins seem to interfere (tried with no extensions at all).

However it is all good on a shared hosting environment on my provider. Only on my local machine it gives this bug.

Having in mind that older version of module works and newest doesn't - my conclusion would be that the introduced new code in the newer module version might have something to do with it. I am trying to narrow down what environment setup parts could be involved in this, but am a little lost for now. Can it be file execution permission issue?
I'm developing (successfully multiple sites) on local httpd (installed via brew):

httpd -v
Server version: Apache/2.4.58 (Unix)
Server built:   Oct 16 2023 15:06:20

php -v
PHP 8.2.11 (cli) (built: Sep 26 2023 11:11:58) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.11, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.11, Copyright (c), by Zend Technologies
    
ProcessWire 3.0.229

Form code:

<?php // site/templates/_form.php
    declare(strict_types=1);
    namespace ProcessWire;

    $form = new \FrontendForms\Form('myForm');

    $name = new \FrontendForms\InputText('lastname');
    $name->setLabel('Last Name');
    $name->setRule('required');
    $form->add($name);
    
    $button = new \FrontendForms\Button('submit');
    $button->setAttribute('value', 'Send');
    $form->add($button);
    
    if($form->isValid()){
      print_r($form->getValues());
      // do what you want
    }
    
    // render the form
    echo $form->render();

Form include code in home.php template:

<?php namespace ProcessWire; ?>
<div id="content">
	<?php files()->includeOnce('_form');?>
</div>

[Juergen]

I have taken a look into the changelog.md file of FrontendForms on Github and only 2 huge changes have been taken between 2.1.46 and the latest 2.1.54 version.

2.1.47: Ajax support has been added

2.1.50: New class for creating privacy text has been added

All other changes are minor (but maybe could lead to problems too).

 

16 minutes ago, donatas said:

Can it be permission issue?

 

I dont know, but as you have written, it only happens with the new version of FrontendForms. So the problem must be there (somewhere).

First of all disable the embedding of the Javascript file. You can do this in the backend configuration inside the first tab, and see if it has an impact. I do not guess that it will solve the problem, but the Javascript file has been changed during the time too. If nothing happens, please enable the embedding of the JS file again.

Next step:

You are using a local machine, so could you install only for testing purposes the FrontendContact module, which is a simple contact form based on FrontendForms? It would be interesting what happens if you try to send a message with this module.

You have to enter the email address where the mails should be sent to inside the module configuration and then you add the follwing code to one of your templates, where you want to output the contact form:

echo $modules->get('FrontendContact')->render();

Send a message and see what happens.

[donatas]

Thank you. Sorry, but nothing changed - still getting the same result.

• Tried disabling JS file inclusion,
• Disabled AJAX,
• Tried the FrontendContact module - same result.

What info would you need from me to track down this issue? For now I will continue using the older module version, but would be nice to have up to date version and keep up with newest module developments.

[Juergen]

Do you have TracyDebugger installed?

[donatas]

Yes I do have TracyDebugger.

Actually I went and tested all the older module versions between 2.1.46 and 2.1.54 - and the bug starts appearing on 2.1.47 version. 2.1.46 was the last version that worked for me. So probably the introduced ajax functionality code may be the reason? Although I test the form with AJAX functionality turned off.

[Juergen]

This is very strange! I guess the only place for a problem could the form.php file in this case, because it contains all the code for the frontend.

I have studied the differences between the code from version 2.1.46 and 2.1.47 from the Form.php file, but I have not found a line, where I think it could be the cause for this issue.

Here you will see the differences between the 2 versions: https://github.com/juergenweb/FrontendForms/commit/c42a410c247dd04bb296a04d8e112dc8fbb7dc4b

If you have time, please change only the code of the Form.php file from the current version (or the 2.1.47) version with the one of the 2.1.46 version. Leave all other files untouched. If it works, we could be for sure that the problem is really inside the Form.php and nothing else.

I have tried to change the codes and I did not run into problems (current version of FrontendForms, but Form.php was from the 2.1.46 version).

form-2.1.46.php

You can use your own 2.1.46 file or you copy the code from this file.

Please let me know if the problem still persists.

 

[donatas]

I tried with both the newest 2.1.54 version and 2.1.47 module versions with the old Form.php file from 2.1.46 and it doesn't seem to work - I still get no response from server after submit. The issue is in some other file.

[Juergen]

I was so sure that the issue can be found in that file. 😔

These are the relevant files, that have been changed:

• Form.php
• FormValidation.php
• FrontendForms.module
• frontendforms.js

Could you try to change the Form.php and the FrontendForms.module files to the version of 2.1.46 and leave all other files untouched.

If the error persists please do the same with FormValidation.php and if necessary with the frontendforms.js, so that all 4 files are from version 2.1.46 at the end. Do not enable Captcha or Ajax.

Does TracyDebugger not throw an error messages at all?

What you can also do is to take a look at the browser console (Short cut F12) to take a lookt fe at the response header code (status code).

 

 

 

[Juergen]

What you could also try is to embed the form code directly inside the template instead of using an include. It should not have an impact, but who knows.

19 hours ago, donatas said:

However it is all good on a shared hosting environment on my provider. Only on my local machine it gives this bug.

This is what makes me thinking of that the problem should be caused by your local machine and not by the module itself. Something there (fe a specific configuration) causes this unwanted behavior.

[donatas]

Hi,

I have tried all your recommended tests and it appears that FormValidation.php is the culprit file! Copying it from the 2.1.46 version to the newest one alone fixes the problem! 🙂 

• Form.php - still error
• FrontendForms.module - still error
• Including form code in template file instead of include file - still error
• TracyDebugger throws no error at all - the server stops the response at all so it has no chance to print anything.
• Browser console Network tab shows error "NS_ERROR_NET_RESET" on Firefox and status as "(Failed)" on Chrome

As I understand there might be a problem with use of static function secondsToReadable. Switching to the existing non-static secondsToReadableCopy fixes the issue. My PHP knowledge ends here to figure out the reason why 😄 

[Juergen]

Glad that you figured it out!!! 😃

Usually, static methods are not others than non-static methods. The only difference is, that you do not have to instantiate a new object to be able to use it. Thats why I am a little bit confused that this may cause this error. 😳

I will try to find out what the problem is. I will inform you, after I have made some changes to the FormValidation.php, so that you can test it if it works.