You must complete the following steps to create your own entry form:
Create an HTML document that will contain the required fields.
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 protocol and add a link to the form in the administration interface.
We recommend creating an entry form using the codepen.io web application for simplicity and clarity.
Copy Entry:
Create a customized entry 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
The code editor we use is linked to the bootstrap framework .
Sending the client's name:
Copy window.parent.postMessage({
type: 'SET_NAME',
name: 'Pan Veselý'
}, '*'); Sending a client email:
Copy window.parent.postMessage({
type: 'SET_EMAIL',
email: 'pan.vesely@email.cz'
}, '*'); Sending the client's phone:
Copy window.parent.postMessage({
type: 'SET_PHONE',
phone: '111222333'
}, '*'); Sending a custom parameter:
Copy window.parent.postMessage({
type: 'ADD_CUSTOM_DATA',
name: 'custom_field_name', // parameter name from call params
value: 'any' // string and max 2048
}, '*'); Client queuing:
Copy window.parent.postMessage({
type: 'ENQUEUE'
}, '*'); In our case, first click the Save button, then export in .zip format (see instructions below).
We have the form ready, now we need to upload the form to the internet so we can link to it from the administration interface. In our case we will use the GitHub site. More information can be found here .
If you use a tool other than codepen.io, the form code will look like this.
Copy <!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 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.
