[SOLVED] How to split checkbox's input and label in 2 divs with Inputfield Markup?

[PWaddict]

Anyone knows how to split the checkbox's input and label in 2 divs with Inputfield Markup to look like in the following screenshot?

I'm using UIkit so this can be achieved like below but I can't figured out how to do this with Inputfield Markup.

<div class="uk-grid-small" uk-grid>
  <div class="uk-width-auto">
    <input id="checkbox" class="uk-checkbox" type="checkbox">
  </div>
  <div class="uk-width-expand">
    <label for="checkbox">Checkbox Label</label>
  </div>
</div>

 

[BrendonKoz]

Is this a FormBuilder template using embed method D? If so, it should give you everything you need to modify it. If not, how are you accessing form fields in the frontend?

[PWaddict]

6 minutes ago, BrendonKoz said:

Is this a FormBuilder template using embed method D? If so, it should give you everything you need to modify it. If not, how are you accessing form fields in the frontend?

No. I figured it out and I will post the solution soon.

[PWaddict]

Here is the solution.

First, on the checkbox field (let's call it terms_privacy_checkbox) settings leave empty the "Checkbox label". On the field "Label" you can either write something for example "Terms - Privacy Policy" or leave empty (it will output field name) doesn't matter cause we gonna remove it with the following hook.

$wire->addHookAfter('Page::render', function(HookEvent $event) {

    if($this->wire('page')->template->name != 'checkout') return;
    $event->return = str_replace("<span class='pw-no-select'>Terms - Privacy Policy</span>","", $event->return);   

});

Then with the following hook where we customize our form we can change the markup for the checkbox field too and split it to 2 divs using for example UIkit.

$wire->addHookBefore('InputfieldWrapper::render', function($event) {

  if ($this->wire('page')->template->name != "checkout") return;

  $wrapper = $event->object;

  $terms = wire('pages')->get("template=terms");
  $privacy = wire('pages')->get("template=privacy");

  $defaultMarkup = array(
	// Check wire\core\InputfieldWrapper.php for the $defaultMarkup
    'list' => "<ul {attrs}>{out}</ul>",
	'item' => "<li {attrs}>{out}</li>", 
	'item_label' => "<label class='InputfieldHeader ui-widget-header{class}' for='{for}'>{out}</label>",
	'item_label_hidden' => "<label class='InputfieldHeader InputfieldHeaderHidden ui-widget-header{class}'><span>{out}</span></label>",
	'item_content' => "<div class='InputfieldContent ui-widget-content{class}'>{out}</div>", 
	'item_error' => "<p class='InputfieldError ui-state-error'><i class='fa fa-fw fa-flash'></i><span>{out}</span></p>",
	'item_description' => "<p class='description'>{out}</p>", 
	'item_head' => "<h2>{out}</h2>", 
	'item_notes' => "<p class='notes'>{out}</p>",
	'item_detail' => "<p class='detail'>{out}</p>", 
	'item_icon' => "<i class='fa fa-fw fa-{name}'></i> ",
	'item_toggle' => "<i class='toggle-icon fa fa-fw fa-angle-down' data-to='fa-angle-down fa-angle-right'></i>", 
	// ALSO: 
	// InputfieldAnything => array(any of the properties above to override on a per-Inputfield basis)
    // Here we override the default markup for checkbox field by targeting it's name
    'name=terms_privacy_checkbox' => [
      'item_label' => "",
      'item_label_hidden' => "",
      'item_content' => "
        <div class='uk-grid-collapse{class}' uk-grid>
          <div class='uk-width-auto'>
            {out}
          </div>
          <div class='uk-width-expand'>
            <label class='uk-form-label' for='Inputfield_terms_privacy_checkbox'>
              <span class='uk-text-normal'>I agree with the <a href='{$terms->url}' rel='noopener' target='_blank'>{$terms->title}</a> and the <a href='{$privacy->url}' rel='noopener' target='_blank'>{$privacy->title}</a>.</span>
            </label>
          </div>
          {error}
        </div>",
    ],
  );

  $defaultClasses = array(
    // Check wire\core\InputfieldWrapper.php for the $defaultClasses
    'form' => '', // additional clases for InputfieldForm (optional)
	'list' => 'Inputfields',
	'list_clearfix' => 'ui-helper-clearfix', 
	'item' => 'Inputfield {class} Inputfield_{name} ui-widget',
	'item_label' => '', // additional classes for InputfieldHeader (optional)
	'item_content' => '',  // additional classes for InputfieldContent (optional)
	'item_required' => 'InputfieldStateRequired', // class is for Inputfield
	'item_error' => 'ui-state-error InputfieldStateError', // note: not the same as markup[item_error], class is for Inputfield
	'item_collapsed' => 'InputfieldStateCollapsed',
	'item_column_width' => 'InputfieldColumnWidth',
	'item_column_width_first' => 'InputfieldColumnWidthFirst',
	'item_show_if' => 'InputfieldStateShowIf',
	'item_required_if' => 'InputfieldStateRequiredIf'
	// ALSO: 
	// InputfieldAnything => array(any of the properties above to override on a per-Inputfield basis)
  );

  $wrapper->setMarkup($defaultMarkup);
  $wrapper->setClasses($defaultClasses);

  foreach ($wrapper->children as $in) {
    switch ($in->name) {

      case 'email':
      $in->wrapAttr('class', 'uk-width-1-1');
      $in->addClass('uk-input');
      $in->attr('required', 'required');
      break;

      case 'pad_paymentmodule':
      $in->wrapAttr('class', 'uk-width-1-1 uk-margin-small-top');
      $in->addClass('uk-radio');
      break;

      case 'terms_privacy_checkbox':
      $in->wrapAttr('class', 'uk-width-1-1');
      $in->addClass('uk-checkbox');
      $in->attr('required', 'required');
      break;

      case 'customerForm':
      $in->wrapAttr('class', 'uk-width-1-1 uk-margin-medium-top');
      $in->addClass('uk-button uk-button-primary uk-button-large');
      break;

      default:
      $in->wrapAttr('class', 'uk-width-1-1');
      $in->addClass('uk-width-1-1');
      break;

    }
  }
});