HowTo: InputfieldWrapper classes (Question)
Adding classes to the wrapper via a hook.
So here I am again. Wrestling with the API form. Love it and know I don't know enough to say anything bad about it. I am certain that there is a way to do most things you want when using the Processwire API.
Short Description
What I am trying to achieve is have all the Inputfields in my form render with unique classes. Why I am trying to do this is I am using a CSS-Framework that has an insanely intuitive grid system and would like to use these classes in the form. So when at render I will output the classes specific to that field. Hooking is one way I have thought of that might be plausible but, as mentioned I don't know how best to do it due to my limited knowledge of ProcessWire. I am open to other suggestions too.
Method
Create a form as in the feed done like Soma has suggested. Add to the form a markup and class array. Now add the fields you desire. In short...
<?php /* contact_contoller.php */
// And a whole lot more code
function hookAppendClassName($event) {
$otherEvent = $event->arguments(0); // grab event provided to PageRender::renderPage
$className = " [classes for the grid]";
$classes_array = $otherEvent->object->getParent()->getClasses();
$classes_array = array_merge($classes_array, array('item' => $classes_array['item']." ".$className));
$otherEvent->object->getParent()->setClasses($classes_array);
$otherEvent->return = $event;
$event->replace = true;
}
function createForm() {
$form = $modules->get("InputfieldForm");
$form->setMarkup(array(
'list' => "<div {attrs}>{out}</div>",
'item' => "<div {attrs}>{out}</div>",
'item_label' => "<label for='{for}'>{out}</label>",
'item_content' => "{out}",
'item_error' => "<p>{out}</p>",
'item_description' => "<p>{out}</p>",
'item_head' => "<h2>{out}</h2>",
'item_notes' => "<p class='notes'>{out}</p>",
));
$form->setClasses(array(
'list' => '[list-class]',
'list_clearfix' => '',
'item' => '{class}',
'item_required' => '',
'item_error' => '',
'item_collapsed' => '',
'item_column_width' => '',
'item_column_width_first' => ''
));
$form_name = $modules->get("InputfieldText");
$form_name->addHookBefore('renderValue', $this, 'hookAppendClassName');
$form_name->label = "Name";
$form_name->setParent($form);
$form_name->required = 1;
$form_name->attr('id+name','name');
$form_name->attr('placeholder','Name');
$form_name->attr('class','');
$form->append($form_name);
}
This code does not work. Was hoping someone could be of assistance. Here is my current output.
<html>
<form id="contact-form" class="InputfieldForm" name="contact-form" method="post" action="./" data-colspacing="1">
<div class="[list-class]">
<div class="InputfieldText" id="wrap_name">
<label for="name">Name</label>
<input id="name" class="InputfieldMaxWidth" name="name" type="text" maxlength="2048" placeholder="Name">
</div>
</div>
</form>
</html>
This is what i desire. Note the [list-class__item].
<form id="contact-form" class="InputfieldForm" name="contact-form" method="post" action="./" data-colspacing="1">
<div class="[list-class]">
<div class="InputfieldText [list-class__item]" id="wrap_name">
<label for="name">Name</label>
<input id="name" class="InputfieldMaxWidth" name="name" type="text" maxlength="2048" placeholder="Name">
</div>
</div>
</form>
Thanks in advance!
