Hodnocení pomocí smajlíků

K vytvoření tohoto výstupního formuláře musíte splnit několik kroků, obdobně jako u tvorby základního výstupního formuláře:

Vytvořit HTML dokument, přidat CSS styly a pomocí „JavaScript metod“ zajistit funkčnost ratingu a posílání dat z formuláře. Následně je nutné formulář nahrát na libovolný hosting podporující protokol HTTPS a přidat odkaz na formulář do administračního rozhraní aplikace Mluvii.

Doporučujeme vytvářet výstupní formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti. Začít můžete kliknutím na tento odkaz, kde je již přednastaven ui framework Bootstrap s malou library simplebar, kvůli těžkostem se scrollováním iframe na systémech iOS. Na konci tohoto návodu můžete nalézt kompletní kód výstupního formuláře.

Jak bude formulář vypadat

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

HTML

HTML kód obsahuje elementy svg obrazců smajlíků a ostatní input elementy.

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

JavaScript kód

Javascript kód formuláře zajištuje animace smajlíků a odeslání dat z formuláře do aplikace Mluvii. Úplné možnosti API formuláře naleznete v obecném návodu na tvorbu výstupního formuláře.

Nahrát vytvořený formulář na libovolný hosting

V případě, že jste formulář vytvořili přes službu codepen.io, nejdříve klikněte na tlačítko Save, poté exportujte v .zip formátu (viz návod níže).

Tím máme připravený formulář. Nyní je potřeba nahrát formulář na internet, abychom na něho 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.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/simplebar.css" />
  <style>
    .rating-stars {
      display: flex;
      justify-content: center;
    }

    svg {
      padding: 4px;
    }

    .star-path, svg {
      transition: all 0.15s;
    }

    svg:hover {
      transform: scale(1.15);
    }

    svg:hover > .star-path {
      fill: #ffbf00 !important;
    }

    .inner-container {
      background-color: #fff;
    }

    input[type="email"], input[type="submit"], textarea, .inner-container {
      border-radius: 0.5rem !important;
    }

    input[type="email"], textarea {
      border: 2px solid rgb(214, 218, 222) !important;
      box-shadow: none !important;
    }

    input[type="email"]:focus, textarea:focus {
      border: 2px solid #6eb6bc !important;
    }

    input[type="submit"] {
      background-color: #6eb6bc;
      box-sizing: border-box;
      border: none;
      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) !important;
      transition: all 0.15s;
    }

    input[type="submit"]:hover, input[type="submit"]:focus {
      background-color: #6eb6bc !important;
      box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4) !important;
    }

    input[type="submit"]:active {
      transform: translateY(2px);
      box-shadow: none !important;
    }

    #email_checkbox {
      line-height: 1.6;
    }

    #email_checkbox:before, #email_checkbox:after {
      height: 1.2rem;
      width: 1.2rem;
      left: -26px;
      box-shadow: none !important;
    }

    .custom-checkbox {
      padding-left: 26px;
    }

    .custom-control-input:checked ~ .custom-control-label::before {
      background-color: #6eb6bc !important;
    }

    .custom-control-input:active ~ .custom-control-label::before {
      background-color: #9ecee2 !important;
    }

    .curp {
      cursor: pointer;
    }
    .scroll-container {
      max-height: 107vh;
      width: 1px !important;
      min-width: 100% !important;
      max-width: 100% !important;
    }
    .scroll {
      max-width: 100% !important;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll" data-simplebar>
      <form id="my_form" class="m-3 d-flex flex-column justify-content-center">
          <p class="text-center mt-3 mb-3 font-weight-bold">Jak jste s námi byli spokojeni?</p>
          <div class="inner-container p-3">
            <div class="rating-stars mb-1">
              <label class="icon">
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="1"
                  type="radio" 
                  id="rating_1"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="2"
                  type="radio" 
                  id="rating_2"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="3"
                  type="radio" 
                  id="rating_3"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="4"
                  type="radio" 
                  id="rating_4"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
                  <label>
                <svg class="curp" width="38px" height="38px" viewBox="0 0 512 512" xml:space="preserve">
                  <polygon class="star-path" fill="#e5e5e5" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
                    259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 
                    29.274,197.007 188.165,173.919 "/>
                </svg>
                <input 
                  value="5"
                  type="radio" 
                  id="rating_5"
                  name="rating" 
                  class="d-none" 
                  onclick="onRatingClick(this)"
                />
              </label>
            </div>
        
            <textarea 
              rows="4"
              id="feedback" 
              name="feedback"
              class="form-control feedback"
              placeholder="Vaše zpětná vazba"
            ></textarea>
        
            <div class="custom-control custom-checkbox mt-3 mb-2">
              <input type="checkbox" class="custom-control-input" id="send_to_email">
              <label id="email_checkbox" class="custom-control-label curp" for="send_to_email">
                Chci poslat přepis konverzace
              </label>
            </div>
        
            <div class="form-group">
              <input 
                disabled
                required
                id="email" 
                type="email" 
                placeholder="E-mailová adresa" 
                class="form-control email" 
              />
            </div>
          </div>
          
          <div class="form-group d-flex py-3 m-0">
            <input 
              id="submit"
              type="submit" 
              value="Ok"
              class="btn btn-primary mt-3 mx-auto px-5" 
            />
          </div>
        </form>
    </div>
  </div>
  
  <script src="https://unpkg.com/[email protected]/dist/simplebar.js"></script>
  <script>
    var selectedStarColor = '#FFD700';
    var emptyStarColor = '#e5e5e5';

    var form = document.getElementById('my_form');
    // var stars = [...document.querySelectorAll('svg')];
    var stars = Array.prototype.slice.call(document.querySelectorAll('svg'));
    var starRating = null;

    stars.forEach(function(star) {
      star.addEventListener('mouseenter', fillStars);
      star.addEventListener('mouseleave', resetStars);
    });

    function setFilledStars(endIndex) {
      stars.forEach(function(star, index) {
        if (index < endIndex) {
          star.childNodes[1].style.setProperty('fill', selectedStarColor);
        }
        else if (index >= endIndex) {
          star.childNodes[1].style.setProperty('fill', emptyStarColor);
        }
      })
    }

    function fillStars(e) {
      setFilledStars(stars.indexOf(e.target));
    }

    function resetStars(e) {
      return starRating ? setFilledStars(starRating) : setFilledStars(0);
    }

    function onRatingClick(target) {
      starRating = target.value;
    }

    var checkbox = document.getElementById('send_to_email');

    checkbox.onchange = function(e) {
      document.getElementById('email').disabled = !e.target.checked;
    };

    form.onsubmit = function (e) {
      e.preventDefault();

      var email = document.getElementById('email').value;
      var feedback = document.getElementById('feedback').value;
      var checked = document.getElementById('send_to_email').checked;
      
      window.parent.postMessage({
        type: "FEEDBACK_ACTION",
        email: checked ? email : null,
        stars: starRating,
        content: feedback
      }, "*");
    };
  </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 pádem máte odkaz na náš formulář, který vložíte do administračního rozhraní.

PreviousZákladní výstupní formulář NextHodnocení pomocí hvězdiček

Last updated 3 years ago

Was this helpful?