Create simple forms using API

[LostKobrakai]

// Skip the label as long as it's blank

$submit->set('skipLabel', Inputfield::skipLabelBlank);

[adrianmak]

how to add a autofocus attribue on a input element

I tried to add this attribute with this line of code. But it didn't work. I'm expected it require a value to output the attribute.
However, it is odd to give whatever  value to autofocus attribute as it is not necessary under html5 spec

$field->attr("autofocus","");

[LostKobrakai]

This library is not meant to work after html5 spec, in fact even Ryan didn't meant it to be used for the frontend. It's presumably even older than the spec. If you take a look at "required", this doesn't even set the html5 required flag, You would need to add this as attribute by yourself, too. I would just use "autofocus" for the value and the name. 

[pwFoo]

// Skip the label as long as it's blank
$submit->set('skipLabel', Inputfield::skipLabelBlank); 

Maybe not working if field is already added to the form?

[LostKobrakai]

This shouldn't matter, it's not fixed until it's converted to markup by $form->render(). But I've noticed that InputfieldCheckbox overrides this on its own render() function.  I've already added a github issue about that. So maybe there something alike this in your case.

[heldercervantes]

It's thanks to posts like this that PW is so easy to learn. Great one here!

I'm stuck trying to use this with FieldtypeMapMarker. Any ideas?

[heldercervantes]

I'm having trouble with processInput vs InputfieldMapMarker. The result:

Error: Call to a member function set() on null (line 177 of C:\xampp\htdocs\cars\site\modules\FieldtypeMapMarker\InputfieldMapMarker.module)

Is there any way to set an exception for this variable not to go through processInput? Or perhaps another, better method to fix this?

[Soma]

It doesn't work on frontend, it requires the Fieldtype. http://modules.processwire.com/modules/fieldtype-map-marker/ read comments.

Edit: Maybe it still works. https://processwire.com/talk/topic/10110-cant-get-inputfieldmapmarker-working-on-frontend/

[iNoize]

Thanks for the Tutorial. 

Is  it possible to render the form with custom HTML code  ? 

currently reders  $form->render(); this Markup 

<form>
<ul>
<li>
<label></label>
<div>
<input>
</div>
</li>
<ul>
</form>

Is it possible to create own ? 

Example 

<form>
<div class=one>

<div>
<label></label>
<input>
</div>

<div>
<label></label>
<radio>
</div>

</div>

<div class=twoe>
<div class="custom1">
<label></label>
<input>
</div>

<div class="custom2">
<label></label>
<textarea>
</div>

</div>

</form>

Or is there a Exmaple how to handle ALL Input Field Types ? 

Selct ? Preselected Items ? 

Radio ? Requirements and and and ... 

EDIT:

Edited June 11, 2015 by iNoize

[Juergen]

@iNoize

As fas as I know it is not possible. I have worked in the past with api forms and gave it up. I also needed a special markup (in my case Bootstrap). It was not possible to get the exact output as I wanted. Therefore I write forms manually. It is the best way to get full control over the output.

[tpr]

I'm using Nette Forms standalone for forms, it is very powerful but easy to setup:

http://doc.nette.org/en/2.3/forms#toc-nette-forms-standalone

Cool thing is that with Live Form Validation javascript it provides JS validation too:

https://gist.github.com/Robyer/7948399

It is also capable to handle conditional fields, so for example show an input field only if you select an item in another select box, etc. And all this stuff works with live js validation, so you have to set rules once and both backend and frontend validation are done.

99% of the time the default form renderer is enough, but you can fine-control your forms if you need to:

http://doc.nette.org/en/2.3/forms#toc-defaultformrenderer

http://doc.nette.org/en/2.3/forms#toc-manual-rendering

You can use Bootstrap style too:

http://doc.nette.org/en/2.3/forms#toc-bootstrap-support

For example, I use it with UIkit:

<?php
// load Nette Forms
require_once(__DIR__ . '/../../../vendor/autoload.php');

// make a new Form instance
$form = new Nette\Forms\Form;

// optional tweaks
$form->setAction($page->url);
//$form->setMethod('GET');

// set "novalidate" and classes
$form->getElementPrototype()->novalidate = 'novalidate';
$form->getElementPrototype()->setClass('uk-form uk-form-horizontal');

// set how form is rendered
$renderer = $form->getRenderer();
$renderer->wrappers['controls']['container'] = 'div';
$renderer->wrappers['pair']['container'] = 'div class="uk-form-row"';
$renderer->wrappers['label']['container'] = 'div class="uk-form-label"';
$renderer->wrappers['control']['container'] = 'div class="uk-form-controls"';

// add fields

$form->addText('name', 'Name:', 30)
//        ->setAttribute('autofocus')
    ->setRequired("Required field")
    ->addRule($form::MIN_LENGTH, "Please add at least %d characters", 3);

// display form
echo $form;
?>

Processing form is another issue, you can start like this:

if ($form->isSuccess()) {
    // get submitted values (true: array format, false: object)
    $values = $form->getValues(true);

    $sender_name = $values['name'];
    $sender_email = $values['email'];
    // ...

    // redirect
    // $session->redirect($success_page);    
      // exit;
}

 

[Mats]

@iNoize:

Did you try this for custom markup? https://processwire.com/talk/topic/2089-create-simple-forms-using-api/?p=19547

And this for custom class names: https://processwire.com/talk/topic/2089-create-simple-forms-using-api/?p=22191

[dewwwald]

Hey Simple From Support,

I am looking at having a field requiredIf radio = yes. Must the field be set up as follow

$condition_field->attr('id', 'condition_field_id');
$field->requiredIf="condition_field_id='yes'";

I'll be handling the visual stuff on the front end with custon js. But before I do that the back end must work. The back end is basically processing input with the form. Will it catch that this field has now become required? and therefore render it as a required field?

Edited July 15, 2015 by LostKobrakai
please use code-blocks if possible

[LostKobrakai]

If the requireIf selector is correct (maybe radios do only match by value and not the label) than this should work. The js doesn't care how the fields are set up if the pieces fit together.

[dewwwald]

Hey LostKobrakai,

Thanks for the reply, Yeah I tested the value strait away after I posted the question.

I am rendering the markup myself using a full MVC approach. Could this cause the issue?

Here is an example of what I am rendering

<div class="Inputfield  push_-large_-bottom " id="wrap_post_line_one">
  <label for="post_line_one"><!--
    -->Postal address line 1      </label>
  <input type="text" name="post_line_one" id="post_line_one" placeholder="" maxlength="2048" value="">
</div>

I want post line one to be requiredIf. Is processwire only looking at the field id in input->post? Because then this should work as all of the forms work perfectly.

The issue i guess lies in the setup of requiredIf on my side, here is post_line_one's setup,

    // create an input for a visitor's Postal address
    $form_post_one = $modules->get("InputfieldText");
    $form_post_one->attr('label', "Postal address line 1");
    $form_post_one->requiredIf = "has_post.value='no'";
    $form_post_one->attr('id+name','post_line_one');
    $form_post_one->attr('placeholder','');
    $form_post_one->attr('grid','g-1/1');
    $this->append($form_post_one); //this is where my mvc starts

[LostKobrakai]

You're missing all the "wrapper" classes needed for requireIf to work. Maybe take a look at the pw rendered output to see those.

[dewwwald]

So I rendered the form now, using the form->render function. However this does not seem to work. That brings me to my selector.

Tries ->

- "has_post='no'"

- "has_post_no=1"

- "has_post.value='no'"

[LostKobrakai]

In wire/templates-admin/scripts/inputfields.js you can set debug mode to true (first view lines). Please have a look at what this is does print to the console.

[dewwwald]

Ill do that, however I am now going to use a fix that works just the same, 

$form_post_two->required = $input->post->has_post === 'yes' ? 0 : 1;

[David Bopp]

I realised that the content of the field is cut off after 255 chars. How can I enlarge the amount of chars that processwire processes?

EDIT: First problem solved. Problem was the sanitizer. I used $sanitizer->text() instead of $sanitizer->textarea()

Second question still open:

How can I set the maxlength attribute on an InputFieldTextarea? The following code only worked on InputFieldText:

$field = $modules->get("InputfieldText");
$field->attr('maxlength', "80");         // html output: maxlength="80"
...
$field = $modules->get("InputfieldTextarea");
$field->attr('maxlength', "254");      // no equivalent html output

[LostKobrakai]

The maxlength attribute on textareas is an html5 attribute and the inputfield's implementation is older than html5. It does support maxlength only in conjunction with an fieldtype textarea, which would ensure the max length on the server side. 

[GosuSan]

Hey everyone,

I just recently found out that PW exists, and I really like it so far, but I am still in the "get-used-to"-Phase 

I am creating a small Website for a Friend, and stumbled across this Thread while trying to get a Email-Form done for him.

There is just a little part of the Code that is not exactly clear to me:

         //to sanitize input
         $name = $sanitizer->text($input->post->name);
         $email = $sanitizer->email($form->get("email")->value);

I understand what it does, but why is the syntax so different, considering both lines do almost the same?

To be more specific why is it not:

         //to sanitize input
         $name = $sanitizer->text($input->post->name);
         $email = $sanitizer->email($input->post->email);

or:

         //to sanitize input
         $name = $sanitizer->text($form->get("name")->value);
         $email = $sanitizer->email($form->get("email")->value);

?

Thanks in advance!

PS: Great work <- for this Tutorial, this CMS and this community! 

[renobird]

GosuSan,

Welcome.

I'm not sure of the context of those examples. I think Soma's original post has them as examples that are commented out. They are just meant to show alternate ways of accessing the values. Probably at different points in the submission process, depending on what you want to do.

Accessing the values from $form->get("field_name")->value means the value already exists in the form object, so you are getting the values either after a successful submission, or at some point during the submission process. Perhaps for doing some other kind of check/validation (see the hotmail error in the first post example).

So they both work, but it just depends on at what point you are asking for the values.

[GosuSan]

Thank you very much, renobird.

Yes, I referred to the commented-out section of Soma's original post.

Thanks for clarifying, this was another step towards understanding PW better.

I have to say it has an easy understandable structure in most situations (for now).

In most other CMS / CMF I spent much more time to orientate.

Thanks again!

[felic]

Hi,

i have a specific question while dealing with file uploads: I have a (API) form which contains several file upload fields beside other field types elements. Some of them are required, so submitting the form gets into the error fork, when they are not populated/checked.

A rather simplified structure of the form is available as a Gist (https://gist.github.com/e838fc5ecf90c309842e).

The form (and uploads in general) works just fine, but i don't get along with the common issue, that all file uploads gets lost/empty if the form runs into the error fork after first submission, e.g. some required fields are not populated or checked (checkboxes). If the user correct this and submits the form again, no files are available any longer (without uploading them again on every submit. What is annoying and expresses rather lame UX).

So i wonder how and where to store those file uploads temporarily, so they are available on form submission even if there are several submits because of form validation errors until the form succeed.

My last approach was to put the generation of file uploads (e.g. building a array of all upload field values) shortly after the submit condition. But that doesn't work either, e.g. when submitting the form twice or more the $uploaded_documents array is empty...

Perhaps some of you has a clearer view on that (?). Would be great.