# 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](https://codepen.io/pen?template=pdOQQG).

#### Přidání HTML

Editor kódu, který používáme, je propojený s [bootstrap frameworkem](https://getbootstrap.com/docs/4.0/components/forms/).

#### Přidání CSS

#### Přidání JavaScript kódu

**Dostupné API**

**Jak poslat offline formulář?**

```js
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](https://pages.github.com/).

V případě, že využijete jiný nástroj než codepen.io, bude kód formuláře vypadat takto.

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mluvii.com/pro-it-specialisty/customizace/vlastni-formulare/offline-formulare.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
