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

[Anonimas]

Thanks! Updates works ok.

[Anonimas]

Hi Juergen,

Is it possible to make that InputCheckbox won't be wrapped by label (like Select)? I have CSS problem, that now only label is visible and checkbox has 0 width.

Now:

<label class="label" for="form-check">
  <input id="form-check" name="form-check" type="checkbox" class="checkbox" checked="">Label</label>

I prefer:

<input id="form-check" name="form-check" type="checkbox" class="checkbox" checked="">
<label class="label" for="form-check">Label</label>

Also is there something like InputFileUpload because I couldn't find one? With optional label?

<input type="file" id="myFile" name="form-filename">

 

[Luigi]

Hello,

 

I tried the example from https://github.com/juergenweb/FrontendForms/blob/main/Examples/complexForm.php on an empty  3.0.200 Installation with PHP 8.1.10 and I get this message 4x on my test page:
 

Complex form

All fields marked with (*) are mandatory and must be completed.


The form is not visible.

But it's visible when I add an error to the page by calling an non existing function. It's the same problem with the other examples.

Any Idea why this is happening? Thanks

 

[Juergen]

Hi Luigi!

Very strange! Could you please post the whole php code of the template where you have integrated the form.

Cu Jürgen

[Luigi]

12 hours ago, Juergen said:

Hi Luigi!

Very strange! Could you please post the whole php code of the template where you have integrated the form.

Cu Jürgen

Hello Juergen,

the template is empty except for the code from https://github.com/juergenweb/FrontendForms/blob/main/Examples/complexForm.php
Do I need to add anything else?

Thank you.

[Juergen]

Usually not, but in your case it seems that a loop produces the repeats, but I dont know where it is located. I have tried it o a local installation (XAMPP) and it works as expected. So the cause should be somewhere on your side. Can you tell me which of the PW profiles do you use (Uikit, blank profile, blog,...)

Do you have the installation locally on XAMPP etc too or is it public reachable, so I can take a look.

Best regards

[Juergen]

Please also check in the module configuration settings that in the blacklist of forbidden IDs is not your IP address listed. I can remember that in the old version a Javascript mistake causes that the local IP address was stored inside this field and has to be deleted manually. This was a bug. Currently I am working on an improved version without JS and it works as expected - but this version has to be tested and is not ready to use for the moment. So please check this setting too.

[Luigi]

22 hours ago, Juergen said:

Usually not, but in your case it seems that a loop produces the repeats, but I dont know where it is located. I have tried it o a local installation (XAMPP) and it works as expected. So the cause should be somewhere on your side. Can you tell me which of the PW profiles do you use (Uikit, blank profile, blog,...)

Do you have the installation locally on XAMPP etc too or is it public reachable, so I can take a look.

Best regards

Hello,

the installation is with a blank profile and locally with laragon.

I tried it several times: Made a new installation, installed the module, created a template and a page with the complexForm.php file and always the same problem.

I checked the settings and also disabled measure 4 just to be sure but it didn't work.

 

[Juergen]

I am sorry, that I cannot help you, but I am unable to reproduce the error and without any error messages I have no starting point. As written above, I am working on the improved version, which will be (hopefully) ready to use within the next days. I can inform you if it will be ready to download if you want.

Best regards Jürgen

[Luigi]

that would be great, thank you.

[Juergen]

Hello Luigi

I found the problem: The blank profile uses markup regions and therefore you have to copy the code of  the form between a div with the id "content".

Take a look at the code afterwards:

<?php

namespace ProcessWire;

/**
 * Demonstration of a complex form
 * You can copy this code to a template to show the form
 * If you use these classes inside another namespace (fe ProcessWire) like in this case, you have to take care about the namespace in front of the class instances.
 * Fe you have to use $form = new \FrontendForms\Form('myForm'); or $form = new FrontendForms\Form('myForm'); and not only $form = new Form('myForm');
 */
echo '<div id="content">';
echo '<h1>Complex form</h1>';


$form = new \FrontendForms\Form('registration');
$form->setMinTime(8);
$form->setMaxTime(3600);
$form->setMaxAttempts(5);
$form->setErrorMsg('Ouups! There are some errors.');
$form->setSuccessMsg('Congratulation! There are no errors.');


$userdata = new \FrontendForms\FieldsetOpen();
$userdata->setLegend('User data')->append('<p>Please fill out all required fields.</p>');
$form->add($userdata);

$singleRadio = new \FrontendForms\InputRadio('single');
$singleRadio->setLabel('Single radio button');
$singleRadio->setAttribute('value', 'single');
$singleRadio->setRule('required');
$singleRadio->setNotes('This field makes no sense');
$form->add($singleRadio);

$gender = new \FrontendForms\InputRadioMultiple('gender');
$gender->setLabel('Gender')->setAttribute('class', 'myextralabelclass');
$gender->setDefaultValue('Male');
$gender->addOption('Male', 'Male')->setAttribute('class', 'male');
$gender->addOption('Female', 'Female')->setAttribute('class', 'female');
$gender->addOption('Diverse', 'Diverse')->setAttribute('class', 'diverse');
$gender->getFieldWrapper()->setAttribute('class', 'uk-width-1-1')->removeAttributeValue('class', 'uk-margin');
$form->add($gender);

$firstname = new \FrontendForms\InputText('firstname');
$firstname->setLabel('Firstname');
$firstname->setRule('required');
$firstname->getFieldWrapper()->prepend('<div class="uk-child-width-1-2" data-uk-grid>')->removeAttributeValue('class', 'uk-margin');
$form->add($firstname);

$lastname = new \FrontendForms\InputText('lastname');
$lastname->setLabel('Lastname');
$lastname->setRule('required');
$lastname->getFieldWrapper()->append('</div>')->removeAttributeValue('class', 'uk-margin');
$form->add($lastname);

$street = new \FrontendForms\InputText('street');
$street->setLabel('Street');
$street->setRule('required');
$street->getFieldWrapper()->setAttribute('class', 'uk-width-3-4')->prepend('<div data-uk-grid>')->removeAttributeValue('class', 'uk-margin');
$form->add($street);

$number = new \FrontendForms\InputText('number');
$number->setLabel('Number');
$number->setRule('required');
$number->setRule('integer');
$number->getFieldWrapper()->setAttribute('class', 'uk-width-expand')->append('</div>')->removeAttributeValue('class', 'uk-margin');
$form->add($number);

$email = new \FrontendForms\InputEmail('email');
$email->setLabel('Email address');
$email->setSanitizer('email');
$email->setRule('required');
$email->setRule('email');
$email->setRule('emailDNS');
$email->getFieldWrapper()->prepend('<div class="uk-child-width-1-3" data-uk-grid>')->removeAttributeValue('class', 'uk-margin');
$form->add($email);

$phone = new \FrontendForms\InputTel('phone');
$phone->setLabel('Phone');
$phone->setRule('integer');
$phone->getFieldWrapper()->removeAttributeValue('class', 'uk-margin');
$form->add($phone);

$fax = new \FrontendForms\InputText('fax');
$fax->setLabel('Fax');
$fax->setRule('required')->setCustomFieldName('Fax number');
$fax->getFieldWrapper()->append('</div>')->removeAttributeValue('class', 'uk-margin');
$form->add($fax);

$birthday = new \FrontendForms\InputDate('birthday');
$birthday->setLabel('My birthday');
$birthday->setRule('required')->setCustomFieldName('The day of my birth');
$birthday->setRule('date');
$form->add($birthday);

$children = new \FrontendForms\InputNumber('children');
$children->setLabel('Number of children');
$children->setAttribute('min', '0');
$children->setAttribute('max', '15');
$children->setRule('required')->setCustomMessage('Please enter how much children do you have');
$form->add($children);

$userdataClose = new \FrontendForms\FieldsetClose();
$form->add($userdataClose);

$interestsOpen = new \FrontendForms\FieldsetOpen();
$interestsOpen->setLegend('My interest');
$form->add($interestsOpen);

$interests = new \FrontendForms\InputCheckboxMultiple('interest');
$interests->setLabel('I am interested in');
$interests->setDefaultValue('Web-design');
$interests->addOption('Music', 'Music')->setChecked();
$interests->addOption('Web-design', 'Web-design');
$interests->addOption('Sports', 'Sports')->setChecked();
$interests->addOption('Photography', 'Photography');
$firstname->setRule('required');
$interests->alignVertical();
$form->add($interests);


$php = new \FrontendForms\Select('php');
$php->setLabel('My preferred PHP version is');
$php->setDefaultValue('PHP 8');
$php->addOption('PHP 6', 'PHP 6');
$php->addOption('PHP 7', 'PHP 7');
$php->addOption('PHP 8', 'PHP 8');
$form->add($php);

$css = new \FrontendForms\SelectMultiple('css');
$css->setLabel('I have knowledge in');
$css->setDefaultValue('Less', 'CSS 1');
$css->addOption('CSS 1', 'CSS 1');
$css->addOption('CSS 2', 'CSS 2');
$css->addOption('CSS 3', 'CSS 3');
$css->addOption('Less', 'Less');
$css->addOption('Sass', 'Sass');
$form->add($css);

$interestsClose = new \FrontendForms\FieldsetClose();
$form->add($interestsClose);

$accept = new \FrontendForms\InputCheckbox('accept');
$accept->setLabel('I accept the data privacy');
$accept->setRule('accepted')->setCustomMessage('You have to accept the data privacy');
$form->add($accept);

$newsletter = new \FrontendForms\InputCheckbox('newsletter');
$newsletter->setLabel('I want to register to the newsletter');
$newsletter->setChecked();
$form->add($newsletter);

$button = new \FrontendForms\Button('submit');
$button->setAttribute('value', 'Send');
$form->add($button);


if ($form->isValid()) {

    print_r($form->getValues());
    // or do what you want

}

// render the form
echo $form->render();

echo '</div>';

As you can see the form code is between the opening and closing tags of the content container.

BTW I have sent you a PM with the new version.

Best regards Jürgen

[Juergen]

UPDATE!! A new version with CAPTCHA support can be downloaded at https://github.com/juergenweb/FrontendForms

It is early stage, so everyone is invited to test it - not recommended on live sites at the moment.

Please report errors and ideas directly in Github.

Thanks Jürgen

[Luigi]

Great. Thank you very much. My error is gone.

 

Wish you a nice day

[flydev]

@Juergen I needed a solution to start with a quite complex form. I tried the module, thats was fast. Freaking cool ! Thanks .

[Flashmaster82]

I can´t even install the module.. ?? Any clues?

Parse Error: syntax error, unexpected 'Validator' (T_STRING), expecting function (T_FUNCTION) or const (T_CONST) (line 20 of E:\Wamp\www\Website\site\modules\FrontendForms\FrontendForms.module)

 

[flydev]

@Flashmaster82 what's the version of your PHP install ? If I am correct, you need PHP 8.1 to get it working.

 

Just saw the posted issue on the github repo, will comment it there, but @Juergen, as you are using arbitrary Union Type on property declaration in the module, it make it available only on php-8.

[Juergen]

Thanks @flydev

I thought that this is called type declaration.  I have used this for a while, but I did not knew, that this was called union type. Now I have learnt something new today.?

The problem is solved for flashmaster82, we have discussed the issue via PM. The module itself should check if version 8.1 is installed.

'requires' => ['PHP>=8.1.0', 'ProcessWire>=3.0.181']

So it should give you a warning message before the installation process starts.

[pmichaelis]

Hello @Juergen,

is there an example for a file field?
In need to upload files via frontend forms, but I could not find anything in the repository.

Thanks for Help

[Juergen]

Hi @pmichaelis,

it is indeed a little bit hidden, but you will find an example of a single and a multiple file upload field inside the example of the contact form at

https://github.com/juergenweb/FrontendForms/blob/main/Examples/contactform.php

Best regards

[pmichaelis]

1 minute ago, Juergen said:

Hi @pmichaelis,

it is indeed a little bit hidden, but you will find an example of a single and a multiple file upload field inside the example of the contact form at

https://github.com/juergenweb/FrontendForms/blob/main/Examples/contactform.php

Best regards

Ahh! There it is. Thank you!
Maybe you should also integrate it here:
https://github.com/juergenweb/FrontendForms/blob/main/Examples/inputfieldexamples.php

[Juergen]

Do you want it to send it with emails, then you have to add the sendAttachments(); methods to the WireMail object as written at the bottom of the file, or do you only want to upload it to the files directory?

[pmichaelis]

I want to upload and append to a page.

[Juergen]

This may be interesting for you too, if you want to upload the files to a specific directory: https://github.com/juergenweb/FrontendForms#setuploadpath

[Juergen]

Ok, in this case you should point the upload folder to be the folder with the id of your page inside the files directory

// add this to your form object
$form->setUploadPath($page->id, true); 

I have not tested it, but it should create a folder with the id of your page under the site/assets/ directory and store the file, that you have uploaded inside.

[pmichaelis]

 hm, there seems to be an error in the latest main branch with PW 3.0.18

ProcessWire\FrontendForms::cleanUpPasswordList(): Argument #1 ($data) must be of type array|string, null given, called in /var/www/html/site/modules/FrontendForms/FrontendForms.module on line 699 search►