Basic feedback forms

You must complete several steps to create your own feedback 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. 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 output form using the codepen.io web application for simplicity and clarity.

Entry
Create a custom output form that contains feedback text and allows you to send a conversation transcript to email.

How the form looks

How to begin

You can start by clicking on this link.

HTML

JavaScript code

Available API’s

How to send feedback?

window.parent.postMessage({
    type: "FEEDBACK_ACTION",
    email: "example@email.cz",
    stars: null, // Nebo od 1 do 5
    content: ""
}, "*");

How to add custom parameter?

window.parent.postMessage({
  type: 'ADD_CUSTOM_DATA',
  name: 'custom_field_name', // parameter name from call params
  value: 'any' // string and max 2048
}, '*');

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>mluvii-custom-feedback</title>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.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="content">Vaše zpětná vazba</label>
          <textarea class="form-control" id="content" rows="3"></textarea>
        </div>
        <div class="form-check form-check-inline">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox" id="send_to_email">
            Odeslat přepis chatu na e-mail
          </label>
        </div>
        <div class="form-group">
          <input type="email" class="form-control email" id="email" placeholder="E-mail" disabled>
        </div>
        <button type="submit" class="btn btn-info btn-block">Odeslat</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 checkbox = document.getElementById('send_to_email');
      var form = document.getElementById('my_form');

      checkbox.onchange = function (e) {
        document.getElementById('email').disabled = !e.target.checked;
      };

      form.onsubmit = function (e) {
        e.preventDefault();

        var content = document.getElementById('content').value;
        var email = document.getElementById('email').value;
        var checked = document.getElementById('send_to_email').checked;

        window.parent.postMessage({
          type: "FEEDBACK_ACTION",
          email: checked ? email : null,
          stars: null,
          content: content
        }, "*");
      };
    </script>
  </body>
</html>

The last step

You created an entry 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.

PreviousFeedback form NextFeedback forms with emojis

Last updated 1 year ago