Custom Form Element

Learn how to create a custom Form Element.

Follow the steps below to create your first element. Notice that core form elements are a very useful resource to get started and can be found in the modules/forms/elements directory relative to the installation folder.

Extending YOOtheme Pro

The following guide assumes you are already familiar with coding, PHP, and extending YOOtheme Pro.

1. Create Element Structure

A Form Element is no different from a standard core element, with the exception of a few more options we are going to see in the next steps. For now, create a new custom element following the official guide on how to create a custom element.

2. Extend as Form Element

Once your custom element is ready, let's upgrade it in order to be properly recognized by the form.

Open the element.json file and prefix the name prop with yooessentials_form_, then add the submittable prop as true and basic control_ fields, as illustrated.

// myelement/element.json
{
  "@import": "./element.php",
  "name": "myelement", 
  "name": "yooessentials_form_myelement", 
  "submittable": true, 
  ...
  "fields": {
    "control_id": "${yooessentials.form.fields.control_id}", 
    "control_name": "${yooessentials.form.fields.control_name}", 
    "control_label": "${yooessentials.form.fields.control_label}", 
    "control_required": "${yooessentials.form.fields.control_required}", 
    ...
  },
  "fieldset": {
    "default": {
      "type": "tabs",
      "fields": [
        {
          "title": "Content",
          "fields": [
              "control_id", 
              "control_name", 
              "control_label", 
              "control_required", 
              ...
          ]
        },
        ...
      ]
    }
  }
}

Even though not strictly necessary, it is good practice to wrap the element output with a form control, which will display and connect the label properly as well as adapt the output to the different form layouts.

// myelement/templates/template.php
<?php
$el = $this->el('div');
$myfield = $this->el(...);
$control = $this['ye-form']->control( 
    $node->props['control_name'], 
    $node->props['control_label'], 
    $node->props['control_required'], 
    $node->props['id'] 
); 
?>

<?= $el($props, $attrs) ?>
    <?= $control() ?>
        <?= $myfield(...) ?>
    <?= $control->end() ?>
<?= $el->end() ?>