Module: FormHelper

[pwFoo]

FormHelper

The redesigned FormHelper extends the InputfieldForm object with additional features. 

Features

The FormHelper module extends the PW form object and simplifies the form handling.

• create basic PW form object with submit button
• add form field value handling and sanitizing
• take care about form submit / error state and processing
• CKEditor pwImagePlugin field, jsConfig, load form admin styles

FormHelperExtra is a submodule to handle additional features.

• create a form object with fields based on Template, Page, Form objects or field data array
• form file upload handling (temp page uploads, creation of a hidden storage page)

Usage

• Documentation / examples

Repository

• PW module repo
• GIT repo

 

ToDo / Issues

• Issues

Edited June 1, 2015 by pwFoo

[pwFoo]

I'll release some simple example / unstable dev modules which use FormHelper (login, register, profile, edit & add content)...

[pwFoo]

Not yet released login / register example, because module isn't finished (module name, register features, ...)

Released dev / unstable FrontendContentManager (edit / add pages).

So you can see FormHelper in action

[felix]

Can't wait to try your modules out. This looks very promising for community related stuff.

[pwFoo]

My goal is to build a community site with a integrated forum.

It's a "small" (the community, not to write the modules *g*) hobby project.

[pwFoo]

Module updated to 0.0.5

Changed formProcess return values. Example at initial post is updated.

if ($process === NULL) {
     // form not sent
}
elseif ($process == true) {
     // form sent... without or also with errors! Check with "$fh->form->getErrors()"    
}
elseif ($process && $fh->form->getErrors()) {
     // form sent, but with errors!
}
elseif ($process && !$fh->form->getErrors()) {
    // form sent without errors! 
    // Do something...    
}

Because I need to return TRUE if form is sent without and also with errors...

[onjegolders]

This looks great pwFoo, will be sure to check it out.

[pwFoo]

Thanks for answer.

At the moment I do some tests with FormHelper and FrontendContentManager (rewritten yesterday).

Bug reports or suggestions are welcome

[pwFoo]

Module need some improvements to work with inputtype (ckeditor, tinymce) and textformatters (TextformatterTextile, ...).

In a earlier version it loads ckeditor or tinymce. But not tested with textformatters which need to load the textformatter module and call formatValue() method I think...

[pwFoo]

To handle textformatter I'll add an option to get the fields or some fields unformatted if needed (maybe difficult to decide...).

At the moment I use $pageObj->getInputfields() to get all fields. Maybe should be changed to a loop through all fields to get it formatted or unformatted

// unformatted, for example to get textile source for edit instead of parsed html code
$pageObj->getUnformatted("field");
// or formatted
$field->getInputfield($pageObj); 

Haven't found an way to "convert" a formatted field to an unformatted.

[Soma]

You can't convert a formatted field to a unformatted. 

$page->of(false)  // turn off outputformatting
$page->body // unformatted
$page->of(true) // turn outputformatting on
$page->body // formatted

or directly as you already have

$page->getUnformatted("body");

[pwFoo]

Thanks. So to be flexible I'll loop through all fields and get as needed.

[pwFoo]

Updated version with improved clearValues and added unformattedFields (true = all || array with field names) option.

The unformattedFields option is needed by FrontendContentManager for editing pages with textformatter active fields (for example TextformatterTextile).

[pwFoo]

New FormHelper dev branch 0.0.7

• removed hardcoded allowed file extensions (forgotten test string...)
• changed jsconfig handling (now js-code is prepended to $config->scripts

I thinking about a honeypot feature to make forms (more) "secure" against bots...

What do you think? Would it be a good idea?

• https://processwire.com/talk/topic/2089-create-simple-forms-using-api/?p=41795
• A field hidden by CSS | by JavaScript
• A field requiring a blank input
• A field requiring a specific input

[GuruMeditation]

This looks promising. So basically this will allow us to easily create front-end forms for editing content, posting content etc? I'm looking for something that will allow me to use my own markup on the front-end for my members to use.

Honeypot seems a good idea as an option as Ryan suggests with his comments field.

Will this work with a Fancybox modal window? I'd like to be able to click on an edit button on a front-end page, have a form pop up via something like Fancybox or Foundation and then for it to process the form and redirect to a page of my choice etc.

[pwFoo]

Hi GuruMeditation,

haven't tested it inside a modal yet. But I think it should be work / possible.

FormHelper is needed by my FrontendContentManager (frontend edit / add pages ).

But both modules are work in progress and (I think) unstable!

[GuruMeditation]

Keep up the good work. My understanding is that the functionality of what FrontendContentManager provides can be achieved purely by using FormHelper alone?

[pwFoo]

FormHelper care about form handling (build form, process input, upload files,...).

FrontendContendManaget (FCM) requires FormHelper to create a form based on an existing page or template and provide update / save methode.

My login and register modules also based on FormHelper and create the form from array data.

[pwFoo]

I try to simplify FormHelper to not duplicate simple form api features (add, remove and modify form fields via form object). FormHelper should help to create fields based on a data array, handle file upload and also sanitizing form values.

So I remove some features (move field, ...) could easily done by form api.

[pwFoo]

Initial post updated after release FormHelper 0.1.0.

Many changes done and so it's not compatible to earlier versions!

• create form from page, template or array data
• Added possibility to update form fields (values, attributes) and field options (skip, unformatted, value, sanitizer) before render()

  -> "skip" a field have to be added by options() method before(!) createForm()

  -> use "value" to overwrite or clear the field value

  -> "unformatted" prefill the form with the unformatted page field value

  -> "sanitizer" defines the sanitizer to use. If isn't set You'll get the raw value!

• get field values sanitized if a sanitizer is set via value() method
• It's possible to chain createForm(), add(), update(), options() and render(), but this could be removed in future versions again...
• ckeditor regular and inline mode (requires JqueryCore and JqueryUI modules!)
• file / image upload / delete

Example login from with modified submit button

$formSubmit = array('vars' => array('name' => 'submit'), 'attr' => array('value' => 'Login'));
$formFields = array(
    'username' => array(
        'module'    => 'InputfieldText',
        'options'   => array('sanitizer' => 'username'),    // possible options are sanitizer, value, skip and unformatted
        'vars'      => array('name' => 'username', 'label' => 'Username', 'required' => true),
        'attr'      => array('id+name' => 'username'),
    ),
    'password' => array(
        'module'    => 'InputfieldText',
        'options'   => array('value' => ''),    // set field to empty
        'vars'      => array('name' => 'password', 'label' => 'Password', 'required' => true, 'type' => 'password'),
        'attr'      => array('id+name' => 'password', 'type' => 'password'),
    ),
);
$fh->createForm($this->formFields);
$fh->update('submit', $this->formSubmit);

New method value() to get sanitized values

    // get sanitized field value if a sanitizer is set via field options
    $sanitizedUsername = $fh->value('username');
    
    // get raw value without sanitized (skip sanitizer is set!)
    $rawUsername = $fh->value('username', false);

[pwFoo]

Thinking about getField($fieldname) and getForm() instead of public Form variable...

Maybe the next small update...

[pwFoo]

Version 0.3.0 released with bug fixes and improvements.

I try to get closer to a final release...

Added 

• getForm()
• getField($fieldname)
• getInput()

and changed class variables to protected.

ToDo:

• file handling if form was send with form errors (file changes won't saved during next try...)

Ideas, feedback and also pull requests are welcome

[pwFoo]

Version 0.3.2

• changed formProcess() return values to simply true, false or null (get input values via getInput() instead)
• Bug fix with getField() variable name

[pwFoo]

After some reading about honeypot I tested simple implementations. It should be quite simple.

Define the fields

        $this->honeypot['text'] = array(
            'module'    => 'InputfieldText',
            'options'   => array('sanitizer' => 'text', 'value' => 'http://'),
            'vars'      => array('name' => 'hp_website', 'label' => __('Do not change if you\'re human!')),
            'attr'      => array ('id+name' => 'hp_website', 'value' => 'http://'),
        );
        $this->honeypot['checkbox'] = array(
            'module'    => 'InputfieldCheckbox',
            'options'   => array('sanitizer' => 'text', 'value' => ''),
            'vars'      => array('name' => 'hp_sendmail', 'label' => __('Do not check if you\'re human!')),
            'attr'      => array ('id+name' => 'hp_sendmail', 'value' => ''),
        );

Add the fields to the form (for testing added to createForm before adding the submit button).

$this->add($this->honeypot['text']);
$this->add($this->honeypot['checkbox']);

And check the values during processForm method.

        if ($this->value('hp_website') != 'http://') {
            $honeypot = $this->getField('hp_website');
            $honeypot->error(__('Value was changed! Are you a spam bot?!'));
        }
        if ($this->value('hp_sendmail') == 1) {
            $honeypot = $this->getField('hp_sendmail');
            $honeypot->error(__('Value was changed! Are you a spam bot?!'));
        }

So if the text field modified or the checkbox was checked, you'll get an error and form process stops.

Last step is to add css / js to hide the form fields to human visitors.

What do you think about a honeypot feature? Should it be added to FormHelper module? Which fields (website or better email?) or types of honeypot should be added?

[pwFoo]

I rewrite FormHelper to use the native array support of form api and noticed that form based on a template won't work with newer PW dev version. I get an error message from PagefilesManager.

Fatal error: Exception: New page '/pw//' must be saved before files can be accessed from it (in /volume1/web/pw/wire/core/PagefilesManager.php line 260) #0 /volume1/web/pw/wire/core/PagefilesManager.php(251): PagefilesManager->___path() #1 /volume1/web/pw/wire/core/PagefilesManager.php(211): PagefilesManager->path() #2 /volume1/web/pw/wire/core/PagefilesManager.php(67): PagefilesManager->createPath() #3 /volume1/web/pw/wire/core/PagefilesManager.php(55): PagefilesManager->init(Object(Page)) #4 /volume1/web/pw/wire/core/Page.php(1752): PagefilesManager->__construct(Object(Page)) #5 /volume1/web/pw/wire/core/Pagefiles.php(74): Page->filesManager() #6 /volume1/web/pw/wire/core/Pagefiles.php(58): Pagefiles->setPage(Object(Page)) #7 /volume1/web/pw/wire/modules/Fieldtype/FieldtypeImage.module(33): Pagefiles->__construct(Object(Page)) #8 /volume1/web/pw/wire/core/Fieldtype.php(390): FieldtypeImage->getBlankValue(Object(Page), Object(Field)) #9 /volume1/web/pw/wire/core/Page.php(817): Fieldtype->getDefaultValue(Object(Page), Ob in /volume1/web/pw/index.php on line 243
Error: Exception: New page '/pw//' must be saved before files can be accessed from it (in /volume1/web/pw/wire/core/PagefilesManager.php line 260)

#0 /volume1/web/pw/wire/core/PagefilesManager.php(251): PagefilesManager->___path()
#1 /volume1/web/pw/wire/core/PagefilesManager.php(211): PagefilesManager->path()
#2 /volume1/web/pw/wire/core/PagefilesManager.php(67): PagefilesManager->createPath()
#3 /volume1/web/pw/wire/core/PagefilesManager.php(55): PagefilesManager->init(Object(Page))
#4 /volume1/web/pw/wire/core/Page.php(1752): PagefilesManager->__construct(Object(Page))
#5 /volume1/web/pw/wire/core/Pagefiles.php(74): Page->filesManager()
#6 /volume1/web/pw/wire/core/Pagefiles.php(58): Pagefiles->setPage(Object(Page))
#7 /volume1/web/pw/wire/modules/Fieldtype/FieldtypeImage.module(33): Pagefiles->__construct(Object(Page))
#8 /volume1/web/pw/wire/core/Fieldtype.php(390): FieldtypeImage->getBlankValue(Object(Page), Object(Field))
#9 /volume1/web/pw/wire/core/Page.php(817): Fieldtype->getDefaultValue(Object(Page), Ob
This error message was shown because site is in debug mode ($config->debug = true; in /site/config.php). Error has been logged.

In the past it was possible to work with a "fake Page object" to get a working form and take care about page save later...

        $fakePage = new Page();
        $fakePage->template = $tpl;

So maybe form based on a template won't work and so won't implemented in future versions

Or is there a solution to get it working again without an existing page?

I used template based forms to create new pages, but page is saved after form is processed and data is checked...