Offline formuláře

K vytvoření offline formuláře musíte splnit několik kroků:

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

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ář?

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.

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

PreviousHodnocení pomocí hvězdiček NextParametry

Last updated 3 years ago

Was this helpful?