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í.
Last updated
Was this helpful?