Create simple forms using API

[szabesz]

47 minutes ago, bernhard said:

the admin may get powered by uikit as well

Hopefully UIkit 3:

https://getuikit.com/docs/uikit3.html

So let us be patient  

[mr-fan]

working on API forms this module comes very very handy...

 

[tpr]

I may be alone with this but I feel more productive without CSS frameworks. A small grid is OK but the rest is better to be custom. There is always something I need differently done and then the framework only hinders me.

[Juergen]

4 minutes ago, tpr said:

I may be alone with this but I feel more productive without CSS frameworks. A small grid is OK but the rest is better to be custom. There is always something I need differently done and then the framework only hinders me.

On frameworks you can load only what you want (CSS or JS). So you can use only the grid or you use other components too  - depends on your choice. You dont need to include all features.

[AndZyk]

@Juergen

Sorry for being off-topic, but if you like UIkit, you should look out for UIkit 3. I am excited. 

[pwFoo]

How to modify / replace the form field markup?

<div>
  <input id="box1" type="checkbox" />
  <label for="box1" data-fa-checked="<FA-UNICODE>" data-fa-unchecked="<FA-UNICODE>">Checkbox 1</label>
</div>

The markup above is used for css styled and font awesome checkbox / radio form input elements.

[pwFoo]

On 18.12.2016 at 10:58 AM, pwFoo said:

How to modify / replace the form field markup?

<div>
  <input id="box1" type="checkbox" />
  <label for="box1" data-fa-checked="<FA-UNICODE>" data-fa-unchecked="<FA-UNICODE>">Checkbox 1</label>
</div>

The markup above is used for css styled and font awesome checkbox / radio form input elements.

It's possible to replace the inputfield render() method by a hook to change the hardcoded html markup as needed. 

With my custom small css framework I was able to build css based and font awesome styled checkboxes / radios. 

 

Is it possible to set additional classes to form api elements others than the input field itself like container / li or the label element?

$field->attr('class', 'class1 class2')

is added to the input field (only).

[pwFoo]

On 3.11.2016 at 1:33 PM, tpr said:

I may be alone with this but I feel more productive without CSS frameworks. A small grid is OK but the rest is better to be custom. There is always something I need differently done and then the framework only hinders me.

That's why I play with a simple self created flex based grid / framework at the moment. Just for fun, but maybe I'll use it in the future

• flex grid (auto row wrap)
• nice buttons (based on button or a elements)
• checkboxes / radios with font awesome icons or css styled boxes and a slide toggle checkbox optional
• responsive table (html table change display mode (theader values in pseudo element ::before prefix the cell value)
• responsive dropdown / dropline responsive menu (styled checkbox toggle for mobile)

I compare it with pure, but try to keep it more flexible and smaller. Helper classes aren't included, but I could add some in a optional file. So it's modular and small.

 

[Mats]

@pwFoo You can change markup and classes: https://github.com/processwire/processwire/blob/master/wire/core/InputfieldWrapper.php#L41

[pwFoo]

@pwFoo You can change markup and classes: https://github.com/processwire/processwire/blob/master/wire/core/InputfieldWrapper.php#L41

That's the InputfieldWrapper / Form, but the input element / label is hardcoded.

https://github.com/processwire/processwire-requests/issues/66

[Sebastian]

Hi everyone,

quick question: Using the form API, is there a way to render a standards compliant

<fieldset>
  <legend>Legend</legend>
  /* some input fields */
</fieldset>

construct (for use in a frontend form)?
Whenever I use
 

$fieldset = $modules->get('InputfieldFieldset');
$fieldset->label = 'About You';

[add a bunch of fields, add them to the fieldset, add the fieldset to the form]

not only does the fieldset get somehow mangled in divs, I also don't get a html legend element.

I tried using

$modules->get("InputfieldMarkup");

and construct the fieldset/legend myself, but that ends up with

<div>
  <fieldset>
    <legend>Legend</legend>
    </div>

I searched the forum, but only found some similar questions and no real answer (unless I missed it, which is entirely possible )

[kongondo]

Hi @Sebastian. Welcome to the forums.

The real answer is that these forms were never intended for use in the frontend. Their purpose and design was for backend use only where trade-offs have had to be made between complying with standards versus delivering a usable and highly efficient UI, taking into account the underlying complexities that constitute the PW Admin. Using them in the frontend is just a bonus, but it comes at a 'cost'. You are probably better off using your own forms, or investing in Form Builder or similar.

[Sebastian]

3 minutes ago, kongondo said:

Hi @Sebastian. Welcome to the forums.

The real answer is that these forms were never intended for use in the frontend.

Hi kongondo,

thanks! That didn't accour to me at all. Makes a lot of sense too, I was working aroung the <button> instead of <input> for form submission already and was wondering why these elements were used insted of the more standard ones

I've been working with pw for at least 3 years now (also reading the forums, registered back then etc.) but that somehow never came up.  I also appreciated your work on modx extensions in the past btw! Might have a question regarding your dynamic selects module soon ;-)

 

[modifiedcontent]

Does Soma's original November 2012 example still work in PW3?

I get nothing when I dump it into a template file. Probably just doing something wrong.

[bernhard]

It is still the same. Show us the code you have and tell us the steps you did and I'm sure someone will help you

[legacyuser]

On 12/9/2012 at 4:41 PM, neildaemond said:

this version will validate the current fieldset before moving on to the next slide using jquery validation plugin. Must initiallize with:

$("#formID").formToWizard();
$("#formID").validate({
				 ignore: ".ignore"
		 });

 

PWformToWizard-validate.js

EDIT: must also include the validation plugin from http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Hello Neil,

Does this method still work? If yes, can you reupload this JS File?

Thanks

[neildaemond]

On 6/6/2017 at 7:27 PM, wiZzeNd said:

Hello Neil,

Does this method still work? If yes, can you reupload this JS File?

Thanks,
Simon

It's been so long I don't remember the details. But, I found that js file here now:

http://archived.neilpahl.com/PWformToWizard-validate.js

[pppws]

hey there,

i'm creating new pages via a form – which works great. to prevent the same pages names i try to validate the inputfield for duplicate entries.

in the form i ask for the users e-mail address which becomes the title for the page.

 

i modified the given example (don't allow hotmail e-mails) to this:

// here is a good point for extra/custom validation and manipulate fields
    $email = $form->get("email");

    // check if e-mail already exists
    if($pages->count("email=$email, include=all") > 0){        // attach an error to the field
        // and it will get displayed along the field
        $email->error("E-Mail is already in use.");
    }

the form still gets processed and returns a php error:

Quote

Fatal error: Exception: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '502d27e7ee88a4c82711d48751b78c00-1033' for key 'name_parent_id'

which i'm trying to avoid by checken for duplicates upfront.

when i'm using $page->count("email=$email, include=all") > 0 on a test template it returns the right value.

 

 

[bernhard]

hey @tpr,

any news on your nette forms module (https://processwire.com/talk/topic/2089-create-simple-forms-using-api/?do=findComment&comment=97399) ? i've also worked with nette forms and liked it a lot. a little pw module with some helpers would be great (like setting it to uikit markup, adding a honeypot https://github.com/wodCZ/NetteHoneypot )

i'm happy to collaborate

 

[tpr]

I'm using it on a few production site (well, everywhere almost :)) and one of my friend too tried it and kinda liked it. Even though I don't feel it's production-ready, I've made many changes during its lifetime so a code cleanup would be necessary. It's currently more admin-oriented, mainly to support multi-language in emails and messages, but everything can be overwritten by code. Adding fields are strictly available via code though.

I can add it to github and write some docs to it (currently there's none).

[bernhard]

I'm totally fine with using it only via IDE - that's the way I've used it myself too. It's easy, fast and the most flexible solution we can get. Imho the important thing is that it makes forms secure by default and validates on front- and backend.

Looking forward to trying the module. I have no specific need right now but I'm sure it will rise up soon. Some kind of quickstart guide would be great!

Thanks

[Soma]

On 24.9.2017 at 6:06 PM, pppws said:

hey there,

i'm creating new pages via a form – which works great. to prevent the same pages names i try to validate the inputfield for duplicate entries.

in the form i ask for the users e-mail address which becomes the title for the page.

 

i modified the given example (don't allow hotmail e-mails) to this:

// here is a good point for extra/custom validation and manipulate fields
    $email = $form->get("email");

    // check if e-mail already exists
    if($pages->count("email=$email, include=all") > 0){        // attach an error to the field
        // and it will get displayed along the field
        $email->error("E-Mail is already in use.");
    }

the form still gets processed and returns a php error:

which i'm trying to avoid by checken for duplicates upfront.

when i'm using $page->count("email=$email, include=all") > 0 on a test template it returns the right value.

 

 

I think the problem is that you have $email the Inputfield and not the value. You'll need to get the value like

$email = $form->get("email")->value;

[bernhard]

On 28.11.2017 at 11:19 AM, bernhard said:

hey @tpr,

any news on your nette forms module (https://processwire.com/talk/topic/2089-create-simple-forms-using-api/?do=findComment&comment=97399) ? i've also worked with nette forms and liked it a lot. a little pw module with some helpers would be great (like setting it to uikit markup, adding a honeypot https://github.com/wodCZ/NetteHoneypot )

i'm happy to collaborate

Finally I built a module for creating FrontendForms easily: 

 

[kongondo]

1 hour ago, zimali said:

Drupal does not clear the form.

?? This is the ProcessWire forum. Please clarify your post.

[Ivan Gretsky]

Thanks for the thread @Soma. One of the most important and cited ones in the whole forum history!

In the original post there are a few points that seem to be not discussed later in the thread, but which are extremely interesting to me.

1.

Quote

If you understand a little more how PW works with forms and inputfields you can simply add you own validation, do hooks and lots of magic with very easy code to read and maintain.

Are there any good examples of those to dig into? Gists maybe?

2.

Quote

It's also worth noting that processInput() will work also with an array (key=>value) of data it doesn't have to be the one from $input->post.

Looking here it seems arrays are not allowed. I might be not understanding it right or things might change since when it was written. Is there actually a way to process input from a page or an array?

3.

Quote

You can also use the processInput($input->post) method of a form that PW uses itself to validate a form.

There was already a question about what kind of validation processInput does and @adrian's answer too. I read the code a few times but still not sure should I sanitize values after processInput before saving to page fields or not. Is it necessary?

Thanks again! Learning ProcessWire is still fun (or am I doing it too slow?!)