[FIXED] format form elements in cakephp3

Issue

How do I align where the form element box appears as I want at a minimum each input box to right align, have the same font etc. I tried using templating but in the end I had no idea what it was talking about.

https://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses

   echo $this->Form->input('first_name',['label' => 'Tutor FirstName']);
    echo $this->Form->input('last_name',['label' => 'Tutor LastName']);
    echo $this->Form->input('email', ['label' => 'Email']);
    echo $this->Form->input('mobile', ['label' => 'Mobile']);
    echo $this->Form->input('home_phone',['label' => 'Home Phone']);
    echo $this->Form->input('work_phone',['label' => 'Work Phone']);

Solution

For templating it's work like that.

In src/Controller/AppController or where you're need it

class AppController extends Controller
{
    public $helpers = [
        'Form'      => [
            'templates' => 'template_forms',
        ],
    ];

In src/config

Create a new file "template_forms.php"

<?php
$config = [
    'checkboxFormGroup'   => '<div class="col-xs-5"><div class="checkbox">{{label}}</div></div>',
    'checkbox'            => '<input type="checkbox" value="{{value}}" {{attrs}}>',
    'checkboxWrapper'     => '<div class="form-group"><div class="col-sm-offset-5 col-xs-7">{{label}} {{input}}</div></div>',
    'inputContainer'      => '<div class="form-group" {{required}} >{{content}}</div><div class="hr-line-dashed"></div>',
    'input'               => '<div class="col-xs-7 col-sm-10 col-lg-10"><input class="form-control input-sm" type="{{type}}" name="{{name}}" {{attrs}}></div>',
    'label'               => '<label {{attrs}} class="col-xs-5 col-sm-2 col-lg-2 control-label">{{text}}</label>',
    'select'              => '<div class="col-xs-7 col-sm-10 col-lg-10"><select class="form-control input-sm" {{attrs}} name={{name}}>{{content}}<select></div>',
    'error'               => '<p class="text-danger">{{content}}</p>',
    'textarea'            => '<div class="col-xs-7 col-sm-10 col-lg-10"><textarea class="form-control input-sm" name="{{name}}" {{attrs}}>{{value}}</textarea></div>',
    'button'              => '<div class="form-group"><div class="col-md-12 col-xs-12 col-sm-12 text-center"><button {{attrs}} type="submit">{{text}}</button></div></div>',
    'inputContainerError' => '<div class="form-group has-error" {{required}}>{{content}}</div>{{error}}',
];
?>

This will overide all your forms in your app.

Answered By - Gransfall