Webové komponenty

Registrácia na podujatie

Registračný formulár použite na webovej stránke, keď chcete aby sa používatelia vopred registrovali na podujatie, ktoré organizujete.

V registračnom formulári zbierajte iba tie najnutnejšie informácie ako napríklad meno, organizáciu, kde účastník pracuje alebo email, aby ste ho mohli spätne kontaktovať.

Obsah:

Z čoho sa skladá registračný formulár?

Skladá sa z:

1. nadpisu,
2. údajových polí,
3. súhlasu o spracovaní údajov,
4. tlačidla odoslať.

Ako použiť registráciu na podujatie?

Pri desktope tento komponent použite na ⅔ šírky obrazovky, pri mobilných zariadeniach na celú šírku obrazovky.

Pri desktope na zvyšnú voľnú ⅓ obrazovky môžete umiestniť napríklad adresu konania udalosti alebo súvisiace témy.

Stránka s registráciou

Ďakujeme za registráciu na podujatie.

            <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 (povinné)</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 (povinné)</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 (povinná)</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í. (povinné)</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>

Rozšírené príklady pre registráciu na podujatie

• Rozšírené príklady registrácie na podujatie