Copy environment

Modal

Practice

<a href="#practice-modal" data-js="open-modal">open modal</a>

<div class="modal  " id="practice-modal">

    <div class="practice-form  ">
        <form class="practice-form__form">
            <div class="text">
                <h2 class="color-green">Praktika taotlus</h2>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field1">
        Eesnimi
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field1" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field2">
        Perekonnanimi
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field2" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field3">
        Elukoht
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field3" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field4">
        Telefon
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="tel" id="field4" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field5">
        Õppeasutus
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field5" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field6">
        Eriala
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field6" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field7">
        Kursus
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field7" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required textarea">
                    <label class="textfield__label " for="field8">
        Varem sooritatud praktikad (nimetada ettevõtted)
    </label>
                    <div class="textfield__inner">
                        <textarea class="textfield__input textarea__input     " type="text" id="field8" name=""></textarea>

                    </div>
                </div>

                <div class="textfield textfield--required select">
                    <label class="textfield__label select__label" for="field9">
        Kas soovid vaatluspraktikat või osaluspraktikat (vaatluspraktika on alati tasuta)
    </label>
                    <div class="textfield__inner">
                        <select name="" id="field9" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
                        <svg class="icon textfield--required select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

                    </div>
                </div>
                <div class="datepicker-field  textfield--required" id="field10">

                    <div class="textfield textfield--required">
                        <label class="textfield__label " for="datepicker-input1">
        Algus (päev, kuu)
    </label>
                        <div class="textfield__inner">
                            <input class="textfield__input" type="text" id="datepicker-input1" name="datepicker" value="" placeholder="" autocomplete="off" readonly>
                        </div>
                    </div>
                </div>
                <div class="datepicker-field  textfield--required" id="field11">

                    <div class="textfield textfield--required">
                        <label class="textfield__label " for="datepicker-input2">
        Lõpp (päev, kuu)
    </label>
                        <div class="textfield__inner">
                            <input class="textfield__input" type="text" id="datepicker-input2" name="datepicker" value="" placeholder="" autocomplete="off" readonly>
                        </div>
                    </div>
                </div>

                <div class="textfield textfield--required select">
                    <label class="textfield__label select__label" for="field12">
        Millisesse kontserni ettevõttesse soovid praktikale tulla?
    </label>
                    <div class="textfield__inner">
                        <select name="" id="field12" class="textfield__input select__input">
                    <option
                value="1"
                            >Option 1</option>
                    <option
                value="2"
                 selected             >Option 2</option>
                    <option
                value="3"
                            >Option 3</option>
                    <option
                value="4"
                            >Option 4</option>
            </select>
                        <svg class="icon textfield--required select__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow-down"></use>
</svg>

                    </div>
                </div>

                <div class="textfield textfield--required textarea">
                    <label class="textfield__label " for="field13">
        Praktika eesmärk (tulenevalt õppeasutuse praktika juhendist)
    </label>
                    <div class="textfield__inner">
                        <textarea class="textfield__input textarea__input     " type="text" id="field13" name=""></textarea>

                    </div>
                </div>

                <div class="textfield textfield--required textarea">
                    <label class="textfield__label " for="field14">
        Miks soovid praktikale tulla Viru Keemia Grupi ettevõtetesse?
    </label>
                    <div class="textfield__inner">
                        <textarea class="textfield__input textarea__input     " type="text" id="field14" name=""></textarea>

                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field15">
        Sinu emakeel
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field15" name="" value="" placeholder="">
                    </div>
                </div>

                <div class="textfield textfield--required">
                    <label class="textfield__label " for="field16">
        Kas saad hakkama mõnes muus keeles?
    </label>
                    <div class="textfield__inner">
                        <input class="textfield__input" type="text" id="field16" name="" value="" placeholder="">
                    </div>
                </div>
            </div>
            <button type="button" class="button button--block practice-form__button">
                    <span class="button__text">Saada</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
        </form>

    </div>

</div>
{
  "language": "en-US",
  "isDemo": true,
  "class": "js-modal",
  "data": {
    "practiceForm": {
      "title": "Praktika taotlus",
      "fields": [
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Eesnimi",
            "id": "field1"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Perekonnanimi",
            "id": "field2"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Elukoht",
            "id": "field3"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Telefon",
            "id": "field4",
            "type": "tel"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Õppeasutus",
            "id": "field5"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Eriala",
            "id": "field6"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Kursus",
            "id": "field7"
          }
        },
        {
          "component": "textarea",
          "modifier": "textfield--required",
          "data": {
            "label": "Varem sooritatud praktikad (nimetada ettevõtted)",
            "id": "field8"
          }
        },
        {
          "component": "select",
          "modifier": "textfield--required",
          "data": {
            "label": "Kas soovid vaatluspraktikat või osaluspraktikat (vaatluspraktika on alati tasuta)",
            "id": "field9",
            "options": [
              {
                "name": "Option 1",
                "value": "1"
              },
              {
                "name": "Option 2",
                "value": "2",
                "isSelected": true
              },
              {
                "name": "Option 3",
                "value": "3"
              },
              {
                "name": "Option 4",
                "value": "4"
              }
            ]
          }
        },
        {
          "component": "datepicker-field",
          "modifier": "textfield--required",
          "data": {
            "id": "field10",
            "input": {
              "id": "datepicker-input1",
              "name": "datepicker",
              "label": "Algus (päev, kuu)"
            }
          }
        },
        {
          "component": "datepicker-field",
          "modifier": "textfield--required",
          "data": {
            "id": "field11",
            "input": {
              "id": "datepicker-input2",
              "name": "datepicker",
              "label": "Lõpp (päev, kuu)"
            }
          }
        },
        {
          "component": "select",
          "modifier": "textfield--required",
          "data": {
            "label": "Millisesse kontserni ettevõttesse soovid praktikale tulla?",
            "id": "field12",
            "options": [
              {
                "name": "Option 1",
                "value": "1"
              },
              {
                "name": "Option 2",
                "value": "2",
                "isSelected": true
              },
              {
                "name": "Option 3",
                "value": "3"
              },
              {
                "name": "Option 4",
                "value": "4"
              }
            ]
          }
        },
        {
          "component": "textarea",
          "modifier": "textfield--required",
          "data": {
            "label": "Praktika eesmärk (tulenevalt õppeasutuse praktika juhendist)",
            "id": "field13"
          }
        },
        {
          "component": "textarea",
          "modifier": "textfield--required",
          "data": {
            "label": "Miks soovid praktikale tulla Viru Keemia Grupi ettevõtetesse?",
            "id": "field14"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Sinu emakeel",
            "id": "field15"
          }
        },
        {
          "component": "textfield",
          "modifier": "textfield--required",
          "data": {
            "label": "Kas saad hakkama mõnes muus keeles?",
            "id": "field16"
          }
        }
      ],
      "button": {
        "text": "Saada",
        "icon": "arrow"
      }
    },
    "button": {
      "text": "lorem ipsum"
    },
    "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur nemo commodi eius minima ratione suscipit, itaque odit incidunt, porro doloribus cumque placeat, fugiat modi dignissimos beatae optio nulla ad saepe."
  }
}