K vytvoření offline formuláře musíte splnit několik kroků:
Vytvořte HTML dokument, který bude obsahovat potřebná pole.
Pomocí „JavaScript method“ zajistěte posílání dat z formuláře.
Nahrajte vytvořený formulář na libovolný hosting podporující protokol HTTPS a přidejte odkaz na formulář do administračního rozhraní.
Doporučujeme vytvářet offline formulář pomocí webové aplikace codepen.io kvůli jednoduchosti a přehlednosti.
Copy Zadání:
Vytvořit vlastní offline formulář, který obsahuje Email nebo Telefon, a umožňuje napsat zprávu. Jak bude formulář vypadat?
Jak začít
Začít můžete kliknutím na tento odkaz .
Přidání HTML
Editor kódu, který používáme, je propojený s bootstrap frameworkem .
Přidání CSS
Přidání JavaScript kódu
Dostupné API
Jak poslat offline formulář?
Copy window.parent.postMessage({
type: "OFFLINE_ACTION",
contact,
message
}, "*"); JavaScript kód našeho příkladu
Nahrát vytvořený formulář na libovolný hosting
V našem případě nejdříve klikněte na tlačítko Save , poté exportujte v .zip formátu (viz návod níže).
Máme 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.
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 {
background-color: transparent;
}
.whiteBox {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
justify-content: center;
background-color: #fff;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
border-radius: 16px;
margin-top: 24px;
margin-bottom: 24px;
padding: 24px;
}
.customInput, .customTextArea {
height: 48px;
color: #304558;
font-size: 14px;
padding: 12px;
border-radius: 8px;
border: 2px solid #DADDE0;
outline: none;
box-sizing: border-box;
transition: border 0.2s ease;
}
.customTextArea:focus, .customInput:focus{
border: 2px solid #30A1F2
}
.customTextArea {
flex-grow: 1;
height: 80px;
overflow: auto;
resize: none;
}
.customLabel {
margin: 8px 0
}
.customText {
text-align: center;
margin: 24px 16px 16px;
}
.btn[type="submit"] {
width: 100px;
margin: auto;
background-color: #39A2EF;
color: white; /* Barva textu tlačítka */
}
</style>
</head>
<body>
<div class=customText">
Your custom text here
</div>
<form id="custom_form">
<div class="whiteBox">
<label class="customLabel" for="contact">Email/Telephone</label>
<input
required
class="customInput"
id="contact"
></input>
<label class="customLabel" for="message">Message</label>
<textarea
required
class="customTextArea"
id="message"></textarea>
</div>
<button class="btn btn-info btn-block" type="submit">Send</button>
</form>
<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">
const form = document.getElementById('custom_form');
form.onsubmit = function (e) {
e.preventDefault();
const contact = document.getElementById('contact').value;
const message = document.getElementById('message').value;
window.parent.postMessage({
type: "OFFLINE_ACTION",
contact,
message
}, "*");
};
</script>
</body>
</html> Poslední krok
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í.
