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.
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.
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.
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:
Copy <!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>
.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/simplebar@3.1.0/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í.
