Basic entry forms

You must complete the following steps to create your own input form:

  • Create an HTML document that will contain the required fields.
  • Add CSS styles.
  • By using the “JavaScript method”, you will be able to send data from the form and assign the client to the queue.
  • You upload the created form to any hosting that supports the HTTPS protocoland add a link to the form in the administration interface.

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

Entry:
Create a customized input form that includes Name, Email, Phone, and allows to ask a question.

How the form looks

How to begin

You can start by clicking on this link.

HTML

CSS

JavaScript code

Available API’s

window.parent.postMessage({
  type: 'SET_NAME',
  name: 'Pan Veselý'
}, '*');
window.parent.postMessage({
  type: 'SET_EMAIL',
  email: 'pan.vesely@email.cz'
}, '*');
window.parent.postMessage({
  type: 'SET_PHONE',
  phone: '111222333'
}, '*');
window.parent.postMessage({
  type: 'ADD_CUSTOM_DATA',
  name: 'custom_field_name', // Název pole
  value: 'any' // Hodnota
}, '*');
window.parent.postMessage({
  type: 'ENQUEUE'
}, '*');
```<br/>

### JavaScript code of our example

<iframe
  src="//codepen.io/myzonjkee/embed/zEpPyw/?height=610&theme-id=dark&default-tab=js&embed-version=2"
  frameborder="0"
  width="100%"
  height="610px">
</iframe>
<br/>

### Upload a form to any hosting

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

![](/assets/custom-entry-form.png)

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

The last step

You created an input form using codepen.io. We then exported it to our computer. We have uploaded the exported folders to the GitHub repository and then switched on the GitHub site. So we have a link to our form that we put into the administration interface.

results matching ""

    No results matching ""