S volbou oddělení

K vytvoření vlastního vstupního formuláře s volbou oddělení budete postupovat obdobně jako u základního formuláře:

Vytvoříte HTML dokument, přidáte CSS styly a pomocí JavaScript metod zajistíte posílání dat z formuláře a přiřazení klienta do fronty. Následně nahrajete vytvořený formulář na libovolný hosting podporující protokol HTTPS a přidáte odkaz na formulář do administračního rozhraní.

Opět doporučujeme vytvářet vstupní formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti. Začít můžete kliknutím na tento odkaz. Editor kódu, který používáme je propojený s bootstrap frameworkem a s malou library simplebar, kvůli těžkostem se scrollováním iframe na systémech iOS.

Jak bude formulář vypadat

Přímý odkaz pro vložení tohoto formuláře do administrace aplikace Mluvii: https://mluvii.github.io/customization/entry_form_departments.html

HTML

Oproti základnímu formuláři se tento formulář skládá ze dvou slidů - klasický formulář s údaji a výběr oddělení. Slidy jsou vytvořeny pomocí library Swipper.

První dva div tagy (a na ně napojené css a javascript) slouží k zobrazení vlastních scrollbarů pro lepší user experience na mobilních zařízeních.

CSS Styling

Většina CSS je již zajištěna pomocí Bootstrapu a Swipperu.

JavaScript kód

Informace o zvoleném oddělení je posílaná spolu s dalšími údaji z formuláře ve funkci volané při submitu formuláře jako custom proměnná "department".

Úplné možnosti API formuláře naleznete v obecném návodu na tvorbu výstupního formuláře.

Nahrání formuláře na libovolný hosting

Pokud jste pro tvorbu formuláře využili codepen.io, nejdříve klikněte na tlačítko Save, poté exportujte v .zip formátu.

Tím máte připravený formulář, nyní je potřeba nahrát formulář na internet, abychom na něj mohli odkazovat z administračního rozhraní. V našem případě využijeme GitHub stránky. Bližší informace naleznete zde.

V případě, že využijete jiný nástroj než codepen.io bude kód formuláře vypadat takto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/simplebar@3.1.0/dist/simplebar.css" />
  <style>
    .scroll-container {
      max-height: 107vh;
      height: 100%;
      width: 1px !important;
      min-width: 100% !important;
      max-width: 100% !important;
    }
    .scroll {
      max-width: 100% !important;
    }
    .swiper-container {
      height: 100%;
    }

    .swiper-slide {
      display: flex;
      padding: 1rem 1rem 2rem 1rem;
    }

    .card {
      width: 100%;
      overflow: auto;
      border-radius: 1rem;
      box-shadow: 0 0 1rem -0.5rem rgba(24, 28, 32, 0.5);
    }

    .form-control, .btn {
      border-radius: 0.5rem;
    }

    .curp {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll" data-simplebar>
      <div class="swiper-container">
          <div class="swiper-wrapper">
            
            <!-- First slide start -->
            <div class="swiper-slide swiper-no-swiping">
              <div class="card">
                <div class="card-body">
                  <form id="main_form" class="w-100">
                    <div class="form-group">
                      <label for="name" class="mb-1">Jméno</label>
                      <input type="text" class="form-control" id="name" placeholder="Jméno">
                    </div>
                    <div class="form-group">
                      <label for="email" class="mb-1">E-mail</label>
                      <input type="email" class="form-control" id="email" placeholder="E-mail">
                    </div>
                    <div class="form-group">
                      <label for="phone" class="mb-1">Telefon</label>
                      <input type="text" class="form-control" id="phone" placeholder="Telefon">
                    </div>
                  </form>
                  <div class="text-center">
                    <button type="submit" form="main_form" class="btn btn-primary mt-3">
                      Pokračovat
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- First slide end -->
            
            <!-- Second slide start -->
            <div class="swiper-slide swiper-no-swiping">
              <div class="card">
                <div class="card-body">	
                  <h5 class="mb-0 text-center">
                    Vyberte prosím oddělení, se kterým se chcete spojit
                  </h5>
                  <form id="department_form" class="w-100 my-5 mx-auto" style="max-width: 170px;">
                    <div class="custom-control custom-radio">
                      <input 
                         checked
                         id="radio_1"
                        type="radio"
                         name="department"
                        value="sales_representative"
                         class="custom-control-input"
                       />
                      <label class="custom-control-label curp" for="radio_1">
                        Obchodní zástupce
                      </label>
                    </div>
                    <div class="custom-control custom-radio">
                      <input 
                         id="radio_2"
                        type="radio"
                         name="department"
                        value="technical_support"
                         class="custom-control-input"
                       />
                      <label class="custom-control-label curp" for="radio_2">
                        Technická podpora
                      </label>
                    </div>
                    <div class="custom-control custom-radio">
                      <input 
                         id="radio_3"
                        type="radio"
                         name="department"
                        value="financial_department"
                         class="custom-control-input"
                       />
                      <label class="custom-control-label curp" for="radio_3">
                        Finanční oddělení
                      </label>
                    </div>
                  </form>
                  <div class="text-center">
                    <button type="button" class="btn btn-link btn-back mt-0 d-inline-block">
                      Zpět
                    </button>
                    <button type="submit" form="department_form" class="btn btn-primary mt-0 d-inline-block">
                      Pokračovat
                    </button>
                  </div>
                  <!-- Second slide end -->
                  
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-pagination swiper-no-swiping"></div>
        </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
  <script src="https://unpkg.com/simplebar@3.1.0/dist/simplebar.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true
      },
    });

    $('.btn-back').click(function(e) {
      swiper.slidePrev();
    })

    $('#main_form').submit(function(e) {
      e.preventDefault();
      swiper.slideNext();
    })

    $('#department_form').submit(function(e) {
      e.preventDefault();

      var name = $('#name').val();
      var email = $('#email').val();
      var phone = $('#phone').val();
      var department = $('input[name="department"]:checked').val()
      
      window.parent.postMessage({
        type: "SET_NAME",
        name: name
      }, "*");
      window.parent.postMessage({
        type: "SET_EMAIL",
        email: email
      }, "*");
      window.parent.postMessage({
        type: "SET_PHONE",
        phone: phone
      }, "*");
      window.parent.postMessage({
        type: "ADD_CUSTOM_DATA",
        name: "department",
        value: department
      }, "*");
      window.parent.postMessage({
        type: "ENQUEUE"
      }, "*");
    })
  </script>
</body>
</html>

Vložení odkazu do administrace aplikace mluvii

Vytvořili jste vstupní formulář pomocí codepen.io. Ten jste exportovali na Váš počítač. Exportované složky jste nahráli do GitHub repozitáře a poté zapnuli GitHub stránky. Tím jste získali odkaz na náš formulář, který vložíte do administračního rozhraní.

PreviousZákladní vstupní formulář NextVlastní výstupní formuláře

Last updated 2 years ago