K vytvoření vlastního vstupního formuláře musíte splnit následující kroky:
Vytvořte HTML dokument, který bude obsahovat potřebná pole.
Pomocí „JavaScript method“ zajistíte posílání dat z formuláře a přiřazení klienta do fronty.
Nahrajete vytvořený formulář na libovolný hosting podporující protokol HTTPS a přidáte odkaz na formulář do administračního rozhraní.
Doporučujeme vytvářet vstupní formulář pomoci webové aplikace codepen.io kvůli jednoduchosti a přehlednosti.
Copy Zadání:
Vytvořit vlastní vstupní formulář, který obsahuje Jméno, Email, Telefon, a umožňuje položit otázku. Jak začít
Začít můžete kliknutím na
HTML
Editor kódu, který používáme je propojený s
Poslání jména klienta
Copy window.parent.postMessage({
type: 'SET_NAME',
name: 'Pan Veselý'
}, '*'); Poslání emailu klienta
Copy window.parent.postMessage({
type: 'SET_EMAIL',
email: 'pan.vesely@email.cz'
}, '*'); Poslání telefonu klienta
Copy window.parent.postMessage({
type: 'SET_PHONE',
phone: '111222333'
}, '*'); Poslání vlastního parametru
Copy window.parent.postMessage({
type: 'ADD_CUSTOM_DATA',
name: 'custom_field_name', // Název pole z call paramu
value: 'any' // string a max 2048
}, '*'); Zařazení klienta do fronty
Copy window.parent.postMessage({
type: 'ENQUEUE'
}, '*'); JavaScript kód našeho příkladu
V našem případě nejdříve klikněte na tlačítko Save , poté exportujte v .zip formátu (viz návod níže).
V případě, že využijete jiný nástroj než codepen.io bude kód formuláře vypadat takto.
Copy <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
background-color: transparent;
}
.vertical-align-middle {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.my-form {
width: 100%;
max-height: 100%;
overflow: auto;
padding: 1rem;
}
.form-control, .btn {
border-radius: 8px;
}
.btn[type="submit"] {
background-color: #39A2EF; /* Barva talčítka */
color: white; /* Barva textu tlačítka */
}
</style>
</head>
<body>
<div class="vertical-align-middle">
<form id="my_form" class="my-form">
<div class="form-group">
<label for="name">Jméno</label>
<input type="text" class="form-control" id="name" placeholder="Jméno">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email" placeholder="E-mail">
</div>
<div class="form-group">
<label for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" placeholder="Telefon">
</div>
<div class="form-group">
<label for="question">Otázka</label>
<input type="text" class="form-control" id="question" placeholder="Custom parametr">
</div>
<button type="submit" class="btn btn-info btn-block">Pokračovat</button>
</form>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.8/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script type="text/javascript">
var form = document.getElementById('my_form');
form.onsubmit = function (e) {
e.preventDefault();
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var question = document.getElementById('question').value;
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: 'question',
value: question
}, "*");
window.parent.postMessage({
type: "ENQUEUE"
},"*");
};
</script>
</body>
</html> Poslední krok
Vytvořili jste vstupní formulář pomocí codepen.io. Ten jste následně 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 formulář, který vložíte do administračního rozhraní.
