init

2022-09-30 20:02:02 +01:00
commit 66dafc36c3
2561 changed files with 454489 additions and 0 deletions
--- a/user/plugins/form/templates/forms/fields/array/array.html.twig
+++ b/user/plugins/form/templates/forms/fields/array/array.html.twig
@@ -0,0 +1,99 @@
+{% extends "forms/field.html.twig" %}
+
+{% macro renderer(key, text, field, scope) %}
+
+    {% if text is not iterable %}
+        <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}"
+             data-grav-array-type="row">
+            <span data-grav-array-action="sort" class="fa fa-bars"></span>
+            {% if field.value_only != true %}
+                {% if key == '0' and text == '' %}
+                    {% set key = '' %}
+                {% endif %}
+
+                <input
+                        data-grav-array-type="key"
+                        type="text" value="{{ key }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        placeholder="{{ field.placeholder_key|e|t }}" />
+            {% endif %}
+
+            {% if field.value_type == 'textarea' %}
+                <textarea
+                        data-grav-array-type="value"
+                        name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
+                        placeholder="{{ field.placeholder_value|e|t }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}>{{ text }}</textarea>
+            {% else %}
+                <input
+                        data-grav-array-type="value"
+                        type="text"
+                        name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
+                        placeholder="{{ field.placeholder_value|e|t }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        value={% if text == 'true' %}true{% elseif text == 'false' %}false{% else %}"{{ text|join(', ')|e }}"{% endif %} />
+            {% endif %}
+
+            <span data-grav-array-action="rem" class="fa fa-minus"></span>
+            <span data-grav-array-action="add" class="fa fa-plus"></span>
+        </div>
+    {% endif %}
+{% endmacro %}
+
+{% import _self as array_field %}
+
+{% do assets.addJs('plugin://form/assets/form.vendor.js', { 'group': 'bottom', 'loading': 'defer' }) %}
+{% do assets.addJs('plugin://form/assets/form.min.js', { 'group': 'bottom', 'loading': 'defer' }) %}
+
+{% block global_attributes %}
+    data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
+    data-grav-array-keyname="{{ field.placeholder_key|e|t }}"
+    data-grav-array-valuename="{{ field.placeholder_value|e|t }}"
+    data-grav-array-textarea="{{ field.value_type == 'textarea' }}"
+    {{ parent() }}
+{% endblock %}
+
+{% block input %}
+    <div class="{{ field.size }} {{ field.classes }}" data-grav-array-type="container"{% if field.value_only %} data-grav-array-mode="value_only"{% endif %}{{ value|length <= 1 ? ' class="one-child"' : '' }}>
+        {% if value|length %}
+            {% for key, text in value -%}
+                {% if text is not iterable %}
+                    {{ array_field.renderer(key, text, field, scope) }}
+                {% else %}
+                    {# Backward compatibility for nested arrays (metas) which are not supported anymore #}
+                    {% for subkey, subtext in text -%}
+                        {{ array_field.renderer(key ~ '[' ~ subkey ~ ']', subtext, field, scope) }}
+                    {% endfor %}
+                {% endif %}
+            {% endfor %}
+        {%- else -%}
+            {# Empty value, mock the entry field#}
+            <div class="form-row" data-grav-array-type="row">
+                <span data-grav-array-action="sort" class="fa fa-bars"></span>
+                {% if field.value_only != true %}
+                    <input
+                            data-grav-array-type="key"
+                            type="text"
+                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                            placeholder="{{ field.placeholder_key|e|t }}" />
+                {% endif %}
+                {% if field.value_type == 'textarea' %}
+                    <textarea
+                            data-grav-array-type="value"
+                            name="{{ (scope ~ field.name)|fieldName }}"
+                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                            placeholder="{{ field.placeholder_value|e|t }}"></textarea>
+                {% else %}
+                    <input
+                            data-grav-array-type="value"
+                            type="text"
+                            name="{{ (scope ~ field.name)|fieldName }}"
+                            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                            placeholder="{{ field.placeholder_value|e|t }}" />
+                {% endif %}
+                <span data-grav-array-action="rem" class="fa fa-minus"></span>
+                <span data-grav-array-action="add" class="fa fa-plus"></span>
+            </div>
+        {%- endif %}
+    </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/avatar/avatar.html.twig
+++ b/user/plugins/form/templates/forms/fields/avatar/avatar.html.twig
@@ -0,0 +1,10 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+{% set avatar = form.value('avatar') %}
+{% if avatar %}
+    <label class="{{ field.classes }}"><img class="{{ field.img_classes }}" style="max-width:200px;" src="{{ base_url_simple ~ '/' ~ (avatar|first).path }}" /></label>
+{% else %}
+    <label class="{{ field.classes }}"><img class="{{ field.img_classes }}" src="https://www.gravatar.com/avatar/{{ form.value('email')|md5 }}?s=200" /></label>
+{% endif %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/basic-captcha/basic-captcha.html.twig
+++ b/user/plugins/form/templates/forms/fields/basic-captcha/basic-captcha.html.twig
@@ -0,0 +1,28 @@
+{% set form_field_outer_data_classes = 'form-data basic-captcha' %}
+
+{% extends "forms/field.html.twig" %}
+
+{% block prepend %}
+    <div class="form-input-addon form-input-prepend">
+        <img id="basic-captcha-reload" src="{{ url('/forms-basic-captcha-image.jpg') }}" alt="human test" />
+        <button id="reload-captcha"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="#292D32"><path d="M14.74 22.39c4.68-1.24 8-5.49 8-10.4 0-5.95-4.79-10.75-10.75-10.75 -3.11 0-5.78 1.11-7.99 2.95 -.77.64-1.43 1.32-1.98 2.01 -.34.41-.57.75-.69.95 -.22.35-.1.81.25 1.02 .35.21.81.09 1.02-.26 .08-.15.27-.43.56-.79 .49-.62 1.08-1.23 1.76-1.81C6.87 3.67 9.21 2.7 11.94 2.7c5.13 0 9.25 4.12 9.25 9.25 0 4.22-2.86 7.88-6.9 8.94 -.41.1-.64.51-.54.91 .1.4.51.63.91.53Zm-12-14.84V2.99c-.001-.42-.34-.75-.75-.75 -.42 0-.75.33-.75.75v4.56c0 .41.33.75.75.75 .41 0 .75-.34.75-.75Zm-.75.75H4h2.43c.41 0 .75-.34.75-.75 0-.42-.34-.75-.75-.75H4 1.99c-.42 0-.75.33-.75.75 0 .41.33.75.75.75Z"/><path d="M1.25 12c0 1.09.16 2.16.48 3.18 .12.39.54.61.93.49 .39-.13.61-.55.49-.94 -.28-.89-.42-1.81-.42-2.75 0-.42-.34-.75-.75-.75 -.42 0-.75.33-.75.75Zm1.93 6.15c.61.88 1.36 1.67 2.22 2.33 .32.25.79.19 1.05-.14 .25-.33.19-.8-.14-1.06 -.74-.58-1.38-1.25-1.92-2.02 -.24-.34-.71-.43-1.05-.19 -.34.23-.43.7-.19 1.04Zm5.02 3.91c1 .37 2.06.6 3.15.66 .41.02.76-.3.79-.71 .02-.42-.3-.77-.71-.8 -.94-.06-1.85-.25-2.72-.58 -.39-.15-.83.04-.97.43 -.15.38.04.82.43.96Z"/></g></svg></button>
+        <script>
+            function stripQueryString(url) {
+              return url.split("?")[0].split("#")[0];
+            }
+            document.getElementById("reload-captcha").onclick = function(event) {
+                event.preventDefault();
+                const src = stripQueryString(document.getElementById("basic-captcha-reload").src);
+                document.getElementById("basic-captcha-reload").src = src + `?v=${new Date().getTime()}`;
+            }
+        </script>
+    </div>
+{% endblock %}
+
+{% block input_attributes %}
+    type="text"
+    {% if field.size %}size="{{ field.size }}"{% endif %}
+    {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
+    {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/captcha/captcha.html.twig
+++ b/user/plugins/form/templates/forms/fields/captcha/captcha.html.twig
@@ -0,0 +1,100 @@
+{% extends "forms/field.html.twig" %}
+
+{% set config = grav.config %}
+{% set site_key = field.recaptcha_site_key and field.recaptcha_site_key != 'ENTER_YOUR_CAPTCHA_SITE_KEY' ? field.recaptcha_site_key : config.plugins.form.recaptcha.site_key %}
+{% set action = (page.route|trim('/') ~ '-' ~ form.name)|underscorize %}
+{% set formName = form.name|underscorize %}
+{% set theme = config.plugins.form.recaptcha.theme ?? 'light' %}
+
+{% block label %}{% endblock %}
+
+{% block input %}
+  {% if not site_key %}
+      <script type="application/javascript">console && console.error('site_key was not defined for form "{{ form.name }}" (Grav Form Plugin)')</script>
+  {% elseif config.plugins.form.recaptcha.version == 3 %}
+      {% do assets.addJs('https://www.google.com/recaptcha/api.js?render='~site_key~'&theme=' ~ theme) %}
+      {#<script src='https://www.google.com/recaptcha/api.js?render={{ site_key }}&theme={{ theme }}'></script>#}
+      <script type="application/javascript">
+          window.gRecaptchaInstances = window.gRecaptchaInstances || {};
+          window.gRecaptchaInstances['{{ form.id }}'] = {
+              element: document.querySelector('form#{{ form.id }}'),
+              submit: function (event) {
+                  event.preventDefault();
+                  grecaptcha.ready(function () {
+                      grecaptcha.execute('{{ site_key }}', {action: '{{ action }}'}).then(function (token) {
+                          var tokenElement = document.createElement('input');
+                          tokenElement.setAttribute('type', 'hidden');
+                          tokenElement.setAttribute('name', 'data[token]');
+                          tokenElement.setAttribute('value', token);
+
+                          var actionElement = document.createElement('input');
+                          actionElement.setAttribute('type', 'hidden');
+                          actionElement.setAttribute('name', 'data[action]');
+                          actionElement.setAttribute('value', '{{ action }}');
+
+                          const form = window.gRecaptchaInstances['{{ form.id }}'].element;
+                          const submit = window.gRecaptchaInstances['{{ form.id }}'].submit;
+                          form.insertBefore(tokenElement, form.firstChild);
+                          form.insertBefore(actionElement, form.firstChild);
+                          form.removeEventListener('submit', submit);
+                          form.submit();
+                      });
+                  });
+              }
+          };
+
+          window.gRecaptchaInstances['{{ form.id }}'].element.addEventListener('submit', window.gRecaptchaInstances['{{ form.id }}'].submit);
+      </script>
+  {% elseif config.plugins.form.recaptcha.version == '2-invisible' %}
+      <script type="application/javascript">
+          function captchaOnloadCallback_{{ formName }}() {
+              var form = document.querySelector('form#{{ form.id }}');
+              var submits = form.querySelectorAll('[type="submit"]') || [];
+              submits.forEach(function(submit) {
+                  submit.addEventListener('click', function(event) {
+                      event.preventDefault();
+                      var captchaElement = form.querySelector('#g-recaptcha-{{ formName }}');
+
+                      if (captchaElement) {
+                          captchaElement.remove();
+                      }
+
+                      captchaElement = document.createElement('div');
+                      captchaElement.setAttribute('id', 'g-recaptcha-{{ formName }}');
+                      form.appendChild(captchaElement);
+
+                      var widgetReference = grecaptcha.render('g-recaptcha-{{ formName }}', {
+                          sitekey: '{{ site_key }}', size: 'invisible',
+                          callback: function(/* token */) {
+                              form.submit();
+                          }
+                      });
+
+                      grecaptcha.execute(widgetReference);
+                  });
+              });
+          }
+      </script>
+
+      <script src="https://www.google.com/recaptcha/api.js?onload=captchaOnloadCallback_{{ formName }}&hl={{ grav.language.language }}&theme={{ theme }}"
+              async defer></script>
+  {% else %}
+    <script type="application/javascript">
+        var captchaOnloadCallback_{{ formName }} = function captchaOnloadCallback_{{ formName }}() {
+            grecaptcha.render('g-recaptcha-{{ formName }}', {
+                'sitekey': "{{ site_key }}",
+                'callback': captchaValidatedCallback_{{ formName }},
+                'expired-callback': captchaExpiredCallback_{{ formName }}
+            });
+        };
+
+        var captchaValidatedCallback_{{ formName }} = function captchaValidatedCallback_{{ formName }}() {};
+        var captchaExpiredCallback_{{ formName }} = function captchaExpiredCallback_{{ formName }}() {
+            grecaptcha.reset();
+        };
+    </script>
+    <script src="https://www.google.com/recaptcha/api.js?onload=captchaOnloadCallback_{{ formName }}&render=explicit&hl={{ grav.language.language }}&theme={{ theme }} "
+        async defer></script>
+    <div class="g-recaptcha" id="g-recaptcha-{{ formName }}" data-theme="{{ theme }}"></div>
+  {% endif %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/checkbox/checkbox.html.twig
+++ b/user/plugins/form/templates/forms/fields/checkbox/checkbox.html.twig
@@ -0,0 +1,46 @@
+{% extends "forms/field.html.twig" %}
+
+{% block label %}
+{% endblock %}
+
+{% block input %}
+    {% set id = field.id|default(field.name)|hyphenize %}
+    <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
+        <input
+            {# required attribute structures #}
+            name="{{ (scope ~ field.name)|fieldName }}"
+            value="{{ field.value ?? '1' }}"
+            type="checkbox"
+            {% if value == (field.value ?? '1') %} checked="checked" {% endif %}
+
+            {# input attribute structures #}
+            {% block input_attributes %}
+                id="{{ id|e }}"
+                class="{{ form_field_checkbox_classes }} {{ field.classes }}"
+                {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
+                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                {% if required %}required="required"{% endif %}
+                {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+                {% if field.attributes is defined %}
+                  {% for key,attribute in field.attributes %}
+                    {% if attribute|of_type('array') %}
+                      {{ attribute.name }}="{{ attribute.value|e('html_attr') }}"
+                    {% else %}
+                      {{ key }}="{{ attribute|e('html_attr') }}"
+                    {% endif %}
+                  {% endfor %}
+                {% endif %}
+            {% endblock %}
+            />
+        <label style="display:inline;" class="inline" for="{{ id|e }}">
+            {% if field.markdown %}
+                {{ field.label|t|markdown(false) }}
+            {% else %}
+                {{ field.label|t|e }}
+            {% endif %}
+            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
+        </label>
+    </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/checkboxes/checkboxes.html.twig
+++ b/user/plugins/form/templates/forms/fields/checkboxes/checkboxes.html.twig
@@ -0,0 +1,41 @@
+{% extends "forms/field.html.twig" %}
+
+{% block global_attributes %}
+    {{ parent() }}
+    data-grav-keys="{{ field.use == 'keys' ? 'true' : 'false' }}"
+    data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
+{% endblock %}
+
+{% block input %}
+    {% set value = (value is null ? field.default : value) %}
+    {% if field.use == 'keys' and field.default %}
+        {% set value = field.default|merge(value) %}
+    {% endif %}
+
+    {% for key, text in field.options %}
+
+        {% set id = field.id|default(field.name)|hyphenize ~ '-' ~ key %}
+        {% set name = field.use == 'keys' ? key : id %}
+        {% set val = field.use == 'keys' ? '1' : key %}
+        {% set checked = (field.use == 'keys' ? value[key] : key in value) %}
+        {% set help = (key in field.help_options|keys ? field.help_options[key] : false) %}
+
+        <div class="checkboxes {{ form_field_wrapper_classes }} {{ field.wrapper_classes }}">
+            <input type="checkbox"
+                   id="{{ id|e }}"
+                   value="{{ val|e }}"
+                   name="{{ (scope ~ field.name)|fieldName ~ '[' ~ name ~ ']' }}"
+                   class="{{ form_field_checkbox_classes }} {{ field.classes }}"
+                   {% if checked %}checked="checked"{% endif %}
+                   {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+            >
+            <label style="display: inline" for="{{ id|e }}">
+                {% if help %}
+                    <span class="hint--bottom" data-hint="{{ help|t|e('html_attr') }}">{{ text|t|e }}</span>
+                {% else %}
+                    {{ text|t|e }}
+                {% endif %}
+            </label>
+        </div>
+    {% endfor %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/color/color.html.twig
+++ b/user/plugins/form/templates/forms/fields/color/color.html.twig
@@ -0,0 +1,6 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="color"
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/column/column.html.twig
+++ b/user/plugins/form/templates/forms/fields/column/column.html.twig
@@ -0,0 +1,8 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+  {% embed 'forms/default/fields.html.twig' with {name: name, fields: field.fields} %}
+    {% block outer_markup_field_open %}<div class="form-column {{ field.classes }}">{% endblock %}
+    {% block outer_markup_field_close %}</div>{% endblock %}
+  {% endembed %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/columns/columns.html.twig
+++ b/user/plugins/form/templates/forms/fields/columns/columns.html.twig
@@ -0,0 +1,7 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+<div class="form-columns {{ field.classes }}">
+    {% include 'forms/default/fields.html.twig' with {name: field.name|parent_field, fields: field.fields} %}
+</div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/conditional/conditional.html.twig
+++ b/user/plugins/form/templates/forms/fields/conditional/conditional.html.twig
@@ -0,0 +1,19 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+{% set value = evaluate(field.condition) %}
+{% set value = value == 'true' ? 1 : value %}
+{% set value = value == 'false' ? 0 : value %}
+
+{% if value %}
+    {% if field.classes %}
+    <div class="{{ field.classes }}">
+    {% endif %}
+
+    {% include 'forms/default/fields.html.twig' with {name: field.name, fields: field.fields} %}
+
+    {% if field.classes %}
+    </div>
+    {% endif %}
+{% endif %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/date/date.html.twig
+++ b/user/plugins/form/templates/forms/fields/date/date.html.twig
@@ -0,0 +1,8 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="date"
+    {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
+    {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/date/edit_list.html.twig
+++ b/user/plugins/form/templates/forms/fields/date/edit_list.html.twig
@@ -0,0 +1 @@
+{{ value ? value|date('m/d/Y')|e }}
--- a/user/plugins/form/templates/forms/fields/datetime/datetime.html.twig
+++ b/user/plugins/form/templates/forms/fields/datetime/datetime.html.twig
@@ -0,0 +1,2 @@
+{# DEPRECATED. Switched to Text field until implemented properly #}
+{% extends "forms/fields/text/text.html.twig" %}
--- a/user/plugins/form/templates/forms/fields/datetime/edit_list.html.twig
+++ b/user/plugins/form/templates/forms/fields/datetime/edit_list.html.twig
@@ -0,0 +1 @@
+{{ value ? value|date('m/d/Y \\a\\t g:i A')|e }}
--- a/user/plugins/form/templates/forms/fields/display/display.html.twig
+++ b/user/plugins/form/templates/forms/fields/display/display.html.twig
@@ -0,0 +1,21 @@
+{% extends "forms/field.html.twig" %}
+ 
+{% if field.file %}
+    {% set content = read_file(field.file) %}
+{% else %}
+    {% set content = field.content %}
+{% endif %}
+
+{% block input %}
+    <div class="form-display-wrapper {{ field.size }} {{ field.classes }}" {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}>
+        {% if field.markdown %}
+            {{ content|t|markdown|raw }}
+        {% else %}
+            {% if field.evaluate %}
+              {{ evaluate_twig(content)|raw }}
+            {% else %}
+              {{ content|t|raw }}
+            {% endif %}
+        {% endif %}
+    </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/email/email.html.twig
+++ b/user/plugins/form/templates/forms/fields/email/email.html.twig
@@ -0,0 +1,10 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="email"
+    {% if field.multiple in ['on', 'true', 1] %}multiple="multiple"{% endif %}
+    {% if field.size %}size="{{ field.size }}"{% endif %}
+    {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
+    {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/fieldset/fieldset.html.twig
+++ b/user/plugins/form/templates/forms/fields/fieldset/fieldset.html.twig
@@ -0,0 +1,12 @@
+{% extends "forms/field.html.twig" %}
+{% set scope = field.nest_id ? scope ~ field.name ~ '.' : scope %}
+
+{% block field %}
+<fieldset {% if field.id is defined %}id="{{ field.id }}"{% endif %} {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}>
+  {% if field.legend %}
+    <legend>{{ field.legend|t }}</legend>
+  {% endif %}
+
+  {% include 'forms/default/fields.html.twig' with {name: field.name, fields: field.fields} %}
+</fieldset>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/file/file.html.twig
+++ b/user/plugins/form/templates/forms/fields/file/file.html.twig
@@ -0,0 +1,124 @@
+{% extends "forms/field.html.twig" %}
+
+{% macro bytesToSize(bytes) -%}
+    {% spaceless %}
+        {% set kilobyte = 1024 %}
+        {% set megabyte = kilobyte * 1024 %}
+        {% set gigabyte = megabyte * 1024 %}
+        {% set terabyte = gigabyte * 1024 %}
+
+        {% if bytes < kilobyte %}
+            {{ bytes ~ ' B' }}
+        {% elseif bytes < megabyte %}
+            {{ (bytes / kilobyte)|number_format(2, '.') ~ ' KB' }}
+        {% elseif bytes < gigabyte %}
+            {{ (bytes / megabyte)|number_format(2, '.') ~ ' MB' }}
+        {% elseif bytes < terabyte %}
+            {{ (bytes / gigabyte)|number_format(2, '.') ~ ' GB' }}
+        {% else %}
+            {{ (bytes / terabyte)|number_format(2, '.') ~ ' TB' }}
+        {% endif %}
+    {% endspaceless %}
+{%- endmacro %}
+
+{% macro preview(path, value, global) %}
+    {% if value %}
+        {% set uri = global.grav.uri %}
+        {% set files = global.files %}
+        {% set config = global.grav.config %}
+        {% set route = global.context.route() %}
+        {% set type =  global.context.content() is not null ? 'pages' : global.plugin ? 'plugins' : global.theme ? 'themes' : 'config' %}
+        {% set blueprint_name = global.blueprints.getFilename %}
+        {% if type == 'pages' %}
+            {% set blueprint_name = type ~ '/' ~ blueprint_name %}
+        {% endif %}
+        {% set blueprint = blueprint_name|base64_encode %}
+        {% set real_path = value.thumb ?? global.context.media[path].relativePath ?? global.form.getPagePathFromToken(path) %}
+        {% set remove = global.form.getFileDeleteAjaxRoute(files.name, path)|string ?: uri.addNonce(
+            global.base_url_relative ~
+            '/media.json' ~
+            '/task' ~ config.system.param_sep ~ 'removeFileFromBlueprint' ~
+            '/proute' ~ config.system.param_sep ~ route|base64_encode ~
+            '/blueprint' ~ config.system.param_sep ~ blueprint ~
+            '/type' ~ config.system.param_sep ~ type ~
+            '/field' ~ config.system.param_sep ~ files.name ~
+            '/path' ~ config.system.param_sep ~ value.path|base64_encode, 'admin-form', 'admin-nonce') %}
+
+        {% set file = value|merge({remove: remove, path: value.thumb_url ?? (uri.rootUrl == '/' ? '/' : uri.rootUrl ~ '/' ~ real_path) }) %}
+        <div class="hidden" data-file="{{ file|json_encode|e('html_attr') }}"></div>
+    {% endif %}
+{% endmacro %}
+
+{% import _self as macro %}
+
+{% set defaults = config.plugins.form %}
+{% set files = defaults.files|merge(field|default([])) %}
+{% set limit = not field.multiple ? 1 : files.limit %}
+
+{% do config.set('forms.dropzone.enabled', true) %}
+
+{% block input %}
+    {% set page_can_upload = exists or (type == 'page' and not exists and not (field.destination starts with '@self' or field.destination starts with 'self@')) %}
+    {% set max_filesize = (field.filesize > form_max_filesize or field.filesize == 0) ? form_max_filesize : field.filesize %}
+
+    {% block prepend %}{% endblock %}
+    {% set settings = {name: field.name, paramName: (scope ~ field.name)|fieldName ~ (files.multiple ? '[]' : ''), limit: limit, filesize: max_filesize, accept: files.accept, resolution: files.resolution, resizeWidth: files.resizeWidth, resizeHeight: files.resizeHeight, resizeQuality: files.resizeQuality } %}
+    {% set dropzoneSettings = field.dropzone %}
+    {% set file_url_add = form.getFileUploadAjaxRoute() %}
+    {% set file_url_remove = form.getFileDeleteAjaxRoute(null, null) %}
+    <div class="{{ form_field_wrapper_classes ?: 'form-input-wrapper' }} {{ field.classes }} dropzone files-upload form-input-file {{ field.size }}"
+         data-grav-file-settings="{{ settings|json_encode|e('html_attr') }}"
+         data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"
+         {% if file_url_add %}data-file-url-add="{{ file_url_add|e('html_attr') }}"{% endif %}
+         {% if file_url_remove %}data-file-url-remove="{{ file_url_remove|e('html_attr') }}"{% endif %}>
+        {% block file_extras %}{% endblock %}
+        <input
+                {# required attribute structures #}
+                {% block input_attributes %}
+                    type="file"
+                    {% if files.multiple %}multiple="multiple"{% endif %}
+                    {% if files.accept %}accept="{{ files.accept|join(',') }}"{% endif %}
+                    {% if field.disabled %}disabled="disabled"{% endif %}
+                    {% if field.random_name %}random="true"{% endif %}
+                    {% if required %}required="required"{% endif %}
+                    {{ parent() }}
+                {% endblock %}
+        />
+
+        {% for path, file in value %}
+            {{ macro.preview(path, file, _context) }}
+        {% endfor %}
+        {% include 'forms/fields/hidden/hidden.html.twig' with {field: {name: '_json.' ~ field.name}, value: (value ?? [])|json_encode } %}
+    </div>
+
+    {% if grav.browser.browser == 'msie' and grav.browser.version < 12 %}
+        {% do assets.addJs('plugin://form/assets/object.assign.polyfill.js') %}
+    {% endif %}
+    {% do assets.addJs('jquery', 101) %}
+    {% do assets.addJs('plugin://form/assets/form.vendor.js', { 'group': 'bottom', 'loading': 'defer' }) %}
+    {% do assets.addJs('plugin://form/assets/form.min.js', { 'group': 'bottom', 'loading': 'defer'  }) %}
+    {% do assets.addCss('plugin://form/assets/dropzone.min.css', { 'group': 'form'}) %}
+    {{ assets.css('form')|raw }}
+    {% do assets.addInlineJs("
+    window.GravForm = window.GravForm || {};
+    window.GravForm = Object.assign({}, window.GravForm, {
+        translations: {
+            PLUGIN_FORM: {
+                'DROPZONE_CANCEL_UPLOAD': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD'|t|json_encode ~ ",
+                'DROPZONE_CANCEL_UPLOAD_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_CANCEL_UPLOAD_CONFIRMATION'|t|json_encode ~ ",
+                'DROPZONE_DEFAULT_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_DEFAULT_MESSAGE'|t|json_encode ~ ",
+                'DROPZONE_FALLBACK_MESSAGE': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_MESSAGE'|t|json_encode ~ ",
+                'DROPZONE_FALLBACK_TEXT': " ~ 'PLUGIN_FORM.DROPZONE_FALLBACK_TEXT'|t|json_encode ~ ",
+                'DROPZONE_FILE_TOO_BIG': " ~ 'PLUGIN_FORM.DROPZONE_FILE_TOO_BIG'|t|json_encode ~ ",
+                'DROPZONE_INVALID_FILE_TYPE': " ~ 'PLUGIN_FORM.DROPZONE_INVALID_FILE_TYPE'|t|json_encode ~ ",
+                'DROPZONE_MAX_FILES_EXCEEDED': " ~ 'PLUGIN_FORM.DROPZONE_MAX_FILES_EXCEEDED'|t|json_encode ~ ",
+                'DROPZONE_REMOVE_FILE': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE'|t|json_encode ~ ",
+                'DROPZONE_REMOVE_FILE_CONFIRMATION': " ~ 'PLUGIN_FORM.DROPZONE_REMOVE_FILE_CONFIRMATION'|t|json_encode ~ ",
+                'DROPZONE_RESPONSE_ERROR': " ~ 'PLUGIN_FORM.DROPZONE_RESPONSE_ERROR'|t|json_encode ~ ",
+                'RESOLUTION_MIN': " ~ 'PLUGIN_FORM.RESOLUTION_MIN'|t|json_encode ~ ",
+                'RESOLUTION_MAX': " ~ 'PLUGIN_FORM.RESOLUTION_MAX'|t|json_encode ~ "
+            }
+        }
+    });
+    ", {'group': 'bottom', 'position': 'before'}) %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/formname/formname.html.twig
+++ b/user/plugins/form/templates/forms/fields/formname/formname.html.twig
@@ -0,0 +1,5 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+<input type="hidden" name="__form-name__" value="{{ form.name }}" />
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/formtask/formtask.html.twig
+++ b/user/plugins/form/templates/forms/fields/formtask/formtask.html.twig
@@ -0,0 +1,8 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+    {% if form.task %}
+        <input type="hidden" name="task" value="{{ form.task }}" />
+    {% endif %}
+{% endblock %}
+
--- a/user/plugins/form/templates/forms/fields/hidden/hidden.html.twig
+++ b/user/plugins/form/templates/forms/fields/hidden/hidden.html.twig
@@ -0,0 +1,15 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+
+{#  Used if the field is being used directly outside of form #}
+{% set value = value ?? field.value ?? (field.evaluate ? evaluate(field.default) : field.default) %}
+
+{# Evaluate support for the form #}
+{% if not has_value and value and field.evaluate %}
+    {% set value = evaluate(value) %}
+{% endif %}
+{% set input_value = value is iterable ? value|join(',') : value|string %}
+
+<input data-grav-field="hidden" data-grav-disabled="false" {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}type="hidden" class="input" name="{{ (scope ~ field.name)|fieldName }}" value="{{ input_value|e('html_attr') }}" />
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/honeypot/honeypot.html.twig
+++ b/user/plugins/form/templates/forms/fields/honeypot/honeypot.html.twig
@@ -0,0 +1,13 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+{% set input_value = value is iterable ? value|join(',') : value|string %}
+<input aria-hidden="true"
+       type="text"
+       {% if config.plugins.form.inline_css == true %}
+       style="visibility:hidden;position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);"
+       {% endif %}
+       class="form-honeybear"
+       name="{{ (scope ~ field.name)|fieldName }}"
+       value="{{ input_value|e }}" />
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/ignore/ignore.html.twig
+++ b/user/plugins/form/templates/forms/fields/ignore/ignore.html.twig
--- a/user/plugins/form/templates/forms/fields/key/key.html.twig
+++ b/user/plugins/form/templates/forms/fields/key/key.html.twig
@@ -0,0 +1,28 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input %}
+    <div class="form-input-wrapper {{ field.size }}">
+        {% set input_value = value is iterable ? value|join(',') : value|string %}
+        <input
+                type="text"
+                value="{{ input_value|e }}"
+                data-key-observe="{{ (scope ~ field.name)|fieldName }}"
+                {% block input_attributes %}
+                    {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
+                    {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
+                    {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
+                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                    {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
+                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
+                    {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
+                    {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
+                    {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+                    {% if field.validate.message %}title="{{ field.validate.message|e|t }}"
+                    {% elseif field.title is defined %}title="{{ field.title|e|t }}" {% endif %}
+                {% endblock %}
+        />
+    </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/month/month.html.twig
+++ b/user/plugins/form/templates/forms/fields/month/month.html.twig
@@ -0,0 +1,6 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="month"
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/nonce/nonce.html.twig
+++ b/user/plugins/form/templates/forms/fields/nonce/nonce.html.twig
@@ -0,0 +1 @@
+{{ nonce_field(form.getNonceAction() ?? 'form', form.getNonceName() ?? 'form-nonce')|raw }}
--- a/user/plugins/form/templates/forms/fields/number/number.html.twig
+++ b/user/plugins/form/templates/forms/fields/number/number.html.twig
@@ -0,0 +1,9 @@
+{% extends "forms/fields/text/text.html.twig" %}
+
+{% block input_attributes %}
+    type="number"
+    {% if field.validate.min is defined %}min="{{ field.validate.min }}"{% endif %}
+    {% if field.validate.max is defined %}max="{{ field.validate.max }}"{% endif %}
+    {% if field.validate.step is defined %}step="{{ field.validate.step }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/password/password.html.twig
+++ b/user/plugins/form/templates/forms/fields/password/password.html.twig
@@ -0,0 +1,8 @@
+{% extends "forms/field.html.twig" %}
+
+{% set value = null %}
+
+{% block input_attributes %}
+    type="password"
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/radio/radio.html.twig
+++ b/user/plugins/form/templates/forms/fields/radio/radio.html.twig
@@ -0,0 +1,21 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input %}
+    {% for key, text in field.options %}
+        {% set id = field.id|default(field.name) ~ '-' ~ key %}
+
+        <div class="radio {{ form_field_wrapper_classes }} {{ field.wrapper_classes }}">
+            <input type="radio"
+                   value="{{ key|e }}"
+                   id="{{ id|e }}"
+                   name="{{ (scope ~ field.name)|fieldName }}"
+                   class="{{ form_field_radio_classes }} {{ field.classes }}"
+                   {% if key == value %}checked="checked" {% endif %}
+                   {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                   {% if required %}required="required"{% endif %}
+                   {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+            />
+            <label style="display: inline" class="inline" for="{{ id|e }}">{{ text|t|raw }}</label>
+        </div>
+    {% endfor %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/range/range.html.twig
+++ b/user/plugins/form/templates/forms/fields/range/range.html.twig
@@ -0,0 +1,9 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="range"
+    {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
+    {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
+    {% if field.validate.step %}step="{{ field.validate.step }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/section/section.html.twig
+++ b/user/plugins/form/templates/forms/fields/section/section.html.twig
@@ -0,0 +1,21 @@
+{% extends "forms/field.html.twig" %}
+{% set title_level = grav['admin'] is defined ? 'h1' : field.title_level|default('h3') %}
+
+{% block field %}
+{% if field.security is empty or authorize(array(field.security)) %}
+<div class="{{ field.classes }}">
+    {% if field.title or field.underline %}
+    <{{ title_level }} class="{% if not field.underline %}no_underline{% endif %}">{{ field.title|t }}</{{ title_level }}>
+    {% endif %}
+
+    {% if field.text %}
+    <p>{{ field.text|t|raw }}</p>
+    {% endif %}
+
+  {% embed 'forms/default/fields.html.twig' with {name: field.name, fields: field.fields} %}
+    {% block outer_markup_field_open %}<div class="form-section">{% endblock %}
+    {% block outer_markup_field_close %}</div>{% endblock %}
+  {% endembed %}
+</div>
+{% endif %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/select/select.html.twig
+++ b/user/plugins/form/templates/forms/fields/select/select.html.twig
@@ -0,0 +1,78 @@
+{% extends "forms/field.html.twig" %}
+
+{% block global_attributes %}
+    data-grav-selectize="{{ (field.selectize is defined ? field.selectize : {})|json_encode()|e('html_attr') }}"
+    {{ parent() }}
+{% endblock %}
+
+{% block input %}
+    <div class="{{ form_field_wrapper_classes ?: 'form-select-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
+        <select name="{{ (scope ~ field.name)|fieldName ~ (field.multiple ? '[]' : '') }}"
+                class="{{ form_field_select_classes }} {{ field.classes }} {{ field.size }}"
+                {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
+                {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
+                {% if field.disabled %}disabled="disabled"{% endif %}
+                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                {% if required %}required="required"{% endif %}
+                {% if field.multiple in ['on', 'true', 1] %}multiple="multiple"{% endif %}
+                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+                {% if field.form %}form="{{ field.form }}"{% endif %}
+                {% if field.autocomplete is defined %}autocomplete="{{ field.autocomplete }}"{% endif %}
+                {% if field.key %}
+                    data-key-observe="{{ (scope ~ field.name)|fieldName }}"
+                {% endif %}
+                {% if field.datasets %}
+                    {% for datakey, datavalue in field.datasets %}
+                        data-{{ datakey }}="{{ datavalue|e('html_attr') }}"
+                    {% endfor %}
+                {% endif %}
+                {% if field.attributes %}
+                    {% for key, value in field.attributes %}
+                        {{ key }}="{{ value|e('html_attr') }}"
+                    {% endfor %}
+                {% endif %}
+                >
+            {% if field.placeholder %}<option value="" disabled selected>{{ field.placeholder|t|raw }}</option>{% endif %}
+
+            {% set options = field.options %}
+            {% if field.selectize.create and value %}
+              {% set custom_value = field.multiple ? value : { (value): value } %}
+              {% set options = options|merge(custom_value|default([]))|array_unique %}
+            {% endif %}
+
+            {% set value = value is iterable ? value : value|string %}
+            {% for key, item_value in options %}
+                {% if item_value is iterable and item_value.value %}
+                    {% set akey = field.selectize and field.multiple ? item_value : key %}
+                    {% set avalue = item_value.value|t %}
+                    <option {{ item_value.disabled ? 'disabled="disabled"' : '' }}
+                        {{ item_value.selected or key == value ? 'selected="selected"' : '' }}
+                        {{ item_value.label    ? 'label=' ~ item_value.label : '' }}
+                        value="{{ akey }}"
+                    >
+                        {{ avalue|raw }}
+                    </option>
+                {% elseif item_value is iterable %}
+                    {% set optgroup_label = item_value|keys|first %}
+                    <optgroup label="{{ optgroup_label|t|e('html_attr') }}">
+                      {% for subkey, suboption in field.options[key][optgroup_label] %}
+                          {% set subkey = subkey|string %}
+                          {% set item_value = (field.selectize and field.multiple ? suboption : subkey)|string %}
+                          {% set selected = (field.selectize ? suboption : subkey)|string %}
+                          <option {% if subkey is same as (value) or (field.multiple and selected in value) %}selected="selected"{% endif %} value="{{ subkey }}">
+                            {{ suboption|t|raw }}
+                          </option>
+                      {% endfor %}
+                    </optgroup>
+                {% else %}
+                    {% set val = (field.selectize and field.multiple ? item_value : key)|string %}
+                    {% set selected = (field.selectize ? item_value : key)|string %}
+                    <option {% if val is same as (value) or (field.multiple and selected in value) %}selected="selected"{% endif %} value="{{ val }}">{{ item_value|t|raw }}</option>
+                {% endif %}
+            {% endfor %}
+
+        </select>
+    </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/select_optgroup/select_optgroup.html.twig
+++ b/user/plugins/form/templates/forms/fields/select_optgroup/select_optgroup.html.twig
@@ -0,0 +1,2 @@
+{# Deprecated Form 4.0: Just use `select` field #}
+{% extends "forms/fields/select/select.html.twig" %}
--- a/user/plugins/form/templates/forms/fields/signature/signature.html.twig
+++ b/user/plugins/form/templates/forms/fields/signature/signature.html.twig
@@ -0,0 +1,105 @@
+{% extends "forms/field.html.twig" %}
+
+{% block prepend %}
+    <div id="signature-pad" class="signature-pad">
+        <div class="signature-pad--body">
+            <canvas></canvas>
+        </div>
+        <div class="signature-pad--footer">
+            <div class="description">Sign above</div>
+
+            <div class="signature-pad--actions">
+                <div>
+                    <button type="button" class="btn btn-primary-border" data-action="clear">Clear Signature</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="{{ url('plugin://form/assets/signature_pad.js') }}"></script>
+    <script>
+
+        var wrapper = document.getElementById("signature-pad");
+        var clearButton = wrapper.querySelector("[data-action=clear]");
+
+        var canvas = wrapper.querySelector("canvas");
+        var signaturePad = new SignaturePad(canvas, {
+            // It's Necessary to use an opaque color when saving image as JPEG;
+            // this option can be omitted if only saving as PNG or SVG
+            backgroundColor: 'rgb(255, 255, 255)',
+            onEnd: function() {
+                var input = document.querySelector('[name="data[{{ field.name }}]"]');
+                input.value = this.toDataURL();
+            }
+        });
+
+        // Adjust canvas coordinate space taking into account pixel ratio,
+        // to make it look crisp on mobile devices.
+        // This also causes canvas to be cleared.
+        function resizeCanvas() {
+            // When zoomed out to less than 100%, for some very strange reason,
+            // some browsers report devicePixelRatio as less than 1
+            // and only part of the canvas is cleared then.
+            var ratio =  Math.max(window.devicePixelRatio || 1, 1);
+
+            // This part causes the canvas to be cleared
+            canvas.width = canvas.offsetWidth * ratio;
+            canvas.height = canvas.offsetHeight * ratio;
+            canvas.getContext("2d").scale(ratio, ratio);
+
+            // This library does not listen for canvas changes, so after the canvas is automatically
+            // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
+            // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
+            // that the state of this library is consistent with visual state of the canvas, you
+            // have to clear it manually.
+            signaturePad.clear();
+        }
+
+        // On mobile devices it might make more sense to listen to orientation change,
+        // rather than window resize events.
+        window.onresize = resizeCanvas;
+        resizeCanvas();
+
+        function download(dataURL, filename) {
+            var blob = dataURLToBlob(dataURL);
+            var url = window.URL.createObjectURL(blob);
+
+            var a = document.createElement("a");
+            a.style = "display: none";
+            a.href = url;
+            a.download = filename;
+
+            document.body.appendChild(a);
+            a.click();
+
+            window.URL.revokeObjectURL(url);
+        }
+
+        // One could simply use Canvas#toBlob method instead, but it's just to show
+        // that it can be done using result of SignaturePad#toDataURL.
+        function dataURLToBlob(dataURL) {
+            // Code taken from https://github.com/ebidel/filer.js
+            var parts = dataURL.split(';base64,');
+            var contentType = parts[0].split(":")[1];
+            var raw = window.atob(parts[1]);
+            var rawLength = raw.length;
+            var uInt8Array = new Uint8Array(rawLength);
+
+            for (var i = 0; i < rawLength; ++i) {
+                uInt8Array[i] = raw.charCodeAt(i);
+            }
+
+            return new Blob([uInt8Array], { type: contentType });
+        }
+
+        clearButton.addEventListener("click", function (event) {
+            signaturePad.clear();
+        });
+
+    </script>
+{% endblock prepend %}
+
+{% block input_attributes %}
+    type="hidden"
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/spacer/spacer.html.twig
+++ b/user/plugins/form/templates/forms/fields/spacer/spacer.html.twig
@@ -0,0 +1,19 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+<div class="form-spacer {{ field.classes }}">
+    {% if field.title %}
+        <h3>{{- field.title|t|raw -}}</h3>
+    {% endif %}
+
+    {% if field.markdown %}
+        <p>{{- field.text|t|markdown|raw -}}</p>
+    {% else %}
+        <p>{{- field.text|t|raw -}}</p>
+    {% endif %}
+
+    {% if field.underline %}
+    <hr />
+    {% endif %}
+</div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/switch/switch.html.twig
+++ b/user/plugins/form/templates/forms/fields/switch/switch.html.twig
@@ -0,0 +1 @@
+{% extends 'forms/fields/checkbox/checkbox.html.twig' %}
--- a/user/plugins/form/templates/forms/fields/tab/tab.html.twig
+++ b/user/plugins/form/templates/forms/fields/tab/tab.html.twig
@@ -0,0 +1,8 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+  {% embed 'forms/default/fields.html.twig' with {name: field.name, fields: field.fields} %}
+    {% block outer_markup_field_open %}<div class="form-tab">{% endblock %}
+    {% block outer_markup_field_close %}</div>{% endblock %}
+  {% endembed %}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/tabs/tabs.html.twig
+++ b/user/plugins/form/templates/forms/fields/tabs/tabs.html.twig
@@ -0,0 +1,60 @@
+{% extends "forms/field.html.twig" %}
+
+{% if not grav.admin %}
+{% do assets.addJs('plugin://form/assets/form.vendor.js', { 'group': 'bottom', 'loading': 'defer' }) %}
+{% do assets.addJs('plugin://form/assets/form.min.js', { 'group': 'bottom', 'loading': 'defer' }) %}
+{% endif %}
+
+{% block field %}
+<div class="form-tabs {{ field.class }} {{ field.classes }}">
+
+  {% set fields = prepare_form_fields(field.fields, field.name) %}
+  {% if fields|length %}
+    {% set tabs = {} %}
+    {% for tab in fields %}
+        {% if tab.type == 'tab' and not tab.validate.ignore and (tab.security is empty or authorize(array(tab.security))) %}
+        {% set tabs = tabs|merge([tab]) %}
+        {% endif %}
+    {% endfor %}
+    {% set count = tabs|length %}
+
+    {% if count == 0 %}
+        {# Nothing to display #}
+    {% elseif count == 1 and not admin %}
+        {% set fields = (tabs|first).fields %}
+        {% for field in fields %}
+            {% set value = field.name ? (form ? form.value(field.name) : data.value(field.name)) : data.toArray %}
+            {% set field_templates = include_form_field(field.type, field_layout, 'text') %}
+            {% include field_templates %}
+        {% endfor %}
+    {% else %}
+        {% set tabsKey = form.name ~ '-' ~ fields|keys|join(':')|md5 %}
+        {% set storedValue = grav.admin ? get_cookie('grav-tabs-state')|default('{}')|json_decode : [] %}
+        {% set storedTab = attribute(storedValue, 'tab-' ~ tabsKey) %}
+        {% if storedTab is empty %}
+            {% set active = uri.params.tab ?? field.active ?? 1 %}
+        {% endif %}
+
+        <div class="tabs-nav">
+            {% for tab in tabs %}
+                {% if tab.type == 'tab' and (tab.condition is null or tab.condition == true) %}
+                <a class="tab__link {{ (storedTab == scope ~ tab.name) or active == loop.index ? 'active' : '' }}" data-tabid="tab-{{ tabsKey ~ loop.index }}" data-tabkey="tab-{{ tabsKey }}" data-scope="{{ scope ~ tab.name }}">
+                <span>{{ tab.title|t }}</span>
+                {% endif %}
+            </a>
+        {% endfor %}
+        </div>
+        <div class="tabs-content">
+            {% embed 'forms/default/fields.html.twig' with {name: field.name, fields: fields} %}
+                {% block inner_markup_field_open %}
+                    <div id="tab-{{ tabsKey ~ loop.index }}" class="tab__content {{ (storedTab == scope ~ field.name) or active == loop.index ? 'active' : '' }}">
+                {% endblock %}
+                {% block inner_markup_field_close %}
+                    </div>
+                {% endblock %}
+            {% endembed %}
+        </div>
+    {% endif %}
+{% endif %}
+</div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/tel/tel.html.twig
+++ b/user/plugins/form/templates/forms/fields/tel/tel.html.twig
@@ -0,0 +1,9 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="tel"
+    {% if field.size %}size="{{ field.size }}"{% endif %}
+    {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
+    {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/text/edit_list.html.twig
+++ b/user/plugins/form/templates/forms/fields/text/edit_list.html.twig
@@ -0,0 +1,7 @@
+{% set value = iterable ? value|join(', ') : value|string %}
+
+{% if link -%}
+    <a href="{{ link|e }}">{{ value|e }}</a>
+{%- else -%}
+    {{ value|e }}
+{%- endif %}
--- a/user/plugins/form/templates/forms/fields/text/text.html.twig
+++ b/user/plugins/form/templates/forms/fields/text/text.html.twig
@@ -0,0 +1,39 @@
+{% if field.prepend or field.append or field.copy_to_clipboard %}
+    {% set field = field|merge({'wrapper_classes': 'form-input-addon-wrapper'}) %}
+{% endif %}
+
+{% extends "forms/field.html.twig" %}
+
+{% block prepend %}
+{% if field.prepend %}
+    <div class="form-input-addon form-input-prepend">
+        {{- field.prepend|t|raw -}}
+    </div>
+{% endif %}
+{% endblock %}
+
+{% block input_attributes %}
+    type="text"
+    {% if field.size %}size="{{ field.size }}"{% endif %}
+    {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
+    {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
+
+{% block append %}
+    {% if field.copy_to_clipboard %}
+        <div class="form-input-addon form-input-append copy-to-clipboard">
+            {% if field.copy_to_clipboard in ['0', '1'] %}
+                <i class="fa fa-clipboard"></i>
+            {% else %}
+                {{- field.copy_to_clipboard|t|raw -}}
+            {% endif %}
+        </div>
+    {% elseif field.append %}
+        <div class="form-input-addon form-input-append">
+            {{- field.append|t|raw -}}
+        </div>
+    {% endif %}
+{% endblock %}
+
+
--- a/user/plugins/form/templates/forms/fields/textarea/textarea.html.twig
+++ b/user/plugins/form/templates/forms/fields/textarea/textarea.html.twig
@@ -0,0 +1,51 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input %}
+    <div class="{{ form_field_wrapper_classes ?: 'form-textarea-wrapper' }} {{ field.size }} {{ field.wrapper_classes }}">
+        {% block prepend %}{% endblock prepend %}
+        <textarea
+            {# required attribute structures #}
+            name="{{ (scope ~ field.name)|fieldName }}"
+            {# input attribute structures #}
+            {% block input_attributes %}
+                class="{{ form_field_textarea_classes }} {{ field.classes }} {{ field.size }}"
+                {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
+                {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
+                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                {% if field.placeholder %}placeholder="{{ field.placeholder|t }}"{% endif %}
+                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
+                {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
+                {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+                {% if required %}required="required"{% endif %}
+                {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+                {% if field.validate.message %}title="{{ field.validate.message|t|e }}"{% endif %}
+                {% if field.rows is defined %}rows="{{ field.rows }}"{% endif %}
+                {% if field.cols is defined %}cols="{{ field.cols }}"{% endif %}
+                {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
+                {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
+                {% if field.datasets %}
+                    {% for datakey, datavalue in field.datasets %}
+                        data-{{ datakey }}="{{ datavalue|e('html_attr') }}"
+                    {% endfor %}
+                {% endif %}
+                {% if field.attributes is defined %}
+                  {% for key,attribute in field.attributes %}
+                    {% if attribute|of_type('array') %}
+                      {{ attribute.name }}="{{ attribute.value|e('html_attr') }}"
+                    {% else %}
+                      {{ key }}="{{ attribute|e('html_attr') }}"
+                    {% endif %}
+                  {% endfor %}
+                {% endif %}
+            {% endblock %}
+            >{{ value|trim|e('html') }}</textarea>
+            {% block append %}{% endblock append %}
+            {% if inline_errors and errors %}
+                <div class="{{ form_errors_classes ?: 'form-errors' }}">
+                    <p class="form-message"><i class="fa fa-exclamation-circle"></i> {{ errors|first }}</p>
+                </div>
+            {% endif %}
+    </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/time/edit_list.html.twig
+++ b/user/plugins/form/templates/forms/fields/time/edit_list.html.twig
@@ -0,0 +1 @@
+{{ value ? value|date('g:i A')|e }}
--- a/user/plugins/form/templates/forms/fields/time/time.html.twig
+++ b/user/plugins/form/templates/forms/fields/time/time.html.twig
@@ -0,0 +1,6 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="time"
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/toggle/edit_list.html.twig
+++ b/user/plugins/form/templates/forms/fields/toggle/edit_list.html.twig
@@ -0,0 +1,5 @@
+{%- if value -%}
+    <span><i class="published fa fa-check-circle"></i></span>
+{%- else -%}
+    <span><i class="unpublished fa fa-times-circle"></i></span>
+{%- endif -%}
--- a/user/plugins/form/templates/forms/fields/toggle/toggle.html.twig
+++ b/user/plugins/form/templates/forms/fields/toggle/toggle.html.twig
@@ -0,0 +1,52 @@
+{% extends "forms/field.html.twig" %}
+
+{% macro spanToggle(input, length) %}
+  {% set space = repeat('&nbsp;&nbsp;', (length - input|length) / 2) %}
+  {{ (space ~ input ~ space)|raw }}
+{% endmacro %}
+
+{% import _self as macro %}
+
+{% set has_hidden = false %}
+{% for key, text in field.options %}
+  {% if key is empty %}
+    {% set has_hidden = true %}
+  {% endif %}
+{% endfor %}
+
+{% block global_attributes %}
+  {{ parent() }}
+  data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
+{% endblock %}
+
+{% block input %}
+  <div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }} {{ field.classes }}">
+    {% set maxLen = 0 %}
+    {% for text in field.options %}
+      {% set translation = text|t|trim %}
+      {% set maxLen = max(translation|length, maxLen) %}
+    {% endfor %}
+
+    {# Value falls back to highlight instead of default #}
+    {% set highlight = field.highlight|string %}
+    {% set value = (value ?? default ?? highlight)|string %}
+
+    {% for key, text in field.options %}
+      {% set key = key|string %}
+      {% set id = (field.id ?? ("toggle_" ~ field.name)) ~ key %}
+      {% set translation = text|t|trim %}
+
+      <input type="radio"
+             value="{{ key }}"
+             id="{{ id }}"
+             name="{{ (scope ~ field.name)|fieldName }}"
+             {% if highlight is same as(key) %}class="highlight"{% endif %}
+             {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+             {% if key is same as(value) %}checked="checked"{% endif %}
+             {% if required %}required="required"{% endif %}
+             {% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
+      />
+      <label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
+    {% endfor %}
+  </div>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/uniqueid/uniqueid.html.twig
+++ b/user/plugins/form/templates/forms/fields/uniqueid/uniqueid.html.twig
@@ -0,0 +1,5 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+<input type="hidden" name="__unique_form_id__" value="{{ form.uniqueid() ?? random_string(20) }}" />
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/url/edit_list.html.twig
+++ b/user/plugins/form/templates/forms/fields/url/edit_list.html.twig
@@ -0,0 +1 @@
+<a href="{{ url(value) }}" target="_blank"><i class="fa fa-link"></i> {{ value|e }}</a>
--- a/user/plugins/form/templates/forms/fields/url/url.html.twig
+++ b/user/plugins/form/templates/forms/fields/url/url.html.twig
@@ -0,0 +1,9 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="url"
+    {% if field.size %}size="{{ field.size }}"{% endif %}
+    {% if field.minlength is defined or field.validate.min is defined %}minlength="{{ field.minlength | default(field.validate.min) }}"{% endif %}
+    {% if field.maxlength is defined or field.validate.max is defined %}maxlength="{{ field.maxlength | default(field.validate.max) }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/value/value.html.twig
+++ b/user/plugins/form/templates/forms/fields/value/value.html.twig
@@ -0,0 +1,18 @@
+{% extends "forms/field.html.twig" %}
+
+{% if field.options %}
+  {% set value = field.options[value] ?: value %}
+{% endif %}
+
+{% block input %}
+  <span class="field-value">
+    {% switch field.filter %}
+      {% case 'date' %}
+         {{ value|date }}
+      {% case 'raw' %}
+         {{ value|raw }}
+      {% default %}
+         {{ value }}
+    {% endswitch %}
+  </span>
+{% endblock %}
--- a/user/plugins/form/templates/forms/fields/week/week.html.twig
+++ b/user/plugins/form/templates/forms/fields/week/week.html.twig
@@ -0,0 +1,6 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="week"
+    {{ parent() }}
+{% endblock %}
				`@@ -0,0 +1 @@`
				`{{ value ? value\|date('m/d/Y \\a\\t g:i A')\|e }}`
				`@@ -0,0 +1 @@`
				`{{ nonce_field(form.getNonceAction() ?? 'form', form.getNonceName() ?? 'form-nonce')\|raw }}`
				`@@ -0,0 +1 @@`
				`{% extends 'forms/fields/checkbox/checkbox.html.twig' %}`
				`@@ -0,0 +1 @@`
				`<a href="{{ url(value) }}" target="_blank"><i class="fa fa-link"></i> {{ value\|e }}</a>`