From a6bfb63fd18c4f64eadf4d2c3b5f9887810bc083 Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Thu, 12 Mar 2020 17:46:27 +0300
Subject: [PATCH] feat(form-plugin): add ability to render forms with tabs
 sections and without tabs sections. #412

total refactoring
---
 .../app/Controllers/EntriesController.php     |   4 +-
 .../form/app/Controllers/FormController.php   | 667 ------------------
 site/plugins/form/app/Models/Form.php         | 119 ++++
 site/plugins/form/dependencies.php            |   8 +-
 .../fields/datetimepicker/field.html          |  10 +-
 .../plugins/form/templates/fields/fields.html |  23 +
 .../form/templates/fields/heading/field.html  |   6 +-
 .../templates/fields/hidden-action/field.html |   1 -
 .../templates/fields/hidden-csrf/field.html   |   2 -
 .../form/templates/fields/hidden/field.html   |   2 +-
 .../form/templates/fields/html/field.html     |  12 +-
 .../templates/fields/select-media/field.html  |  19 +-
 .../fields/select-routable/field.html         |  15 +-
 .../fields/select-template/field.html         |  19 +-
 .../fields/select-visibility/field.html       |  15 +-
 .../form/templates/fields/select/field.html   |  16 +-
 .../form/templates/fields/tags/field.html     |  17 +-
 .../form/templates/fields/text/field.html     |  12 +-
 .../form/templates/fields/textarea/field.html |  12 +-
 site/plugins/form/templates/form.html         |  57 +-
 site/plugins/form/twig/FormTwigExtension.php  |  58 +-
 21 files changed, 320 insertions(+), 774 deletions(-)
 delete mode 100644 site/plugins/form/app/Controllers/FormController.php
 create mode 100644 site/plugins/form/app/Models/Form.php
 create mode 100644 site/plugins/form/templates/fields/fields.html
 delete mode 100644 site/plugins/form/templates/fields/hidden-action/field.html
 delete mode 100644 site/plugins/form/templates/fields/hidden-csrf/field.html

diff --git a/site/plugins/admin/app/Controllers/EntriesController.php b/site/plugins/admin/app/Controllers/EntriesController.php
index 198d1f97..cfed795e 100644
--- a/site/plugins/admin/app/Controllers/EntriesController.php
+++ b/site/plugins/admin/app/Controllers/EntriesController.php
@@ -778,9 +778,9 @@ class EntriesController extends Controller
 
             // Merge current entry fieldset with global fildset
             if (isset($entry['entry_fieldset'])) {
-                $form = $this->FormController->render(array_replace_recursive($fieldsets, $entry['entry_fieldset']), $entry);
+                $form = $this->form->render(array_replace_recursive($fieldsets, $entry['entry_fieldset']), $entry);
             } else {
-                $form = $this->FormController->render($fieldsets, $entry);
+                $form = $this->form->render($fieldsets, $entry);
             }
 
             return $this->view->render(
diff --git a/site/plugins/form/app/Controllers/FormController.php b/site/plugins/form/app/Controllers/FormController.php
deleted file mode 100644
index 71ba1d77..00000000
--- a/site/plugins/form/app/Controllers/FormController.php
+++ /dev/null
@@ -1,667 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-/**
- * @link http://digital.flextype.org
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-
-namespace Flextype;
-
-use Flextype\Component\Arr\Arr;
-use Flextype\Component\Filesystem\Filesystem;
-use Psr\Http\Message\ServerRequestInterface as Request;
-use function count;
-use function date;
-use function Flextype\Component\I18n\__;
-use function str_replace;
-use function strlen;
-use function strpos;
-use function strtotime;
-use function substr_replace;
-
-class FormController extends Controller
-{
-    /**
-     * Flextype Dependency Container
-     *
-     * @var
-     * @access private
-     */
-    private $flextype;
-
-    /**
-     * Form controls sizes
-     *
-     * @var array
-     * @access private
-     */
-    private $sizes = [
-        '1/12' => 'col w-1/12',
-        '2/12' => 'col w-2/12',
-        '3/12' => 'col w-3/12',
-        '4/12' => 'col w-4/12',
-        '5/12' => 'col w-5/12',
-        '6/12' => 'col w-6/12',
-        '7/12' => 'col w-7/12',
-        '8/12' => 'col w-8/12',
-        '9/12' => 'col w-9/12',
-        '10/12' => 'col w-10/12',
-        '12/12' => 'col w-full',
-        '12' => 'col w-full',
-    ];
-
-    /**
-     * Field class
-     *
-     * @var string
-     * @access private
-     */
-    private $field_class = 'form-control';
-
-    /**
-     * Constructor
-     *
-     * @access public
-     */
-    public function __construct($flextype)
-    {
-        $this->flextype = $flextype;
-    }
-
-    /**
-     * Render form
-     *
-     * @param array   $fieldset Fieldset
-     * @param array   $values   Fieldset values
-     *
-     * @return string Returns form based on fieldset
-     *
-     * @access public
-     */
-    public function render(array $fieldset, array $values = []) : string
-    {
-        // Init form
-        $form = '';
-
-        // Render form with section
-        if (isset($fieldset['sections']) && count($fieldset['sections']) > 0) {
-            $form = $this->renderFormWithSections($fieldset, $values);
-        }
-
-        // Render form classic
-        if (isset($fieldset['form']) && count($fieldset['form']['fields']) > 0) {
-            $form = $this->renderForm($fieldset, $values);
-        }
-
-        return $form;
-    }
-
-    /**
-     * Render classic form
-     *
-     * @param array   $fieldset Fieldset
-     * @param array   $values   Fieldset values
-     *
-     * @return string Returns form based on fieldset
-     *
-     * @access public
-     */
-    public function renderForm(array $fieldset, array $values = []) : string
-    {
-        $form  = '<form method="post" id="form">';
-        $form .= $this->_csrfHiddenField();
-        $form .= $this->_actionHiddenField();
-        $form .= '<div class="row">';
-        $form .= $this->renderFields($fieldset['form']['fields'], $values);
-        $form .= '</div>';
-        $form .= '</form>';
-
-        return $form;
-    }
-
-    /**
-     * Render form with sections
-     *
-     * @param array   $fieldset Fieldset
-     * @param array   $values   Fieldset values
-     *
-     * @return string Returns form based on fieldset
-     *
-     * @access public
-     */
-    public function renderFormWithSections(array $fieldset, array $values = []) : string
-    {
-        $form  = '<form method="post" id="form">';
-        $form .= $this->_csrfHiddenField();
-        $form .= $this->_actionHiddenField();
-
-        if (isset($fieldset['sections']) && count($fieldset['sections']) > 0) {
-
-            $form .= '<nav class="tabs__nav w-full">';
-            $form .= '<div class="flex bg-dark text-white">';
-
-            // Go through all sections and create nav items
-            foreach ($fieldset['sections'] as $key => $section) {
-                $form .= '<a href="javascript:;" class="tabs__nav__link ' . ($key === 'main' ? 'tabs__nav__link--active' : '') . '">' . __($section['title']) . '</a>';
-            }
-
-            $form .= '</div></nav>';
-
-            $form .= '<div class="tabs flex">';
-
-            // Go through all sections and create nav tabs
-            foreach ($fieldset['sections'] as $key => $section) {
-                $form .= '<div class="tabs__content w-full ' . ($key === 'main' ? 'tabs__content--active' : '') . '">';
-                $form .= '<div class="row">';
-
-                $form .= $this->renderFields($section['form']['fields'], $values);
-
-                $form .= '</div>';
-                $form .= '</div>';
-            }
-
-            $form .= '</div>';
-        }
-
-        $form .= '</form>';
-
-        return $form;
-    }
-
-    /**
-     * Render form fields
-     *
-     * @param array   $fields Fields
-     * @param array   $values Fieldset values
-     *
-     * @return string Returns form fields based on fieldset
-     *
-     * @access public
-     */
-    public function renderFields(array $fields, array $values = []) : string
-    {
-        $_form_field = '';
-
-        foreach ($fields as $element => $properties) {
-            // Set empty form field element
-            $form_field = '';
-
-            // Set element name
-            $field_name = $this->getElementName($element);
-
-            // Set element id
-            $field_id = $this->getElementID($element);
-
-            // Set element default value
-            $field_value = $this->getElementValue($element, $values, $properties);
-
-            // Seletct field type
-            switch ($properties['type']) {
-                case 'textarea':
-                    $form_field = $this->textareaField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'hidden':
-                    $form_field = $this->hiddenField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'html':
-                    $form_field = $this->htmlField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'select':
-                    $form_field = $this->selectField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'template_select':
-                    $form_field = $this->templateSelectField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'visibility_select':
-                    $form_field = $this->visibilitySelectField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'heading':
-                    $form_field = $this->headingField($field_id, $properties);
-                    break;
-                case 'routable_select':
-                    $form_field = $this->routableSelectField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'tags':
-                    $form_field = $this->tagsField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'datetimepicker':
-                    $form_field = $this->dateField($field_id, $field_name, $field_value, $properties);
-                    break;
-                case 'media_select':
-                    $form_field = $this->mediaSelectField($field_id, $field_name, $field_value, $properties);
-                    break;
-                default:
-                    $form_field = $this->textField($field_id, $field_name, $field_value, $properties);
-                    break;
-            }
-
-            $_form_field .= $form_field;
-        }
-
-        return $_form_field;
-    }
-
-    /**
-     * Get element value
-     *
-     * @param string $element    Form Element
-     * @param array  $values     Form Values
-     * @param array  $properties Field properties
-     *
-     * @return mixed Returns form element value
-     *
-     * @access protected
-     */
-    protected function getElementValue(string $element, array $values, array $properties)
-    {
-        if (Arr::keyExists($values, $element)) {
-            $field_value = Arr::get($values, $element);
-        } elseif(Arr::keyExists($properties, 'default')) {
-            $field_value = $properties['default'];
-        } else {
-            $field_value = '';
-        }
-
-        return $field_value;
-    }
-
-    /**
-     * Get element name
-     *
-     * @param string $element Element
-     *
-     * @return string Returns form element name
-     *
-     * @access protected
-     */
-    protected function getElementName(string $element) : string
-    {
-        $pos = strpos($element, '.');
-
-        if ($pos === false) {
-            $field_name = $element;
-        } else {
-            $field_name = str_replace('.', '][', "$element") . ']';
-        }
-
-        $pos = strpos($field_name, ']');
-
-        if ($pos !== false) {
-            $field_name = substr_replace($field_name, '', $pos, strlen(']'));
-        }
-
-        return $field_name;
-    }
-
-    /**
-     * Get element id
-     *
-     * @param string $element Element
-     *
-     * @return string Returns form element id
-     *
-     * @access protected
-     */
-    protected function getElementID(string $element) : string
-    {
-        $pos = strpos($element, '.');
-
-        if ($pos === false) {
-            $field_name = $element;
-        } else {
-            $field_name = str_replace('.', '_', "$element");
-        }
-
-        return $field_name;
-    }
-
-    /**
-     * Media select field
-     *
-     * @param string  $field_id    Field ID
-     * @param string  $field_name  Field name
-     * @param mixed   $field_value Field value
-     * @param array   $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function mediaSelectField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help  = isset($properties['help'])  ? $properties['help'] : '';
-
-        $id      = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class   = isset($properties['class']) ? $properties['class'] . $this->field_class : $this->field_class;
-        $name    = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $current_value   = isset($properties['value']) ? $properties['value'] : $field_value;
-
-        $options = $this->flextype->EntriesController->getMediaList($_GET['id'], false);
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/select-template/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'options' => $options, 'current_value' => $current_value]);
-    }
-
-    /**
-     * Template select field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function templateSelectField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help  = isset($properties['help'])  ? $properties['help'] : '';
-
-        $id      = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class   = isset($properties['class']) ? $properties['class'] . $this->field_class : $this->field_class;
-        $name    = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $current_value   = isset($properties['value']) ? $properties['value'] : $field_value;
-
-        $_templates_list = $this->flextype['themes']->getTemplates($this->flextype['registry']->get('flextype.theme'));
-
-        $options = [];
-
-        if (count($_templates_list) > 0) {
-            foreach ($_templates_list as $template) {
-                if ($template['type'] !== 'file' || $template['extension'] !== 'html') {
-                    continue;
-                }
-
-                $options[$template['basename']] = $template['basename'];
-            }
-        }
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/select-template/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'options' => $options, 'current_value' => $current_value]);
-    }
-
-    /**
-     * Routable select field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function routableSelectField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help  = isset($properties['help'])  ? $properties['help'] : '';
-        $options = [true => __('admin_yes'), false => __('admin_no')];
-        $id      = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class   = isset($properties['class']) ? $properties['class'] . $this->field_class : $this->field_class;
-        $name    = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $current_value   = isset($properties['value']) ? $properties['value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/select-routable/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'options' => $options, 'current_value' => $current_value]);
-    }
-
-    /**
-     * Select field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function selectField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title   = isset($properties['title']) ? $properties['title'] : '';
-        $size    = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help    = isset($properties['help'])  ? $properties['help'] : '';
-        $options = isset($properties['options']) ? $properties['options'] : [];
-        $id      = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class   = isset($properties['class']) ? $properties['class'] . $this->field_class : $this->field_class;
-        $name    = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $current_value   = isset($properties['value']) ? $properties['value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/select/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'options' => $options, 'current_value' => $current_value]);
-    }
-
-    /**
-     * Heading field
-     *
-     * @param string $field_id   Field ID
-     * @param array  $properties Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function headingField(string $field_id, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $h     = isset($properties['h'])     ? $properties['h'] : 3;
-        $id    = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class = isset($properties['class']) ? $properties['class'] : '';
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/heading/field.html', ['title' => $title, 'size' => $size, 'h' => $h, 'id' => $id, 'class' => $class]);
-    }
-
-    /**
-     * Html field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function htmlField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $help  = isset($properties['help'])  ? $properties['help'] : '';
-        $class = isset($properties['class']) ? $properties['class'] : $this->field_class;
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $id    = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $name  = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $value  = isset($properties['value'])  ? $properties['value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/html/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'value' => $value]);
-    }
-
-    /**
-     * Hidden field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function hiddenField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $id    = isset($properties['field_name'])  ? $properties['field_name'] : $field_id;
-        $name  = isset($properties['field_name'])  ? $properties['field_name'] : $field_name;
-        $value = isset($properties['field_value']) ? $properties['field_value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/hidden/field.html', ['id' => $id, 'name' => $name, 'value' => $value]);
-    }
-
-    /**
-     * Textarea field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param string $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function textareaField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help  = isset($properties['help'])  ? $properties['help'] : '';
-        $value = isset($properties['value']) ? $properties['value'] : $field_value;
-        $id    = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $name  = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $class = isset($properties['class']) ? $properties['class'] : $this->field_class;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/textarea/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'value' => $value]);
-    }
-
-    /**
-     * Visibility field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function visibilitySelectField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title = isset($properties['title']) ? $properties['title'] : '';
-        $size  = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help  = isset($properties['help'])  ? $properties['help'] : '';
-        $options = ['draft' => __('admin_entries_draft'), 'visible' => __('admin_entries_visible'), 'hidden' => __('admin_entries_hidden')];
-        $id      = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class   = isset($properties['class']) ? $properties['class'] . $this->field_class : $this->field_class;
-        $name    = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $current_value   = isset($properties['value']) ? $properties['value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/select-visibility/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'options' => $options, 'current_value' => $current_value]);
-    }
-
-    /**
-     * Text field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function textField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title  = isset($properties['title']) ? $properties['title'] : '';
-        $size   = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help   = isset($properties['help'])  ? $properties['help'] : '';
-        $id     = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $name   = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $class  = isset($properties['class']) ? $properties['class'] : $this->field_class;
-        $value  = isset($properties['value'])  ? $properties['value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/text/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help, 'value' => $value]);
-    }
-
-    /**
-     * Tags field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function tagsField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-        $title   = isset($properties['title']) ? $properties['title'] : '';
-        $size    = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help    = isset($properties['help'])  ? $properties['help'] : '';
-        $options = isset($properties['options']) ? $properties['options'] : [];
-        $id      = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $class   = isset($properties['class']) ? $properties['class'] . $this->field_class : $this->field_class;
-        $name    = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $current_value   = isset($properties['value']) ? $properties['value'] : $field_value;
-
-        if (! empty($current_value)) {
-            $current_value = array_map('trim', explode(',', $current_value));
-        }
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/tags/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help , 'options' => $options, 'current_value' => $current_value]);
-    }
-
-    /**
-     * Date field
-     *
-     * @param string $field_id    Field ID
-     * @param string $field_name  Field name
-     * @param mixed  $field_value Field value
-     * @param array  $properties  Field properties
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function dateField(string $field_id, string $field_name, $field_value, array $properties) : string
-    {
-
-        $title  = isset($properties['title']) ? $properties['title'] : '';
-        $size   = isset($properties['size'])  ? $this->sizes[$properties['size']] : $this->sizes['12'];
-        $help   = isset($properties['help'])  ? $properties['help'] : '';
-        $id     = isset($properties['id'])    ? $properties['id'] : $field_id;
-        $name   = isset($properties['name'])  ? $properties['name'] : $field_name;
-        $class  = isset($properties['class']) ? $properties['class'] : $this->field_class;
-        $value  = isset($properties['value'])  ? $properties['value'] : $field_value;
-
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/datetimepicker/field.html', ['title' => $title, 'size' => $size, 'name' => $name, 'id' => $id, 'class' => $class, 'help' => $help, 'value' => $value]);
-    }
-
-    /**
-     * _csrfHiddenField
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function _csrfHiddenField() : string
-    {
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/hidden-csrf/field.html',
-                           ['getTokenNameKey' => $this->flextype['csrf']->getTokenNameKey(),
-                            'getTokenName' => $this->flextype['csrf']->getTokenName(),
-                            'getTokenValueKey' => $this->flextype['csrf']->getTokenValueKey(),
-                            'getTokenValue' => $this->flextype['csrf']->getTokenValue()]);
-    }
-
-    /**
-     * _actionHiddenField
-     *
-     * @return string Returns field
-     *
-     * @access protected
-     */
-    protected function _actionHiddenField() : string
-    {
-        return $this->flextype['view']->fetch('plugins/form/templates/fields/hidden-action/field.html');
-    }
-}
diff --git a/site/plugins/form/app/Models/Form.php b/site/plugins/form/app/Models/Form.php
new file mode 100644
index 00000000..ba591b61
--- /dev/null
+++ b/site/plugins/form/app/Models/Form.php
@@ -0,0 +1,119 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * @link http://digital.flextype.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Flextype;
+
+use Flextype\Component\Arr\Arr;
+use function count;
+use function date;
+use function Flextype\Component\I18n\__;
+use function str_replace;
+use function strlen;
+use function strpos;
+use function strtotime;
+use function substr_replace;
+
+class Form extends Model
+{
+    /**
+     * Render form
+     *
+     * @param array   $fieldset Fieldset
+     * @param array   $values   Fieldset values
+     *
+     * @return string Returns form based on fieldset
+     *
+     * @access public
+     */
+    public function render(array $fieldset, array $values = []) : string
+    {
+        return $this->view->fetch('plugins/form/templates/form.html',
+                                            [
+                                             'fieldset' => $fieldset,
+                                             'values' => $values,
+                                             'query' => $_GET
+                                            ]);
+    }
+
+    /**
+     * Get element value
+     *
+     * @param string $element    Form Element
+     * @param array  $values     Form Values
+     * @param array  $properties Field properties
+     *
+     * @return mixed Returns form element value
+     *
+     * @access public
+     */
+    public function getElementValue(string $element, array $values, array $properties)
+    {
+        if (Arr::keyExists($values, $element)) {
+            $field_value = Arr::get($values, $element);
+        } elseif(Arr::keyExists($properties, 'default')) {
+            $field_value = $properties['default'];
+        } else {
+            $field_value = '';
+        }
+
+        return $field_value;
+    }
+
+    /**
+     * Get element name
+     *
+     * @param string $element Element
+     *
+     * @return string Returns form element name
+     *
+     * @access public
+     */
+    public function getElementName(string $element) : string
+    {
+        $pos = strpos($element, '.');
+
+        if ($pos === false) {
+            $field_name = $element;
+        } else {
+            $field_name = str_replace('.', '][', "$element") . ']';
+        }
+
+        $pos = strpos($field_name, ']');
+
+        if ($pos !== false) {
+            $field_name = substr_replace($field_name, '', $pos, strlen(']'));
+        }
+
+        return $field_name;
+    }
+
+    /**
+     * Get element id
+     *
+     * @param string $element Element
+     *
+     * @return string Returns form element id
+     *
+     * @access public
+     */
+    public function getElementID(string $element) : string
+    {
+        $pos = strpos($element, '.');
+
+        if ($pos === false) {
+            $field_name = $element;
+        } else {
+            $field_name = str_replace('.', '_', "$element");
+        }
+
+        return $field_name;
+    }
+}
diff --git a/site/plugins/form/dependencies.php b/site/plugins/form/dependencies.php
index 224aac4d..2c142f02 100644
--- a/site/plugins/form/dependencies.php
+++ b/site/plugins/form/dependencies.php
@@ -12,10 +12,10 @@ declare(strict_types=1);
 namespace Flextype;
 
 /**
- * Add Form Controller to Flextype container
+ * Add Form Model to Flextype container
  */
-$flextype['FormController'] = static function ($container) {
-    return new FormController($container);
+$flextype['form'] = static function ($container) {
+    return new Form($container);
 };
 
 /**
@@ -26,6 +26,6 @@ $flextype['fieldsets'] = static function ($container) {
 };
 
 /**
- * Add form twig extension
+ * Add Form Twig extension
  */
 $flextype->view->addExtension(new FormTwigExtension($flextype));
diff --git a/site/plugins/form/templates/fields/datetimepicker/field.html b/site/plugins/form/templates/fields/datetimepicker/field.html
index a8320946..64a490a9 100644
--- a/site/plugins/form/templates/fields/datetimepicker/field.html
+++ b/site/plugins/form/templates/fields/datetimepicker/field.html
@@ -1,7 +1,7 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <input type="text" id="{{ id }}" name="{{ id }}" value="{{ value|date(registry.flextype.date_display_format) }}" class="js-datetimepicker {{ class }}">
-    {% if help %}
-        <small>{{ help }}</small>
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <input type="text" id="{{ field_id }}" name="{{ field_id }}" value="{{ field_value|date(registry.flextype.date_display_format) }}" class="form-control js-datetimepicker {{ properties.class }}">
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
 </div>
diff --git a/site/plugins/form/templates/fields/fields.html b/site/plugins/form/templates/fields/fields.html
new file mode 100644
index 00000000..d3d8e319
--- /dev/null
+++ b/site/plugins/form/templates/fields/fields.html
@@ -0,0 +1,23 @@
+{% set fields = ['text', 'textarea', 'hidden', 'datetimepicker', 'heading', 'html', 'tags', 'select', 'select-routable', 'select-visibility', 'select-template', 'select-media'] %}
+{% set sizes =
+    {
+        '1/12': 'col w-1/12',
+         '2/12': 'col w-2/12',
+         '3/12': 'col w-3/12',
+         '4/12': 'col w-4/12',
+         '5/12': 'col w-5/12',
+         '6/12': 'col w-6/12',
+         '7/12': 'col w-7/12',
+         '8/12': 'col w-8/12',
+         '9/12': 'col w-9/12',
+         '10/12': 'col w-10/12',
+         '12/12': 'col w-full',
+         '12': 'col w-full'
+     }
+%}
+
+{% for field in fields %}
+    {% if properties.type == field %}
+        {% include "plugins/form/templates/fields/" ~ field ~ "/field.html" %}
+    {% endif %}
+{% endfor %}
diff --git a/site/plugins/form/templates/fields/heading/field.html b/site/plugins/form/templates/fields/heading/field.html
index b4935382..1b83f208 100644
--- a/site/plugins/form/templates/fields/heading/field.html
+++ b/site/plugins/form/templates/fields/heading/field.html
@@ -1,3 +1,3 @@
-<div class="form-group {{ size }}">
-    <h{{ h }} id="{{ id }}" class="{{ class }} text-3xl border-b border-black">{{ tr(title) }}</h{{ h }}>
-</div>
\ No newline at end of file
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <h{% if properties.h %}{{ properties.h }}{% else %}3{% endif %} id="{{ field_id }}" class="{{ field_class }} text-3xl border-b border-black">{{ tr(properties.title) }}</h{% if properties.h %}{{ properties.h }}{% else %}3{% endif %}>
+</div>
diff --git a/site/plugins/form/templates/fields/hidden-action/field.html b/site/plugins/form/templates/fields/hidden-action/field.html
deleted file mode 100644
index 6d657fe4..00000000
--- a/site/plugins/form/templates/fields/hidden-action/field.html
+++ /dev/null
@@ -1 +0,0 @@
-<input type="hidden" id="action" name="action" value="save-form">
\ No newline at end of file
diff --git a/site/plugins/form/templates/fields/hidden-csrf/field.html b/site/plugins/form/templates/fields/hidden-csrf/field.html
deleted file mode 100644
index 95b4d09f..00000000
--- a/site/plugins/form/templates/fields/hidden-csrf/field.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<input type="hidden" name="{{ getTokenNameKey }}" value="{{ getTokenName }}">
-<input type="hidden" name="{{ getTokenValueKey }}" value="{{ getTokenValue }}">
\ No newline at end of file
diff --git a/site/plugins/form/templates/fields/hidden/field.html b/site/plugins/form/templates/fields/hidden/field.html
index ceb9c1fb..282e4c89 100644
--- a/site/plugins/form/templates/fields/hidden/field.html
+++ b/site/plugins/form/templates/fields/hidden/field.html
@@ -1 +1 @@
-<input type="hidden" name="{{ name }}" id="{{ id }}" value="{{ value }}">
\ No newline at end of file
+<input type="hidden" name="{{ field_name }}" id="{{ field_id }}" value="{{ field_value }}">
diff --git a/site/plugins/form/templates/fields/html/field.html b/site/plugins/form/templates/fields/html/field.html
index 45925a9c..94965145 100644
--- a/site/plugins/form/templates/fields/html/field.html
+++ b/site/plugins/form/templates/fields/html/field.html
@@ -1,7 +1,7 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <textarea id="{{ id }}" name="{{ name }}" rows="0" cols="0" class="js-html-editor {{ class }}">{{ value }}</textarea>
-    {% if help %}
-        <small>{{ help }}</small>
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <textarea id="{{ field_id }}" name="{{ field_name }}" rows="0" cols="0" class="js-html-editor form-control {{ properties.class }}">{{ field_value }}</textarea>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/select-media/field.html b/site/plugins/form/templates/fields/select-media/field.html
index 9b7603c8..55f1e5a1 100644
--- a/site/plugins/form/templates/fields/select-media/field.html
+++ b/site/plugins/form/templates/fields/select-media/field.html
@@ -1,11 +1,14 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <select class="{{ class }} js-select" name="{{ name }}">
-        {% for key, value in options %}
-            <option value="{{ key }}" {% if key == current_value %} selected="selected" {% endif %}>{{ value }}</option>
+{% set media_files = filesystem_list_contents(PATH_UPLOADS ~ '/entries/' ~ query.id ~ '/') %}
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
+        {% for media_file in media_files %}
+            {% if media_file.extension in registry.plugins.admin.settings.entries.media.accept_file_types %}
+                <option value="{{ template.basename }}" {% if media_file.basename == field_value %} selected="selected" {% endif %}>{{ media_file.basename }}</option>
+            {% endif %}
         {% endfor %}
     </select>
-    {% if help %}
-        <small>{{ help }}</small>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/select-routable/field.html b/site/plugins/form/templates/fields/select-routable/field.html
index 9b7603c8..1cb3ddab 100644
--- a/site/plugins/form/templates/fields/select-routable/field.html
+++ b/site/plugins/form/templates/fields/select-routable/field.html
@@ -1,11 +1,12 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <select class="{{ class }} js-select" name="{{ name }}">
+{% set options = {1: tr('admin_yes'), 0: tr('admin_no')} %}
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
         {% for key, value in options %}
-            <option value="{{ key }}" {% if key == current_value %} selected="selected" {% endif %}>{{ value }}</option>
+            <option value="{{ key }}" {% if key == field_value %} selected="selected" {% endif %}>{{ value }}</option>
         {% endfor %}
     </select>
-    {% if help %}
-        <small>{{ help }}</small>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/select-template/field.html b/site/plugins/form/templates/fields/select-template/field.html
index 9b7603c8..ca2ec091 100644
--- a/site/plugins/form/templates/fields/select-template/field.html
+++ b/site/plugins/form/templates/fields/select-template/field.html
@@ -1,11 +1,14 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <select class="{{ class }} js-select" name="{{ name }}">
-        {% for key, value in options %}
-            <option value="{{ key }}" {% if key == current_value %} selected="selected" {% endif %}>{{ value }}</option>
+{% set templates = filesystem_list_contents(PATH_THEMES ~ '/' ~ registry.flextype.theme ~ '/templates/') %}
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
+        {% for template in templates %}
+            {% if template.extension == 'html'%}
+                <option value="{{ template.basename }}" {% if template.basename == field_value %} selected="selected" {% endif %}>{{ template.basename }}</option>
+            {% endif %}
         {% endfor %}
     </select>
-    {% if help %}
-        <small>{{ help }}</small>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/select-visibility/field.html b/site/plugins/form/templates/fields/select-visibility/field.html
index 9b7603c8..3a536a97 100644
--- a/site/plugins/form/templates/fields/select-visibility/field.html
+++ b/site/plugins/form/templates/fields/select-visibility/field.html
@@ -1,11 +1,12 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <select class="{{ class }} js-select" name="{{ name }}">
+{% set options = {'draft': tr('admin_entries_draft'), 'visible': tr('admin_entries_visible'), 'hidden': tr('admin_entries_hidden')} %}
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
         {% for key, value in options %}
-            <option value="{{ key }}" {% if key == current_value %} selected="selected" {% endif %}>{{ value }}</option>
+            <option value="{{ key }}" {% if key == field_value %} selected="selected" {% endif %}>{{ value }}</option>
         {% endfor %}
     </select>
-    {% if help %}
-        <small>{{ help }}</small>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/select/field.html b/site/plugins/form/templates/fields/select/field.html
index 9b7603c8..62d2998f 100644
--- a/site/plugins/form/templates/fields/select/field.html
+++ b/site/plugins/form/templates/fields/select/field.html
@@ -1,11 +1,11 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <select class="{{ class }} js-select" name="{{ name }}">
-        {% for key, value in options %}
-            <option value="{{ key }}" {% if key == current_value %} selected="selected" {% endif %}>{{ value }}</option>
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <select class="form-control {{ properties.class }} js-select" name="{{ field_name }}">
+        {% for key, value in properties.options %}
+            <option value="{{ key }}" {% if key == field_value %} selected="selected" {% endif %}>{{ value }}</option>
         {% endfor %}
     </select>
-    {% if help %}
-        <small>{{ help }}</small>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/tags/field.html b/site/plugins/form/templates/fields/tags/field.html
index 2d5d1f42..435cf80d 100644
--- a/site/plugins/form/templates/fields/tags/field.html
+++ b/site/plugins/form/templates/fields/tags/field.html
@@ -1,12 +1,13 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <select class="{{ class }} js-tags" data-name="{{ name }}" multiple="multiple">
-        {% for key, value in current_value %}
-            <option value="{{ value }}" selected="selected">{{ value }}</option>
+{% set field_value = field_value|split(',') %}
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <select class="form-control js-tags {{ properties.class }}" data-name="{{ field_name }}" multiple="multiple">
+        {% for key, value in field_value %}
+            <option value="{{ value|trim }}" selected="selected">{{ value|trim }}</option>
         {% endfor %}
     </select>
-    <input type="hidden" name="{{ name }}" value="{{ current_value|join(',') }}">
-    {% if help %}
-        <small>{{ help }}</small>
+    <input type="hidden" name="{{ field_name }}" value="{{ field_value|join(',') }}">
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
 </div>
diff --git a/site/plugins/form/templates/fields/text/field.html b/site/plugins/form/templates/fields/text/field.html
index 6dd474b6..56eb5e66 100644
--- a/site/plugins/form/templates/fields/text/field.html
+++ b/site/plugins/form/templates/fields/text/field.html
@@ -1,7 +1,7 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <input type="text" id="{{ id }}" name="{{ id }}" value="{{ value }}" class="{{ class }}">
-    {% if help %}
-        <small>{{ help }}</small>
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr(properties.title) }}</label>
+    <input type="text" id="{{ field_id }}" name="{{ field_id }}" value="{{ field_value }}" class="form-control {{ properties.class }}">
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/fields/textarea/field.html b/site/plugins/form/templates/fields/textarea/field.html
index 15c93d88..69d9c1f7 100644
--- a/site/plugins/form/templates/fields/textarea/field.html
+++ b/site/plugins/form/templates/fields/textarea/field.html
@@ -1,7 +1,7 @@
-<div class="form-group {{ size }}">
-    <label for="{{ id }}" class="form-control-title">{{ tr(title) }}</label>
-    <textarea id="{{ id }}" name="{{ name }}" rows="0" cols="0" class="{{ class }}">{{ value }}</textarea>
-    {% if help %}
-        <small>{{ help }}</small>
+<div class="form-group {% if properties.size %}{{ sizes[properties.size] }}{% else %}{{ sizes[12] }}{% endif %}">
+    <label for="{{ field_id }}" class="form-control-title">{{ tr( properties.title) }}</label>
+    <textarea id="{{ field_id }}" name="{{ field_name }}" rows="0" cols="0" class="form-control {{  properties.class }}">{{ field_value }}</textarea>
+    {% if properties.help %}
+        <small>{{ properties.help }}</small>
     {% endif %}
-</div>
\ No newline at end of file
+</div>
diff --git a/site/plugins/form/templates/form.html b/site/plugins/form/templates/form.html
index bccc7552..e2a58348 100644
--- a/site/plugins/form/templates/form.html
+++ b/site/plugins/form/templates/form.html
@@ -1,18 +1,45 @@
-{# form skeleton #}
-<form method="post" id="form">
-    <nav class="tabs__nav w-full">
-        <div class="flex bg-dark text-white">
-            <a href="javascript:;" class="tabs__nav__link tabs__nav__link--active">
-                {# form tab link #}
-            </a>
-        </div>
-        <div class="tabs flex">
-            <div class="tabs__content w-full tabs__content--active">
-                <div class="row">
-                    {# form tab content #}
-                </div>
+<form action="" method="post" id="form">
+    {{ csrf() }}
+    <input type="hidden" id="action" name="action" value="save-form">
+
+    {% if fieldset.sections %}
+        <nav class="tabs__nav w-full">
+            <div class="flex bg-dark text-white">
+                {% for key, section in fieldset.sections %}
+                    <a href="javascript:;" class="tabs__nav__link {% if key == 'main' %} tabs__nav__link--active {% endif %}">{{ tr(section.title) }}</a>
+                {% endfor %}
             </div>
+        </nav>
+        <div class="tabs flex">
+            {% for key, section in fieldset.sections %}
+                <div class="tabs__content w-full {% if key == 'main' %} tabs__content--active {% endif %}">
+                    <div class="row">
+                        {% for element, properties in section.form.fields  %}
+
+                            {% set field_name = form.getElementName(element) %}
+                            {% set field_id = form.getElementID(element) %}
+                            {% set field_value = form.getElementValue(element, values, properties) %}
+
+                            {% include "plugins/form/templates/fields/fields.html" %}
+
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endfor %}
         </div>
-    </nav>
+    {% else %}
+        {% for element, properties in fieldset.form.fields  %}
+
+            {% set field_name = form.getElementName(element) %}
+            {% set field_id = form.getElementID(element) %}
+            {% set field_value = form.getElementValue(element, values, properties) %}
+
+            {% include "plugins/form/templates/fields/fields.html" %}
+
+        {% endfor %}
+    {% endif %}
+
+    {% if fieldset.form.submit %}
+        <input type="submit" value="{{ fieldset.form.submit.title }}" class="{{ fieldset.form.submit.class }}">
+    {% endif %}
 </form>
-{# /form skeleton #}
\ No newline at end of file
diff --git a/site/plugins/form/twig/FormTwigExtension.php b/site/plugins/form/twig/FormTwigExtension.php
index 8e9d0621..2a02f175 100644
--- a/site/plugins/form/twig/FormTwigExtension.php
+++ b/site/plugins/form/twig/FormTwigExtension.php
@@ -10,9 +10,9 @@ declare(strict_types=1);
 namespace Flextype;
 
 use Twig_Extension;
-use Twig_SimpleFunction;
+use Twig_Extension_GlobalsInterface;
 
-class FormTwigExtension extends Twig_Extension
+class FormTwigExtension extends Twig_Extension implements Twig_Extension_GlobalsInterface
 {
     /**
      * Flextype Dependency Container
@@ -28,22 +28,60 @@ class FormTwigExtension extends Twig_Extension
     }
 
     /**
-     * Returns a list of functions to add to the existing list.
-     *
-     * @return array
+     * Register Global variables in an extension
      */
-    public function getFunctions() : array
+    public function getGlobals()
     {
         return [
-            new Twig_SimpleFunction('form_render', [$this, 'form_render'], ['is_safe' => ['html']])
+            'form' => new FormTwig($this->flextype),
         ];
     }
+}
+
+class FormTwig
+{
+    /**
+     * Flextype Dependency Container
+     */
+    private $flextype;
+
+    /**
+     * Constructor
+     */
+    public function __construct($flextype)
+    {
+        $this->flextype = $flextype;
+    }
 
     /**
-     * Form Render
+     *
      */
-    public function form_render(array $fieldset, array $values = []) : string
+    public function render(array $fieldset, array $values = []) : string
     {
-        return $this->flextype->FormController->render($fieldset, $values);
+        return $this->flextype['form']->render($fieldset, $values);
+    }
+
+    /**
+     *
+     */
+    public function getElementID(string $element) : string
+    {
+        return $this->flextype['form']->getElementID($element);
+    }
+
+    /**
+     *
+     */
+    public function getElementName(string $element) : string
+    {
+        return $this->flextype['form']->getElementName($element);
+    }
+
+    /**
+     *
+     */
+    public function getElementValue(string $element, array $values, array $properties)
+    {
+        return $this->flextype['form']->getElementValue($element, $values, $properties);
     }
 }