overwrite-classes-and-markup.md

How to overwrite classes and markup

Using the markup and classes option you'll be able to overwrite the default markup.

Example

$scf = $modules->get('SimpleContactForm');

$options = array(
  'markup' => array(
    'list' => "<div {attrs}>{out}</div>",
    'item' => "<p {attrs}>{out}</p>"
  ),
  'classes' => array(
    'form' => 'form form__whatever',
    'list' => 'list-item'
  )
);

echo $scf->render($options);

If you need additional markup before or after the form, you can use prependMarkup and appendMarkup.

Below is the list of all available customization options copied from ProcessWire master.

/**
 * Markup used during the render() method
 *
 */
static protected $defaultMarkup = array(
  'list' => "{out}\n",
  'item' => "\n\t<div {attrs}>\n{out}\n\t</div>",
  'item_label' => "\n\t\t<label class='form__item--label' for='{for}'>{out}</label>",
  'item_label_hidden' => "\n\t\t<label class='field__header field__header--hidden {class}'>{out}</label>",
  'item_content' => "{out}",
  'item_error' => "\n<p class='field--error--message'>{out}</p>",
  'item_description' => "\n<p class='field__description'>{out}</p>",
  'item_head' => "\n<h2>{out}</h2>",
  'item_notes' => "\n<p class='field__notes'>{out}</p>",
  'item_icon' => "",
  'item_toggle' => "",
  // ALSO: 
  // InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
);

/**
 * Classes used during the render() method
 *
 */
static protected $defaultClasses = array(
  'form' => 'form  js-simplecontactform', // additional clases for inputfieldform (optional)
  'form_error' => 'form--error--message',
  'form_success' => 'form--success--message',
  'list' => 'fields',
  'list_clearfix' => 'clearfix',
  'item' => 'form__item form__item--{name}',
  'item_label' => '', // additional classes for inputfieldheader (optional)
  'item_content' => '',  // additional classes for inputfieldcontent (optional)
  'item_required' => 'field--required', // class is for inputfield
  'item_error' => 'field--error', // note: not the same as markup[item_error], class is for inputfield
  'item_collapsed' => 'field--collapsed',
  'item_column_width' => 'field__column',
  'item_column_width_first' => 'field__column--first',
  'item_show_if' => 'field--show-if',
  'item_required_if' => 'field--required-if'
  // ALSO: 
  // InputfieldAnything => array( any of the properties above to override on a per-Inputifeld basis)
);

Trouble Shooting

Normally you're able to override the markup on a per-Intputfield basis like mentioned above:

'markup' => array(
   // @see: https://github.com/processwire/ProcessWire/blob/master/wire/core/InputfieldWrapper.php#L44
  'InputfieldSubmit' => array(
    // any of the properties above to override on a per-Inputifeld basis
  )
),

Example:

$scf = $modules->get('SimpleContactForm');

$options = array(
  'btnClass' => 'btn btn-blue btn-effect',
  'btnText' => 'Send',
  'classes' => array(
    'item' => 'input-field'
  )
);

$content .= $scf->render($options);

However this doesn't seem to work in some cases (using InputfielSubmit or InputfieldButton).
But you can override the render function of the specific class, in this example InputfieldSubmit (for example in init.php):

$this->addHook('InputfieldSubmit::render', function(HookEvent $event) {
  if ($this->page->template->name === 'contact') { // adapt template name to compare with
    $parent = (object)$event->object;
    $attrs  = $parent->getAttributesString();
    $value = $parent->entityEncode($parent->attr('value'));
    $out = "<button $attrs><span><span>$value</span></span></button>";
    $event->return = $out; 
  }
});

One more example:

$this->addHookBefore('Inputfield::render', function(HookEvent $event) {
  if ($this->page->template->name === 'contact') { // adapt template name to compare with
    $inputfield = $event->object;
    $inputfield->addClass('col-sm-8');
    $event->return = $inputfield;
  }
});