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/[email protected]/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/[email protected]/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í.
Last updated
Was this helpful?