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

#### HTML

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

#### **Poslání jména klienta**

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

#### **Poslání emailu klienta**

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

#### **Poslání telefonu klienta**

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

#### **Poslání vlastního parametru**

```js
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**

```js
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](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 {
        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>
```

<figure><img src="/files/QkHfEeU1TM6oMxCs2RKs" alt=""><figcaption></figcaption></figure>

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


---

# 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/vlastni-vstupni-formulare/zakladni-vstupni-formular.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.
