Hodnocení pomocí hvězdiček

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 a malá 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_stars.html

HTML

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.

Kromě inputů formuláře, HTML kód obsahuje svg obrázky ratingových hvězd. Lze je relativně snadno zaměnit za jiné obrazce, nutné je však dodržet pojmenování tříd a případně poupravit javascript kód, který s obrazci pracuje.

CSS Styling

Styl formuláře jsme upravili do barev aplikace Mluvii.

JavaScript kód

Javascript kód formuláře se stará o funkčnost hodnocení hvězdami a o poslání dat z formuláře do aplikace Mluvii. Hodnocení je posíláno skrze property "stars" ve "FEEDBACK_ACTION" zprávě.

Úpravy formuláře

Formulář můžete libovolně upravovat. Jednodušše například barvy. V CSS upravte korespondující proměnné v ":root" elementu, případně také v javascript kódu hned první dvě proměnné pro změnu barvy hvězd a v html kódu u polygon elementů atribut "fill" pro změnu základní barvy hvězd.

Veškeré 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/simplebar@3.1.0/dist/simplebar.css" />
  <style>
    body {
      color: #304558;
    }

    #my_form {
      background-color: #eaf3f4;
    }

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

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

    input[type="email"]:focus, textarea:focus {
      border: 1px solid #4a8299 !important;
      box-shadow: 0 0 0 2px #4a8299 !important;
    }

    input[type="submit"] {
      background-color: #4a8299;
      box-sizing: border-box;
      border: none;
    }

    input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active {
      box-shadow: none !important;
    }

    input[type="submit"]:hover {
      background-color: #5fadcc !important;
    }

    input[type="submit"]:active {
      background-color: #35687c !important;
    }

    .curp {
      cursor: pointer;
    }

    #rating, #handler {
      height: 36px;
    }

    .icon {
      height: 30px;
      z-index: 2;
    }

    .rating-options {
      flex: 1 1 auto;
      padding: 0 4px;
      z-index: 2;
      align-items: center;
    }

    #rating-age {
      position: absolute;
      top: 50%;
      left: 1rem;
      content: '';
      height: 2px;
      position: absolute;
      width: calc(100% - 2rem);
      background-color: #E9ECEE;
    }

    #handler {
      left: 0;
      z-index: 3;
    }

    .feedback {
      border: 1px solid #ced4da !important;
      border: none;
      margin-top: 15px;
    }

    #email_checkbox {
      line-height: 1.9;
    }

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

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

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

    .custom-control-input:active ~ .custom-control-label::before {
      background-color: #9ecee2 !important;
    }
    .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="p-2 m-2">
            <p class="text-center mt-3 mb-3 font-weight-bold">Jak jste s námi byli spokojeni?</p>
            <div class="inner-container px-3 pt-4 pb-2">
              <div id="rating" class="rating d-flex justify-content-center mx-auto position-relative">
                <div id="rating_options" class="rating-options d-flex justify-content-between">
                  <label class="icon curp mb-0">
                    <svg width="30px" viewBox="0 0 115.4 113.4">
                      <circle class="body" fill="#C6CCD0" data-fill="#7bca71" cx="57.7" cy="56.7" r="56.7" />
                      <path class="mouth" fill="#FFFFFF" d="M57.8,70.7c-6.4,0-19.4,0-27.8,0c-1.9,0-3.2,1-4,2.3c-0.9,1.5-0.9,3.4,0.3,5c7.1,9.6,18.5,15.7,31.4,15.7c12.8,0,24.2-6.2,31.4-15.7c1.1-1.5,1.1-3.3,0.4-4.7c-0.7-1.5-2.3-2.6-4.2-2.6C79.1,70.7,66.1,70.7,57.8,70.7z" />
                      <path class="right-eye" fill="#FFFFFF" d="M70.7,38c0.3-0.5,0.7-1,1.2-1.5c1.9-1.9,4.5-2.8,7-2.7c1.9,0.1,3.8,0.8,5.3,2c0.3,0.2,0.5,0.4,0.8,0.7c2.2,2.2,3,5.2,2.6,8c-0.3,1.8-1.2,3.6-2.6,5c-3.6,3.6-9.4,3.6-13,0C68.7,46.4,68.3,41.5,70.7,38z" />
                      <path class="left-eye" fill="#FFFFFF" d="M43.4,49.5c3.1-3.1,3.5-8,1.2-11.6c-0.3-0.5-0.7-1-1.2-1.5c-1.9-1.9-4.5-2.8-7-2.7c-1.9,0.1-3.8,0.8-5.3,2c-0.3,0.2-0.5,0.4-0.8,0.7c-2.2,2.2-3,5.2-2.6,8c0.3,1.8,1.2,3.6,2.6,5C34,53.1,39.8,53.1,43.4,49.5z" />
                    </svg>
                    <input 
                      value="5"
                      type="radio" 
                      id="rating_0"
                      name="rating" 
                      class="d-none" 
                      checked="true"
                    />
                  </label>
                  <label class="icon curp mb-0">
                    <svg width="30px" viewBox="0 0 115.4 113.4">
                      <circle class="body" fill="#C6CCD0" data-fill="#acd567" cx="57.7" cy="56.7" r="56.7" />
                      <path class="mouth" fill="#FFFFFF" d="M57.6,86.7c8.5,0,16.7-2.2,23.9-6.3c2.2-1.3,3-4.1,1.7-6.3c-1.3-2.2-4.1-3-6.3-1.7c-5.9,3.3-12.5,5.1-19.4,5.1s-13.5-1.8-19.4-5.1c-2.2-1.3-5-0.5-6.3,1.7c-1.3,2.2-0.5,5,1.7,6.3C40.9,84.5,49.1,86.7,57.6,86.7z"/>
                      <path class="right-eye" fill="#FFFFFF" d="M70.7,38c0.3-0.5,0.7-1,1.2-1.5c1.9-1.9,4.5-2.8,7-2.7c1.9,0.1,3.8,0.8,5.3,2c0.3,0.2,0.5,0.4,0.8,0.7c2.2,2.2,3,5.2,2.6,8c-0.3,1.8-1.2,3.6-2.6,5c-3.6,3.6-9.4,3.6-13,0C68.7,46.4,68.3,41.5,70.7,38z"/>
                      <path class="left-eye" fill="#FFFFFF" d="M43.4,49.5c3.1-3.1,3.5-8,1.2-11.6c-0.3-0.5-0.7-1-1.2-1.5c-1.9-1.9-4.5-2.8-7-2.7c-1.9,0.1-3.8,0.8-5.3,2c-0.3,0.2-0.5,0.4-0.8,0.7c-2.2,2.2-3,5.2-2.6,8c0.3,1.8,1.2,3.6,2.6,5C34,53.1,39.8,53.1,43.4,49.5z"/>
                    </svg>
                    <input 
                      value="4"
                      type="radio" 
                      id="rating_1"
                      name="rating" 
                      class="d-none" 
                    />
                  </label>
                  <label class="icon curp mb-0">
                    <svg width="30px" viewBox="0 0 115.4 113.4">
                      <circle class="body" fill="#C6CCD0" data-fill="#fcdb5b" cx="57.7" cy="56.7" r="56.7" />
                      <path class="mouth" fill="#FFFFFF" d="M57.7,74.7c-5.9,1-11.6,2.3-17.4,3.5c-2.5,0.6-4,3-3.5,5.5c0.6,2.5,3,4,5.5,3.5c5.7-1.3,11.2-2.4,17-3.5c5.8-1.1,11.7-2,17.6-2.9c2.5-0.4,4.3-2.7,3.9-5.2c-0.4-2.5-2.7-4.3-5.2-3.9c-6,0.9-12,1.8-35.4,6.5L57.7,74.7z"/>
                      <path class="right-eye" fill="#FFFFFF" d="M70.7,38c0.3-0.5,0.7-1,1.2-1.5c1.9-1.9,4.5-2.8,7-2.7c1.9,0.1,3.8,0.8,5.3,2c0.3,0.2,0.5,0.4,0.8,0.7c2.2,2.2,3,5.2,2.6,8c-0.3,1.8-1.2,3.6-2.6,5c-3.6,3.6-9.4,3.6-13,0C68.7,46.4,68.3,41.5,70.7,38z"/>
                      <path class="left-eye" fill="#FFFFFF" d="M43.4,49.5c3.1-3.1,3.5-8,1.2-11.6c-0.3-0.5-0.7-1-1.2-1.5c-1.9-1.9-4.5-2.8-7-2.7c-1.9,0.1-3.8,0.8-5.3,2c-0.3,0.2-0.5,0.4-0.8,0.7c-2.2,2.2-3,5.2-2.6,8c0.3,1.8,1.2,3.6,2.6,5C34,53.1,39.8,53.1,43.4,49.5z"/>
                    </svg>
                    <input 
                      value="3"
                      type="radio" 
                      id="rating_2"
                      name="rating" 
                      class="d-none" 
                    />
                  </label>
                  <label class="icon curp mb-0">
                    <svg width="30px" viewBox="0 0 115.4 113.4">
                      <circle class="body" fill="#C6CCD0" data-fill="#ffb94f" cx="57.7" cy="56.7" r="56.7" />
                      <path class="mouth" fill="#FFFFFF" d="M57.6,73c-7.5,0-14.5,1.3-22.3,4c-2.4,0.8-3.7,3.5-2.8,5.9c0.8,2.4,3.5,3.7,5.9,2.8c6.8-2.4,12.8-3.5,19.2-3.5c7.2,0,15,1.4,18.6,3.2c2.3,1.2,5,0.3,6.2-1.9c1.2-2.3,0.3-5-1.9-6.2C75.4,74.6,66.1,73,57.6,73z"/>
                      <path class="right-eye" fill="#FFFFFF" d="M70.7,38c0.3-0.5,0.7-1,1.2-1.5c1.9-1.9,4.5-2.8,7-2.7c1.5,1.8,1.6,2,3,3.7c1.4,1.7,1.4,1.8,2.5,3c1,1.3,1.6,1.9,3.2,4c-0.3,1.8-1.2,3.6-2.6,5c-3.6,3.6-9.4,3.6-13,0C68.8,46.4,68.4,41.5,70.7,38z"/>
                      <path class="left-eye" fill="#FFFFFF" d="M43.4,49.5c3.1-3.1,3.5-8,1.2-11.6c-0.3-0.5-0.7-1-1.2-1.5c-1.9-1.9-4.5-2.8-7-2.7c-1.5,1.8-1.6,2-3,3.7c-1.4,1.7-1.4,1.8-2.5,3c-1,1.3-1.6,1.9-3.2,4c0.3,1.8,1.2,3.6,2.6,5C33.9,53.1,39.8,53.1,43.4,49.5z"/>
                    </svg>
                    <input 
                      value="2"
                      type="radio" 
                      id="rating_3"
                      name="rating" 
                      class="d-none" 
                    />
                  </label>
                  <label class="icon curp mb-0">
                    <svg width="30px" viewBox="0 0 115.4 113.4">
                      <circle class="body" fill="#C6CCD0" data-fill="#ff7b48" cx="57.7" cy="56.7" r="56.7"  />
                      <path class="mouth" fill="#FFFFFF" d="M57.3,71.5c-8.5,0-16.6,2.2-23.8,6.3c-2.2,1.3-3,4.1-1.7,6.3c1.3,2.2,4.1,3,6.3,1.7c5.8-3.3,12.4-5.1,19.3-5.1s13.5,1.8,19.3,5.1c2.2,1.3,5,0.5,6.3-1.7c1.3-2.2,0.5-5-1.7-6.3C74,73.7,65.8,71.5,57.3,71.5z" />
                      <path class="right-eye" fill="#FFFFFF" d="M70.3,37.8c1.2-0.2,1.4-0.3,2.6-0.5c1.2-0.2,4.3-0.6,6.4-1c2.1-0.4,2.6-0.5,4.4-0.7c0.3,0.2,0.5,0.4,0.8,0.7c2.2,2.2,3,5.2,2.6,8c-0.3,1.8-1.2,3.6-2.6,5c-3.6,3.6-9.4,3.6-13,0C68.4,46.2,68,41.4,70.3,37.8z" />
                      <path class="left-eye" fill="#FFFFFF" d="M43.2,49.3c3.1-3.1,3.5-7.9,1.2-11.5c-1.2-0.2-1.4-0.3-2.6-0.5c-1.2-0.2-4.3-0.6-6.4-1c-2.1-0.4-2.6-0.5-4.4-0.7c-0.3,0.2-0.5,0.4-0.8,0.7c-2.2,2.2-3,5.2-2.6,8c0.3,1.8,1.2,3.6,2.6,5C33.8,52.9,39.6,52.9,43.2,49.3z" />
                    </svg>
                    <input 
                      value="1"
                      type="radio" 
                      id="rating_4"
                      name="rating" 
                      class="d-none" 
                    />
                  </label>
                </div>

                <div id="rating-age"></div>

                <div id="handler" class="curp position-absolute">
                  <svg width="40px" viewBox="0 0 115.4 113.4">
                  <circle fill="#8EC254" class="body" cx="57.7" cy="56.7" r="56.7" />
                  <path class="mouth" fill="#31464e" d="M57.8,70.7c-6.4,0-19.4,0-27.8,0c-1.9,0-3.2,1-4,2.3c-0.9,1.5-0.9,3.4,0.3,5c7.1,9.6,18.5,15.7,31.4,15.7c12.8,0,24.2-6.2,31.4-15.7c1.1-1.5,1.1-3.3,0.4-4.7c-0.7-1.5-2.3-2.6-4.2-2.6C79.1,70.7,66.1,70.7,57.8,70.7z" />
                  <path class="right-eye" fill="#31464e" d="M70.7,38c0.3-0.5,0.7-1,1.2-1.5c1.9-1.9,4.5-2.8,7-2.7c1.9,0.1,3.8,0.8,5.3,2c0.3,0.2,0.5,0.4,0.8,0.7c2.2,2.2,3,5.2,2.6,8c-0.3,1.8-1.2,3.6-2.6,5c-3.6,3.6-9.4,3.6-13,0C68.7,46.4,68.3,41.5,70.7,38z" />
                  <path class="left-eye" fill="#31464e" d="M43.4,49.5c3.1-3.1,3.5-8,1.2-11.6c-0.3-0.5-0.7-1-1.2-1.5c-1.9-1.9-4.5-2.8-7-2.7c-1.9,0.1-3.8,0.8-5.3,2c-0.3,0.2-0.5,0.4-0.8,0.7c-2.2,2.2-3,5.2-2.6,8c0.3,1.8,1.2,3.6,2.6,5C34,53.1,39.8,53.1,43.4,49.5z" />
                  </svg>
                </div>
              </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://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.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flubber/0.4.2/flubber.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
  <script src="https://unpkg.com/simplebar@3.1.0/dist/simplebar.js"></script>
  <script>

    // Variables
    var handlerStartOffset = 0;
    var handleDragStartOffset = 0;
    var handler = document.getElementById('handler');
    var ratingContainer = document.getElementById('rating');
    var ratingContainerWidth = ratingContainer.offsetWidth;
    var ratingOptionsContainer = document.getElementById('rating_options');
    var icons = [].slice.call(ratingOptionsContainer.querySelectorAll('.icon'));

    icons = icons.map(function(el, i) {    
      return {
        element:         el,
        offsetLeft: el.offsetLeft,
        bodyColor:    el.querySelector('.body').getAttribute('data-fill'),
        mouth:             el.querySelector('.mouth').getAttribute('d'),
        leftEye:         el.querySelector('.left-eye').getAttribute('d'),
        rightEye:     el.querySelector('.right-eye').getAttribute('d')
      };
    });

    // Animation timeline.
    var tl = new TimelineMax({ paused: true });

    icons.forEach(function(icon, i) {
      icon.element.addEventListener('click', function() {
        tl.tweenTo('rating_' + i, {
          ease: Expo.easeOut
        }).duration(.6);
      });

      var iconMinimization = new TweenLite.to(icon.element, .6, {
        scale: 0
      });

      var body = handler.querySelector('.body');
      var mouth = handler.querySelector('.mouth');
      var leftEye = handler.querySelector('.left-eye');
      var rightEye = handler.querySelector('.right-eye');

      var handlePosition = new TweenLite.to(handler, .6, {
        left: icon.offsetLeft - 4,
        onUpdate: function() {
          var propgress = handlePosition.progress();
          if (i !== 0) {
            var ic = icons[i - 1];
            var m = flubber.interpolate(ic.mouth, icon.mouth);
            var l = flubber.interpolate(ic.leftEye, icon.leftEye);
            var r = flubber.interpolate(ic.rightEye, icon.rightEye);
            mouth.setAttribute('d', m(propgress));
            leftEye.setAttribute('d', l(propgress));
            rightEye.setAttribute('d', r(propgress));
          }
        },
        ease: Power0.easeNone
      });

      var label = 'rating_' + i;
      var prevLabel = 'rating_' + (i - 1);

      handlePosition.data = {
        index: i,
        label: label,
        prevLabel: prevLabel
      };

      var handlerColor = new TweenLite.to(body, .6, {
        fill: icon.bodyColor
      });    

      if (i !== 0) {
        var iconMaximization = new TweenLite.to(icons[i - 1].element, .6, {
          scale: 1
        });
      }

      tl.add(handlePosition)
        .addLabel(label)
        .add(handlerColor, '-=.6')
        .add(iconMinimization, '-=.6');

      if (iconMaximization) {
        tl.add(iconMaximization, '-=.6');
      }
    });

    function autocomplete(e) {
      var label;
      var curLabel = tl.currentLabel();
      var nextLabel = tl.getLabelAfter();
      var curLabelTime = tl.getLabelTime(curLabel);
      var nextLabelTime = tl.getLabelTime(nextLabel);
      var halfWay = curLabelTime + (nextLabelTime - curLabelTime) / 2 < tl.time();

      label = halfWay ? nextLabel || curLabel : curLabel;

      if (label) {
        tl.tweenTo(label);
        document.getElementById(label).checked = true;    
      }
    };

    handler.addEventListener("mousedown", function(e) {
      document.body.addEventListener("mousemove", handleMouseMove);
      handleDragStartOffset = e.clientX + 15;
      handlerStartOffset = parseInt(handler.style.left) || 0;
    });

    document.body.addEventListener("mouseup", function(e) {
      if (handleDragStartOffset) {
        handleDragStartOffset = null;
        document.body.removeEventListener("mousemove", handleMouseMove);
        autocomplete();
      }
    });

    function handleMouseMove(e) {
      var offsetX = e.clientX - handleDragStartOffset + 48 + 48 / 2;
      var newProgress = Math.max(0, (offsetX + handlerStartOffset)  / (ratingContainerWidth + 20));
      tl.progress(newProgress);
    };

    // Form
    var form = document.getElementById('my_form');
    var submit = document.getElementById('submit');
    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;
      var rating = document.querySelector('input[type="radio"]:checked');

      window.parent.postMessage({
        type: "FEEDBACK_ACTION",
        email: checked ? email : null,
        stars: rating.value,
        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í.

results matching ""

    No results matching ""