> For the complete documentation index, see [llms.txt](https://docs.mluvii.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mluvii.com/en/for-it-specialists/customization/customized-forms/offline-forms.md).

# Offline forms

To create an **offline form** you must complete several steps:

* Create an HTML document that will contain the required fields.
* Add CSS styles.
* Use the “JavaScript method” to send data from the form.
* Upload the created form to any hosting that supports the **HTTPS** protocol and add a link to the form in the administration interface.

We recommend creating an offline form using the codepen.io web application for simplicity and clarity.

```
Entry:
Create a customized offline form that contains Email or Phone and allows to write a message.
```

### How will the form look?

### How to begin

You can start by clicking on [this link](https://codepen.io/pen?template=pdOQQG).

#### Adding HTML

The code editor we use is linked to [the bootstrap framework](https://getbootstrap.com/docs/4.0/components/forms/).

#### Adding CSS

#### Adding JavaScript code

#### Available API’s

**How to send an offline form?**

```js
window.parent.postMessage({
    type: "OFFLINE_ACTION",
    contact,
    message
}, "*");
```

#### JavaScript code of our example

### Upload a form to any hosting

In our case, click the **Save** button first, then export to **.zip** format (see instructions below).

We have a form prepared, now you need to upload the form to the Internet so we can refer to it from the administration interface. In our case, we will use the GitHub site. You can find more information [here](https://pages.github.com/).

If you use a tool other than codepen.io, the form code will look like this:

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

### The last step

You created an offline form using codepen.io. You have exported it to your computer. You have uploaded exported folders to the GitHub repository and then switched on the GitHub website. This brings you a link to our form, which you insert into the administration interface.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.mluvii.com/en/for-it-specialists/customization/customized-forms/offline-forms.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
