Create simple forms using API

[dotnetic]

I am using the api as suggested in somas gist´s but I want to have multiple checkboxes that don´t have own div´s but instead are together in one div so I can style them as a button-group. The markup I want is:

<fieldset>
                        <legend>Ich möchte</legend>
                        <div class="button-group">
                            <input id="checkbox1" type="checkbox" name="Neue Kunden gewinnen" value="Ja">
                            <label class="button" for="checkbox1">neue Kunden gewinnen</label>
                            <input id="checkbox2" type="checkbox"  name="Meine Kunden halten" value="Ja">
                            <label class="button" for="checkbox2">Kunden halten</label>
                            <input id="checkbox3" type="checkbox"  name="Kunden zurückgewinnen" value="Ja">
                            <label class="button" for="checkbox3">Kunden zurückgewinnen</label>
                        </div>
                    </fieldset>

I should mention, that these are not the only fields in the form.

Here is a screenshot of what I try to accomplish. How can I do that? InputFieldWrapper to the rescue?! But how?

[alan]

Sorry @felic and @jmartsch for not having some help for your answers :/

Anyone know why when I use Ryan's code from P1 of this thread to add a fieldset to a form:

...extend your example, lets say that you wanted the 'email' and 'password' fields in a fieldset titled "About You". You would create the fieldset...

 

no HTML fieldset tags are rendered?

[gebeer]

@alan

do you get <li> instead of <fieldset> tags? That would be the default behaviour.

You can set the HTML tags that are rendered, even by inputfield type, see here.

[alan]

@gebeer
Thanks for the tip, yes, sorry, I should have noted, I get

<li class='Inputfield InputfieldFieldset ui-widget' id='InputfieldFieldset2'>

I checked your link and Googled and tried variations around

$form->setMarkup(array(
    'fieldset' => "<fieldset {attrs}>{out}</fieldset>"
));

along with using Ryan's example:

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

but an HTML fieldset tag is never rendered.

Maybe your reply to @LostKobrakai means I can't do this; sadly the Soma code you linked to and using forms via the API is not familiar enough for me to work out how I can use an HTML fieldset tag as it's intended.

Thanks very much all the same and if I find the way to do this I'll be sure to post back here.

[Orkun]

Hi Guys

I really like the Form API of Processwire, it is really flexible. You can build from a simple contact form until to a complex registration form in a short time without using HTML. The only "flaw" which I encountered is. The bigger the form is, the bigger the code gets and this can be frustrating when you are building forms with more than 20 Inputfields. The code gets longer and readability gets lost over the time since it is a (almost)self repeating process of "codeblocks" where the structure is almost always the same. So I decided to write up a simple class to "minify" the code when building forms with the form API.

How does the class work?

It is a very simply class where you create a new (didn't know how to name the class ^^)ProcessForm Object and get the InputfieldForm Object with the getFormObject() function. Now you can call the addInputfield() function to create any kind(not are all supported, only the simple ones) of Inputfield. And at the end you can render the ProcessForm object which basically calls the render() function of the InputfieldForm class. 

<?php

$form = new ProcessForm("./contact", "post", "contactform"); //default ("./", "post", "ProcessForm")

$form->addInput(array(
    'type' => "InputfieldText", 
    'label' => "First Name",
    'attributes' => array('id' => "firstname", 'name' => "firstname"),
    'required' => 1
));

$form->addInput(array(
    'type' => "InputfieldRadios", 
    'label' => "To much code for a simple Form?",
    'options' => array('yes' => "Yes, absolutely", 'no' => "No, absolutely not"),
    'attributes' => array('id' => "tomuchcode", 'name' => "tomuchcode"),
    'required' => 1
));

$form->render();

?>

Is this usefull?

Honestly said, I don't know if this is usefull for you. It is usefull for me, since I can "minify" or have a better overview/readability over my code.

PS: I am still learning PHP OOP, so dont hate me when my "oop skills" are too low. I'am very open to better approaches, tipps, suggestions to improve this class or go antoher way to manage the big amount of code when building big forms with API. 

PPS: The class isn't tested very well(or better said it isn't tested at all ^^) since I am to lazy to do tests. So don't use this in commercial projects(but when you want still using it commercial it is at your own risk ^^).

The code is on Github

 

Greetings Orkun aka "Nukro"

Edited July 4, 2016 by Nukro
Source Code of ProcessForm.php was changed

[szabesz]

The code is on Github

Thank you for sharing and the quick intro!

[dlen]

Hi, a beginners question to the $form->action = "./" part:

Couldn't you just leave the action-attribute out, just do not write it?

AFAIK this would have the same effect.

I read that "./" means "same directory" and is only in this context interpreted as "same url/file/script".

[RyanJ]

You could and most browsers would submit to itself. However your code will not validate and its suggested you define the action. Not really sure why you would not want to.

Here is a good answer

http://stackoverflow.com/questions/9401521/is-action-really-required-on-forms

[Bill C]

On 3/11/2016 at 5:09 PM, Nukro said:

Hi Guys

I really like the Form API of Processwire, it is really flexible. You can build from a simple contact form until to a complex registration form in a short time without using HTML. The only "flaw" which I encountered is. The bigger the form is, the bigger the code gets and this can be frustrating when you are building forms with more than 20 Inputfields. The code gets longer and readability gets lost over the time since it is a (almost)self repeating process of "codeblocks" where the structure is almost always the same. So I decided to write up a simple class to "minify" the code when building forms with the form API.

How does the class work?

It is a very simply class where you create a new (didn't know how to name the class ^^)ProcessForm Object and get the InputfieldForm Object with the getFormObject() function. Now you can call the addInputfield() function to create any kind(not are all supported, only the simple ones) of Inputfield. And at the end you can render the ProcessForm object which basically calls the render() function of the InputfieldForm class. 

<?php

$example = new ProcessForm();
$formObject = $example->getFormObject();

$attributes = array('id' => "firstname", 'name' => "firstname");
$example->addInputfield("InputfieldText", $formObject, "First Name", $attributes, 1);

$out .= $example->render();

?>

Is this usefull?

Honestly said, I don't know if this is usefull for you. It is usefull for me, since I can "minify" or have a better overview/readability over my code.

PS: I am still learning PHP OOP, so dont hate me when my "oop skills" are too low. I'am very open to better approaches, tipps, suggestions to improve this class or go antoher way to manage the big amount of code when building big forms with API. 

PPS: The class isn't tested very well(or better said it isn't tested at all ^^) since I am to lazy to do tests. So don't use this in commercial projects(but when you want still using it commercial it is at your own risk ^^).

The code is on Github

 

Greetings Orkun aka "Nukro"

Hi Nukro,

  I tried working with your ProcessForm class and I ran into a few problems. I am using the code from ProcessForm.php . I would like to know if maybe the example code you listed is out of sync with the actual class's code ? One reason I ask this is that the class's code references what I believe is an associative array, that is supposed to be passed to the addInput method.  For example, the method definition contains ' function addInput ( $opts = array() , $fieldset ) ... and within addInput, there is code such as if ($opts['columnWidth'] != "") { $field->columnWidth = $opts['columnWidth'] ; } . Also, the example code calls addInputfield but in the class the method name is addInput.

I could probably use the class definition itself and get something working but I just wanted to run these questions past you and maybe save myself and anyone else  some time. So if i am missing something, please let me know if you have a chance , and thanks for sharing this class.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Later that evening....  lol

 Hey again Nukro, yeah I think I just should have worked with the class file and figured it out for myself, which is what I did after my first post. I was able to create two fields and a submit button , for example, with the following code.... (see attachment below)

$example = new ProcessForm($wire);  // had to pass the $wire variable to the class

$example->addInput( array('type'=>"InputfieldText",'label'=>"Name") );
$example->addInput( array('type'=>"InputfieldText",'label'=>"Address") );
$example->addInput( array('type'=>"InputfieldSubmit",'value'=>"Submit") );

$out .= $example->render();
echo($out);

------------------------------------------------------------------------

As mentioned in the comment I needed to make a change to give the class access to $wire. I tested this code out in a single php file. I included index.php in it to get access to $wire and then I passed $wire to the constructor for the ProcessForm class. I made $wire a private variable in the class and then I only had to change lines like $field = wire('modules')->get($type);  to $field = $this->wire('modules')->get($type);

So anyway, thank you again for the code Nukro. It was a good learning experience. The class offers more options than I used in my simple example, and I intend to play around with them and learn more. And thanks @Soma too for his original post... And lastly, sorry for the HUGE post guys, I tried to trim down the original post by Nukro in my post but didn't have much luck.

Bill

[LostKobrakai]

There's also something similar in the core. If you look here https://processwire.com/blog/posts/new-module-configuration-options/#using-an-array-to-define-module-configuration you'll see that module configuration inputfields can be defined by an array. This is also possible for custom created forms, as it's mentioned to the end of the text.

[Bill C]

@LostKobrakai

  Hi ,

    Thanks for pointing that out! Good to have for future reference.

[benbyf]

anything on spam filtering at all in this thread? Love the simple form but was wondering if there was a good rule of thumb for preventing bots.

Currently I use a javascript solution that adds a small bit of missing information to the form after 1 second on the front end which it checks for when posted.

[flydev]

9 minutes ago, benbyf said:

anything on spam filtering at all in this thread? 

You could try my module MarkupGoogleRecaptcha or implement an honeypot field like in the SimpleContactForm module.

[benbyf]

Will try your module for sure! Mainly wanted to know if my solution was a bad one too

[bernhard]

I'm using simple honeypots with very good success and find your idea nice. would be interesting what the others say about that!

[Juergen]

Hello @ all,

til now I have written the codes for my forms manually, but now I will use the API-method from PW. On my inputfields I always have the following code for collapsing inside my labels:

<i title="Toggle open/close" class="toggle-icon fa fa-fw fa-angle-down" data-to="fa-angle-down fa-angle-right" aria-hidden="true"></i>

Is there a way to get rid of this part via the API like this:

$field->collapsed(....);

Best regards

[LostKobrakai]

$field->collapsed = Inputfield::collapsedNever;

See here: https://processwire.com/api/ref/inputfield/#pw-methods-collapsed-constants

[Juergen]

Great! Works as expected!! Thanks

[Juergen]

Unfortunately the collapsing tag appears after validation. So every field which has an error shows the collapse tag again.

[Juergen]

Above post is not a big problem, because I can make in invisible via CSS. Another question: Is it possible to add a fe "isvalid" class after form submission to valid fields, so I can style them with CSS (fe a green border around the input field).

[blynx]

@Juergen This might be interesting: https://developer.mozilla.org/en-US/docs/Web/CSS/:valid and :invalid

Or you could add a class like "submitted" to the form after it has been submitted once. Then you would know that the inputs without error are valid.

[Juergen]

Thanks for the hint. I didnt know that there are CSS properties for valid and invalid. Anyway! I have solved it by adding a class after submission with this piece of code:

    foreach ($form as $field){
      $field->attr('class' , $field->attr('class') . ' submitted'); //add class submitted after form submission
    } 

So every field will get the additional class "submitted". The code must be placed after $input->post->submit. Now I can style the inputs depending on their state.

Thanks

 

[bernhard]

i guess you could also to this:

// if submitted
$form->addClass('my-form-submitted');

and css like

.my-form-submitted input {
    /* input fields styling for submitted forms */
}

 

[Juergen]

Hello @bernhard

of course: adding a submission class to the form itself will be the easier way instead of adding it to every field . Maybe to less coffee this morning. Beside this topic: Thanks for pointing me to UIKit (you have mentioned in one of your emails that you use this framework). I have tested it and I find it much better than Bootstrap. Its also better to integrate with the form API of PW.

[bernhard]

glad you like it. i think ryan likes it too, as the new demo page is also powered by uikit and the roadmap for 2016 (how fast did this year pass?!??) states, that the admin may get powered by uikit as well. really looking forward to that. https://processwire.com/blog/posts/happy-new-year-heres-a-roadmap-for-processwire-in-2016/