Fixed: Custom freeform template to use components

madebyshape · Sep 16, 2020 · 845cd84 · 845cd84
1 parent 964fa34
commit 845cd84
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 40 deletions.
diff --git a/templates/_components/field/input.twig b/templates/_components/field/input.twig
@@ -3,6 +3,7 @@
    Outputs a input field with the correct markup
 
    @type {include}
+   @param {integer} id
    @param {string} label
    @param {string} type
    @param {string} name
@@ -13,7 +14,7 @@
    @param {bool} required
 #}
 
-{% set id = label is defined ? label|kebab : 'input-' ~ random(100,999) %}
+{% set id = id ?? (label is defined ? label|kebab : 'input-' ~ random(100,999)) %}
 
 {% if label is defined %}
    {% include '_components/field/label' %}
@@ -52,5 +53,5 @@
    {{ placeholder is defined ? ('placeholder="' ~ placeholder ~ '"')|raw }}
    {{ value is defined ? ('value="' ~ value ~ '"')|raw }}
    {{ attributes is defined ? attributes|raw }}
-   {{ required is defined ? 'required' }}
+   {{ required is defined and required ? 'required' }}
 >
diff --git a/templates/_components/field/label.twig b/templates/_components/field/label.twig
@@ -15,7 +15,7 @@
 
 <label for="{{ id }}" class="{{ class }}">
    {{ label }}
-   {% if required is defined %}
+   {% if required is defined and required %}
       <span class="text-primary-500 ml-px">*</span>
    {% endif %}
 </label>
diff --git a/templates/_components/field/select.twig b/templates/_components/field/select.twig
@@ -3,6 +3,7 @@
    Outputs a select field with the correct markup
 
    @type {include}
+   @param {integer} id
    @param {string} label
    @param {string} name
    @param {string} value
@@ -13,7 +14,7 @@
    @param {bool} required
 #}
 
-{% set id = label is defined ? label|kebab : 'select-' ~ random(100,999) %}
+{% set id = id ?? (label is defined ? label|kebab : 'select-' ~ random(100,999)) %}
 
 {% if label is defined %}
    {% include '_components/field/label' %}
@@ -48,8 +49,8 @@
       id="{{ id }}" 
       class="{{ class }}"
       {{ attributes is defined ? attributes|raw }}
-      {{ required is defined ? 'required' }}
-      {{ multiple is defined ? 'multiple' }}
+      {{ required is defined and required ? 'required' }}
+      {{ multiple is defined and multiple ? 'multiple' }}
    >
       {% for option in options %}
          {% if placeholder is defined %}

diff --git a/templates/_components/field/textarea.twig b/templates/_components/field/textarea.twig
@@ -3,6 +3,7 @@
    Outputs a textarea field with the correct markup
 
    @type {include}
+   @param {integer} id
    @param {string} label
    @param {string} type
    @param {string} name
@@ -13,7 +14,7 @@
    @param {bool} required
 #}
 
-{% set id = label is defined ? label|kebab : 'textarea-' ~ random(100,999) %}
+{% set id = id ?? (label is defined ? label|kebab : 'textarea-' ~ random(100,999)) %}
 
 {% if label is defined %}
    {% include '_components/field/label' %}
@@ -33,6 +34,7 @@
    rounded
    shadow
    leading-tight
+   min-h-32
    placeholder-gray-500
    placeholder-opacity-100
    hover:border-gray-500
@@ -51,5 +53,5 @@
    class="{{ class }}"
    {{ placeholder is defined ? ('placeholder="' ~ placeholder ~ '"')|raw }}
    {{ attributes is defined ? attributes|raw }}
-   {{ required is defined ? 'required' }}
+   {{ required is defined and required ? 'required' }}
 >{% spaceless %}{{ value is defined ? value }}{% endspaceless %}</textarea>
diff --git a/templates/_plugins/freeform/custom.twig b/templates/_plugins/freeform/custom.twig
@@ -1,20 +1,16 @@
-{% set fieldClass = 'form__field' %}
-{% set labelClass = 'form__label' %}
-{% set labelRequiredClass = ' form__label--required' %}
-
 {% set labelHidden = ['submit', 'html'] %}
 {% set labelAfter = ['checkbox'] %}
 
 {% if form.submittedSuccessfully %}
-   <div class="form__notification">
+   <div class="w-full bg-primary-100 text-primary-500 p-4 rounded text-sm">
       Thank you for submitting your details, we will be in touch shortly.
    </div>
 {% endif %}
 
 {{ form.renderTag }}
 
    {% if form.pages|length > 1 %}
-      <nav class="form__pages">
+      <nav>
          <ul>
             {% for page in form.pages %}
                <li>
@@ -33,47 +29,63 @@
       {% set columnLength = row|length %}
       <div class="{{ columnLength > 1 ? ' flex flex-wrap md:flex-no-wrap' }}{{ form.customAttributes.rowClass ? ' ' ~ form.customAttributes.rowClass }}">
          {% for field in row %}
-            <div class="form__field-container form__field--{{ field.type }} {{ columnLength > 1 ? ' w-full md:w-' ~ (12 / columnLength) ~ '/12' }}{{ field.type == 'submit' ? ' text-' ~ field.position }} mb-5"{{ field.rulesHtmlData }}>
+            <div class="px-2 mb-5{{ columnLength > 1 ? ' w-full md:w-' ~ (12 / columnLength) ~ '/12' }}{{ field.type == 'submit' ? ' text-' ~ field.position }}"{{ field.rulesHtmlData }}>
                {# Label - Before #}
                {% if field.type not in labelHidden and field.type not in labelAfter %}
-                  {{ field.renderLabel({
-                     labelClass: labelClass ~ (field.required ? labelRequiredClass),
-                  }) }}
+                  {% include '_components/field/label' with {
+                     id: field.idAttribute,
+                     label: field.label,
+                     required: field.required
+                  } %}
                {% endif %}
-               {% if field.type == "submit" %}
-                  {# Submit #}
-                  <button class="button">
-                     {{ field.label }}
-                  </button>
-               {% elseif field.type == "select" %}
-                  {# Field - Select #}
-                  <div class="form__field-container form__field-container--select">
-                     {{ field.renderInput({
-                        class: fieldClass,
-                        useRequiredAttribute: field.required ? 'true',
-                        inputAttributes: field.required ? { 'aria-required': 'true' }
-                     }) }}
-                  </div>
-               {% elseif field.type == "checkbox" %}
-                  {# Field - Checkbox #}
+               {% if field.type == 'submit' %}
+                  {% include '_components/button/primary' with {
+                     type: 'button',
+                     button: {
+                        text: field.label
+                     }
+                  } %}
+               {% elseif field.type == 'select' %}
+                  {% include '_components/field/select' with {
+                     type: field.type,
+                     name: field.handle,
+                     id: field.idAttribute,
+                     required: field.required,
+                     options: field.options
+                  } %}
+               {% elseif field.type == 'textarea' %}
+                  {% include '_components/field/textarea' with {
+                     type: field.type,
+                     name: field.handle,
+                     id: field.idAttribute,
+                     required: field.required
+                  } %}
+               {% elseif field.type == 'checkbox' %}
                      {{ field.renderInput({
                         class: 'mr-2',
                         useRequiredAttribute: field.required ? 'true',
                         inputAttributes: field.required ? { 'aria-required': 'true' }
                      }) }}
+               {% elseif field.type in ['text', 'email'] %}
+                  {% include '_components/field/input' with {
+                     type: field.type,
+                     name: field.handle,
+                     id: field.idAttribute,
+                     required: field.required
+                  } %}
                {% else %}
-                  {# Field - All #}
                   {{ field.renderInput({
-                     class: fieldClass,
                      useRequiredAttribute: field.required ? 'true',
                      inputAttributes: field.required ? { 'aria-required': 'true' }
                   }) }}
                 {% endif %}
-                {# Label - After #}
                {% if field.type not in labelHidden and field.type in labelAfter %}
-                  {{ field.renderLabel({
-                     labelClass: labelClass ~ (field.required ? labelRequiredClass)
-                  }) }}
+                  {# Label - After #}
+                  {% include '_components/field/label' with {
+                     id: field.idAttribute,
+                     label: field.label,
+                     required: field.required
+                  } %}
                {% endif %}
             </div>
          {% endfor %}