Registration for event ID-SK

Registration for event Ukážka 1

(open in a new window)

Code

Markup

<div data-module="idsk-registration-for-event" class="idsk-registration-for-event">
  <form class="idsk-registration-for-event__form">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
        <h3 class="govuk-fieldset__heading idsk-customer-surveys--subtitle">Registrácia na podujatie</h3>
      </legend>
        <div class="govuk-form-group">
              <label class="govuk-label" for="name">Meno</label>
              <span class="govuk-hint"></span>
                <span class="govuk-error-message">
                <span class="govuk-visually-hidden">Chyba:</span>Zadajte meno.
            </span>
              <input type="text" class="govuk-input" id="name" name="name" autocomplete="given-name" required>
        </div>
        <div class="govuk-form-group">
              <label class="govuk-label" for="surname">Priezvisko</label>
              <span class="govuk-hint"></span>
                <span class="govuk-error-message">
                <span class="govuk-visually-hidden">Chyba:</span>Zadajte priezvisko.
            </span>
              <input type="text" class="govuk-input" id="surname" name="surname" autocomplete="family-name" required>
        </div>
        <div class="govuk-form-group">
              <label class="govuk-label" for="email">Emailová adresa</label>
              <span class="govuk-hint">Sem zadajte emailovú adresu v tvare email@email.sk</span>
                <span class="govuk-error-message">
                <span class="govuk-visually-hidden">Chyba:</span>Zadajte správnu emailovú adresu.
            </span>
              <input type="email" class="govuk-input" id="email" name="email" autocomplete="email" required>
        </div>
        <div class="govuk-form-group">
              <label class="govuk-label" for="organization">Organizácia</label>
              <span class="govuk-hint"></span>
              <input type="text" class="govuk-input" id="organization" name="organization" autocomplete="organization" >
        </div>
        <div class="govuk-form-group">
            <label class="govuk-label" for="city">Miesto konania podujatia</label>
            <select class="govuk-select" id="city" name="city">
              <option>Vyberte možnosť</option>
                <option value="Bardejov">Bardejov</option>
                <option value="Kosice">Košice</option>
                <option value="Bratislava">Bratislava</option>
            </select>
        </div>
        <div class="govuk-form-group">
                <span class="govuk-error-message">
                <span class="govuk-visually-hidden">Chyba:</span>Prosím, akceptujte súhlas so spracovaním osobných údajov.
            </span>
              <div class="govuk-checkboxes">
                <div class="govuk-checkboxes__item">
                  <input type="checkbox" class="govuk-checkboxes__input" id="terms" name="terms" required>
                  <label class="govuk-label  govuk-checkboxes__label" for="terms">Súhlasím so spracovaním osobných údajov za účelom účasti na&nbsp;podujatí.</label>
                </div>
              </div>
        </div>
      <a href="#" role="button" draggable="false" class="idsk-button idsk-button--start idsk-registration-for-event-js-submit" data-module="idsk-button">
        Registrovať na podujatie
        <svg class="idsk-button__start-icon" width="17.5" height="19" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9.4016 10L0 0H5.59826L15 10H9.4016Z" fill="white"></path>
          <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M5.5984 20L15 10H9.40174L0 20H5.5984Z" fill="white"></path>
        </svg>
      </a>
    </fieldset>
  </form>
  <h3 class="govuk-heading-m idsk-registration-for-event__thank-you-msg">
    Ďakujeme za registráciu na podujatie.
  </h3>
</div>

Macro

{% from "registration-for-event/macro.njk" import idskRegistrationForEvent %}

{{ idskRegistrationForEvent({
  "heading": "Registrácia na podujatie",
  "formItems": [
    {
      "label": "Meno",
      "error": "Zadajte meno.",
      "tag": "input",
      "name": "name",
      "type": "text",
      "autocomplete": "given-name",
      "required": true
    },
    {
      "label": "Priezvisko",
      "error": "Zadajte priezvisko.",
      "tag": "input",
      "name": "surname",
      "type": "text",
      "autocomplete": "family-name",
      "required": true
    },
    {
      "label": "Emailová adresa",
      "hint": "Sem zadajte emailovú adresu v tvare email@email.sk",
      "error": "Zadajte správnu emailovú adresu.",
      "tag": "input",
      "name": "email",
      "type": "email",
      "autocomplete": "email",
      "required": true
    },
    {
      "label": "Organizácia",
      "tag": "input",
      "name": "organization",
      "type": "text",
      "autocomplete": "organization"
    },
    {
      "label": "Miesto konania podujatia",
      "tag": "select",
      "name": "city",
      "options": [
        {
          "value": "Bardejov",
          "name": "Bardejov"
        },
        {
          "value": "Kosice",
          "name": "Košice"
        },
        {
          "value": "Bratislava",
          "name": "Bratislava"
        }
      ]
    },
    {
      "label": "Súhlasím so spracovaním osobných údajov za účelom účasti na podujatí.",
      "error": "Prosím, akceptujte súhlas so spracovaním osobných údajov.",
      "tag": "input",
      "name": "terms",
      "type": "checkbox",
      "required": true
    }
  ],
  "buttonLabel": "Registrovať na podujatie",
  "thankYouMsg": "Ďakujeme za registráciu na podujatie."
}) }}