Copy environment

Application

Preview 
<div class="application">
    <div class="h-container">
        <div class="grid">
            <div class="grid__col grid__col--xs-20 grid__col--sm-12 grid__col--left-gutter-xs-2 text">
                <h3>Aitäh, et pöördud oma ideega meie poole!</h3> <br> <br>
                <p>Täites alloleva vormi, saad taotleda meie toetust oma särava projekti elluviimiseks. Enne taotluse täitmist palun loe meie toetuse osutamise põhimõtteid ning soovitusi. Vaatame kõik esitatud ideed ja projektid hoolega üle kord kuus ning
                    võtame sinuga tagasisideks ühendust hoolimata vastuse sisust. </p>
                <div class="application__application-form-container">

                    <div class="application-form  ">
                        <form class="application-form__form">
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required">
                                    <label class="textfield__label " for="">
        Taotleva organisatsiooni nimi
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="" name="" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required select">
                                    <label class="textfield__label select__label" for="">
        Palun vali sobiv kategooria
    </label>
                                    <div class="textfield__inner">
                                        <select name="" id="" 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>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required textarea">
                                    <label class="textfield__label " for="">
        Idee kirjeldus
    </label>
                                    <div class="textfield__inner">
                                        <textarea class="textfield__input textarea__input     " type="text" id="" name=""></textarea>

                                    </div>
                                </div>
                            </div>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required">
                                    <label class="textfield__label " for="">
        Soovitav toetus
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="" name="" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <p class="application-form__title bold">Organisatsiooni esindatava isiku kontaktid</p>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required">
                                    <label class="textfield__label " for="">
        Nimi ja perenimi
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="" name="" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required">
                                    <label class="textfield__label " for="">
        Seos organisatsiooniga
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="" name="" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required">
                                    <label class="textfield__label " for="">
        E-posti aadress
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="" name="" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class=" application-form__form-field">

                                <div class="textfield textfield--required">
                                    <label class="textfield__label " for="">
        Kontakttelefon
    </label>
                                    <div class="textfield__inner">
                                        <input class="textfield__input" type="text" id="" name="" value="" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class=" application-form__form-field">
                                <div class="upload  ">
                                    <label for="" class="upload__label">
        <span class="upload__text">Vajadusel lisa manusena vajalikud lisadokumendid</span>
        <div class="link upload__link">
            vali faile
        </div>
        <span class="upload__files">
         </span>
    </label>
                                    <input type="file" class="upload__input" id="" name="" />
                                </div>
                            </div>
                            <div class="application-form__button-container">
                                <button type="button" class="button button--block ">
                    <span class="button__text">saada oma idee</span>
                            <span class="button__icon-container">
                <svg class="icon  button__icon">
    <use xlink:href="../../inc/svg/global.48b54b5802220943f9ae21d3bf31136a.svg#arrow"></use>
</svg>
            </span>
            </button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
            <div class="grid__col grid__col--xs-20 grid__col--sm-6 grid__col--left-gutter-xs-2 grid__col--top-gutter-xs-2 grid__col--top-gutter-sm-0">
                <div class="application__person-container">
                    <div class="text">
                        <p>Küsimuste korral palun võta ühendust VKG suhtekorraldusjuhiga</p>
                    </div>
                    <div class="application__person">
                        <div class="person">
                            <div class="person__image-container">

                                <div class="image image--block person__image">
                                    <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%3E%3C%2Fsvg%3E" data-srcset="//placehold.it/150x100 150w 100h, //placehold.it/300x200 300w 200h, //placehold.it/600x400 600w 400h, //placehold.it/1200x800 1200w 800h, //placehold.it/2400x1600 2400w 1600h"
                                        data-sizes="auto" alt="" class="image__img lazyload">
                                </div>
                            </div>
                            <div class="person__info-container">
                                <h4 class="person__name">Irina Bojenko</h4>
                                <p class="person__position">Infojuht</p>
                                <a class="person__phone" href="#">+372 334 2702</a>
                                <a class="person__phone" href="#">+372 523 2700</a>
                                <div class="person__link-container">
                                    <a href="#" class="button button--read button--small ">
                    <span class="button__text">irina.bojenko@vkg.ee</span>
                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "language": "en-US",
  "data": {
    "component": "application",
    "text": "<h3>Aitäh, et pöördud oma ideega meie poole!</h3> <br> <br> <p>Täites alloleva vormi, saad taotleda meie toetust oma särava projekti elluviimiseks. Enne taotluse täitmist palun loe meie toetuse osutamise põhimõtteid ning soovitusi. Vaatame kõik esitatud ideed ja projektid hoolega üle kord kuus ning võtame sinuga tagasisideks ühendust hoolimata vastuse sisust. </p>",
    "form": {
      "button": {
        "text": "saada oma idee",
        "icon": "arrow"
      },
      "sections": [
        {
          "fields": [
            {
              "type": "textfield",
              "info": {
                "label": "Taotleva organisatsiooni nimi"
              },
              "modifier": "textfield--required",
              "id": "field-1",
              "class": null
            },
            {
              "type": "select",
              "info": {
                "label": "Palun vali sobiv kategooria",
                "options": [
                  {
                    "name": "Option 1",
                    "value": "1"
                  },
                  {
                    "name": "Option 2",
                    "value": "2",
                    "isSelected": true
                  },
                  {
                    "name": "Option 3",
                    "value": "3"
                  },
                  {
                    "name": "Option 4",
                    "value": "4"
                  }
                ]
              },
              "modifier": "textfield--required",
              "id": "field-2",
              "class": null
            },
            {
              "type": "textarea",
              "info": {
                "label": "Idee kirjeldus"
              },
              "modifier": "textfield--required",
              "id": "field-3",
              "class": null
            },
            {
              "type": "textfield",
              "info": {
                "label": "Soovitav toetus"
              },
              "modifier": "textfield--required",
              "id": "field-4",
              "class": null
            }
          ]
        },
        {
          "title": "Organisatsiooni esindatava isiku kontaktid",
          "fields": [
            {
              "type": "textfield",
              "info": {
                "label": "Nimi ja perenimi"
              },
              "modifier": "textfield--required",
              "id": "field-5",
              "class": null
            },
            {
              "type": "textfield",
              "info": {
                "label": "Seos organisatsiooniga"
              },
              "modifier": "textfield--required",
              "id": "field-6",
              "class": null
            },
            {
              "type": "textfield",
              "info": {
                "label": "E-posti aadress"
              },
              "modifier": "textfield--required",
              "id": "field-7",
              "class": null
            },
            {
              "type": "textfield",
              "info": {
                "label": "Kontakttelefon"
              },
              "modifier": "textfield--required",
              "id": "field-8",
              "class": null
            },
            {
              "type": "upload",
              "info": {
                "label": "Vajadusel lisa manusena vajalikud lisadokumendid",
                "text": "vali faile"
              },
              "modifier": null,
              "id": "field-9",
              "class": null
            }
          ]
        }
      ]
    },
    "personText": "<p>Küsimuste korral palun võta ühendust VKG suhtekorraldusjuhiga</p>",
    "person": {
      "picture": true,
      "name": "Irina Bojenko",
      "positions": [
        "Infojuht"
      ],
      "phones": [
        {
          "text": "+372 334 2702",
          "ref": "#"
        },
        {
          "text": "+372 523 2700",
          "ref": "#"
        }
      ],
      "links": [
        {
          "ref": "#",
          "text": "irina.bojenko@vkg.ee"
        }
      ]
    },
    "topGutter": 2,
    "bottomGutter": 2
  }
}