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

Registrácia na podujatie

Chyba:Zadajte meno.
Chyba:Zadajte priezvisko.
Sem zadajte emailovú adresu v tvare email@email.sk Chyba:Zadajte správnu emailovú adresu.
Chyba:Prosím, akceptujte súhlas so spracovaním osobných údajov.
Registrovať na podujatie

Ď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">
        <h3 class="govuk-heading-m">Registrácia na podujatie</h3>
        <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" 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" 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" 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" >
        </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></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>
    </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