DIA Frontend

Form Elements 

<!-- ### Begin: Element  ### -->
<div id="c903" class="frame frame-default frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
    <div class="frame-container">
        <div class="frame-inner">

            <div class="form-element form-element-type-text form-group">
                <div class="input">
                    <label for="input581">
                        E-Mail: * </label>

                    <input class="form-control" id="input581" placeholder="Placeholder" required="true" type="text" />

                </div>
            </div>

            <div class="form-element form-element-type-text form-group">
                <div class="input">
                    <label for="input887">
                        Name: </label>

                    <input class="form-control" id="input887" placeholder="Placeholder" type="text" />

                </div>
            </div>

            <div class="form-group">
                <label class="d-block">Name:</label>
                <select class="custom-select">
                    <option selected>
                        Open this select menu
                    </option>
                    <option value="1">
                        Option One
                    </option>
                    <option value="2">
                        Option Two
                    </option>
                    <option value="3">
                        Option Three
                    </option>
                </select>
            </div>

            <div class="form-group">
                <label class="d-block">Name:</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkbox1-950">
                    <label class="form-check-label" for="checkbox1-950">
                        Option One
                    </label>
                </div>
                <br>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkbox2-950">
                    <label class="form-check-label" for="checkbox2-950">
                        Option Two
                    </label>
                </div>
                <br>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkbox3-950">
                    <label class="form-check-label" for="checkbox3-950">
                        Option Three
                    </label>
                </div>
                <br>
            </div>

            <div class="form-group">
                <label class="d-block">Name:</label>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkbox1-592">
                    <label class="form-check-label" for="checkbox1-592">
                        Option One
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkbox2-592">
                    <label class="form-check-label" for="checkbox2-592">
                        Option Two
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="checkbox3-592">
                    <label class="form-check-label" for="checkbox3-592">
                        Option Three
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="d-block">Name:</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="group1" value="" id="radio1-932">
                    <label class="form-check-label" for="radio1-932">
                        Option One
                    </label>
                </div>
                <br>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="group1" value="" id="radio2-932">
                    <label class="form-check-label" for="radio2-932">
                        Option Two
                    </label>
                </div>
                <br>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="group1" value="" id="radio3-932">
                    <label class="form-check-label" for="radio3-932">
                        Option Three
                    </label>
                </div>
                <br>
            </div>

            <div class="form-group">
                <label class="d-block">Name:</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="group2" value="" id="radio1-300">
                    <label class="form-check-label" for="radio1-300">
                        Option One
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="group2" value="" id="radio2-300">
                    <label class="form-check-label" for="radio2-300">
                        Option Two
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="group2" value="" id="radio3-300">
                    <label class="form-check-label" for="radio3-300">
                        Option Three
                    </label>
                </div>
            </div>

            <div class="form-group">
                <label class="d-block">Attendee's machine experience:</label>
                <div class="form-check--wrap">
                    <span class="description">Choose appropriate level for attendee</span>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="group3" value="" id="radio1-558">
                        <label class="form-check-label" for="radio1-558">
                            Beginner
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="group3" value="" id="radio2-558">
                        <label class="form-check-label" for="radio2-558">
                            Intermediate
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="group3" value="" id="radio3-558">
                        <label class="form-check-label" for="radio3-558">
                            Advanced
                        </label>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- ### End: Element  ### -->
 
{% extends form ? "@wrapper-frame" : "@wrapper-empty" %}

{% import _self as render %}

{% macro atom(frames) %}
    {% import _self as render %}
    {% if frames %}
        {% if frames.0 is iterable %}
            {% for frame in frames %}
                {{ render.atom(frame) }}
            {% endfor %}
        {% else %}
            {% if frames.context is not empty %}
                {% include "@atom-" ~ frames.type with frames.context %}
            {% else %}
                {% include "@atom-" ~ frames.type %}
            {% endif %}
        {% endif %}
    {% endif %}
{% endmacro %}

{% block main %}
    {{ render.atom(form) }}
{% endblock %}
 
{
  "form": [
    {
      "type": "input",
      "context": {
        "label": "E-Mail:",
        "placeholder": "Placeholder",
        "required": true
      }
    },
    {
      "type": "input",
      "context": {
        "label": "Name:",
        "placeholder": "Placeholder"
      }
    },
    {
      "type": "select",
      "context": {
        "name": "Name:",
        "values": [
          "Option One",
          "Option Two",
          "Option Three"
        ]
      }
    },
    {
      "type": "checkbox",
      "context": {
        "name": "Name:",
        "layout": "vertical",
        "type": "checkbox",
        "list": [
          "Option One",
          "Option Two",
          "Option Three"
        ]
      }
    },
    {
      "type": "checkbox",
      "context": {
        "name": "Name:",
        "layout": "horizontal",
        "type": "checkbox",
        "list": [
          "Option One",
          "Option Two",
          "Option Three"
        ]
      }
    },
    {
      "type": "checkbox",
      "context": {
        "name": "Name:",
        "layout": "vertical",
        "type": "radio",
        "groupName": "group1",
        "list": [
          "Option One",
          "Option Two",
          "Option Three"
        ]
      }
    },
    {
      "type": "checkbox",
      "context": {
        "name": "Name:",
        "layout": "horizontal",
        "type": "radio",
        "groupName": "group2",
        "list": [
          "Option One",
          "Option Two",
          "Option Three"
        ]
      }
    },
    {
      "type": "checkbox",
      "context": {
        "name": "Attendee's machine experience:",
        "description": "Choose appropriate level for attendee",
        "layout": "horizontal",
        "type": "radio",
        "groupName": "group3",
        "list": [
          "Beginner",
          "Intermediate",
          "Advanced"
        ]
      }
    }
  ]
}

No notes defined.