Copy environment

Apply

Preview 
<div class="apply  ">
    <div class="h-container">
        <div class="grid grid--center-xs grid--start-sm">
            <div class="grid__col grid__col--xs-20 grid__col--md-16 grid__col--left-gutter-sm-2 grid__col--bottom-gutter-xs-1">
                <h2 class="color-green">Kuidas praktikale kandideerida?</h2>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-10 grid__col--left-gutter-sm-2 grid__col--bottom-gutter-xs-1 grid__col--bottom-gutter-sm-0">
                <div class="text text--double">
                    <p>Kui oled huvitatud praktikast Viru Keemia Grupis, täida <a href='#practice-modal' data-js='open-modal'>elektrooniline taotlusvorm</a> või saada oma CV e-posti aadressile <a href='#'>personal@vkg.ee</a>. Kandideerimise tulemustest teavitame
                        sind hiljemalt kahe nädala jooksul pärast taotluse esitamist.</p>
                </div>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-7 grid__col--left-gutter-sm-2">
                <div class="person-box  ">
                    <div class="person-box__inner">
                        <div class="person-box__content">
                            <div class="person">
                                <div class="person__info-container">
                                    <h4 class="person__name">Eesnimi Perenimi</h4>
                                    <p class="person__position">Personalispetsialist</p>
                                    <a class="person__phone" href="#">+372 334 2233</a>
                                    <div class="person__link-container">
                                        <a href="#" class="button button--read button--small ">
                    <span class="button__text">praktika@vkg.ee</span>
                    </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal  js-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,
  "data": {
    "component": "apply",
    "title": "Kuidas praktikale kandideerida?",
    "person": {
      "picture": null,
      "name": "Eesnimi Perenimi",
      "positions": [
        "Personalispetsialist"
      ],
      "phones": [
        {
          "text": "+372 334 2233",
          "ref": "#"
        }
      ],
      "links": [
        {
          "ref": "#",
          "text": "praktika@vkg.ee"
        }
      ]
    },
    "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"
      }
    },
    "content": "<p>Kui oled huvitatud praktikast Viru Keemia Grupis, täida <a href='#practice-modal' data-js='open-modal'>elektrooniline taotlusvorm</a> või saada oma CV e-posti aadressile <a href='#'>personal@vkg.ee</a>. Kandideerimise tulemustest teavitame sind  hiljemalt kahe nädala jooksul pärast taotluse esitamist.</p>"
  }
}