Základní vstupní formulář

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.
Přidejte CSS styly.
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.

Zadání:
Vytvořit vlastní vstupní formulář, který obsahuje Jméno, Email, Telefon, a umožňuje položit otázku.

Jak bude formulář vypadat

Jak začít

Začít můžete kliknutím na tento odkaz.

HTML

Editor kódu, který používáme je propojený s bootstrap frameworkem.

Poslání jména klienta

window.parent.postMessage({
  type: 'SET_NAME',
  name: 'Pan Veselý'
}, '*');

Poslání emailu klienta

window.parent.postMessage({
  type: 'SET_EMAIL',
  email: 'pan.vesely@email.cz'
}, '*');

Poslání telefonu klienta

window.parent.postMessage({
  type: 'SET_PHONE',
  phone: '111222333'
}, '*');

Poslání vlastního parametru

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

window.parent.postMessage({
  type: 'ENQUEUE'
}, '*');

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.

<!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í.

PreviousVlastní vstupní formuláře NextS volbou oddělení

Last updated 2 years ago

Was this helpful?