You must complete several steps to create this output form, similar to the creation of the basic of the feedback form:
Create an HTML document, add CSS styles, and use “JavaScript methods” to ensure functionality of ratings and send data from the form. Then you must upload the form to any hosting that supports the HTTPS protocol and add a link to the form into the administration interface of the Mluvii application.
We recommend creating an output form using the codepen.io web application for simplicity and clarity. Start by clicking on this link , where there is already preset the ui framework preset Bootstrap with a small simplebar library, due to the difficulties with iframe scrolling on iOS. At the end of this manual, you can find the complete code for the output form.
The HTML code contains elements of the emojis and other input elements.
The first two div tags (and css and javascript linked to them) serve to display your own scrollbars for better user experience on mobile devices.
The Javascript form code provides emoji animations and sends data from the form to the Mluvii application. For full API form capabilities, see the general instructions on creating an feedback form.
We have a form ready for you. 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 .
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel = "stylesheet" />
< link rel = "stylesheet" href = "https://unpkg.com/simplebar@3.1.0/dist/simplebar.css" />
< style >
.rating-stars {
display : flex ;
justify-content : center ;
}
svg {
padding : 4 px ;
}
.star-path , svg {
transition : all 0.15 s ;
}
svg :hover {
transform : scale (1.15) ;
}
svg :hover > .star-path {
fill : #ffbf00 !important ;
}
.inner-container {
background-color : #fff ;
}
input [ type = "email" ] , input [ type = "submit" ] , textarea , .inner-container {
border-radius : 0.5 rem !important ;
}
input [ type = "email" ] , textarea {
border : 2 px solid rgb (214 , 218 , 222) !important ;
box-shadow : none !important ;
}
input [ type = "email" ] :focus , textarea :focus {
border : 2 px solid #6eb6bc !important ;
}
input [ type = "submit" ] {
background-color : #6eb6bc ;
box-sizing : border-box ;
border : none ;
box-shadow : 0 px 0 px 6 px 0 px rgba (0 , 0 , 0 , 0.4) !important ;
transition : all 0.15 s ;
}
input [ type = "submit" ] :hover , input [ type = "submit" ] :focus {
background-color : #6eb6bc !important ;
box-shadow : 0 px 0 px 6 px 0 px rgba (0 , 0 , 0 , 0.4) !important ;
}
input [ type = "submit" ] :active {
transform : translateY (2 px ) ;
box-shadow : none !important ;
}
#email_checkbox {
line-height : 1.6 ;
}
#email_checkbox:before , #email_checkbox:after {
height : 1.2 rem ;
width : 1.2 rem ;
left : -26 px ;
box-shadow : none !important ;
}
.custom-checkbox {
padding-left : 26 px ;
}
.custom-control-input:checked ~ .custom-control-label::before {
background-color : #6eb6bc !important ;
}
.custom-control-input:active ~ .custom-control-label::before {
background-color : #9ecee2 !important ;
}
.curp {
cursor : pointer ;
}
.scroll-container {
max-height : 107 vh ;
width : 1 px !important ;
min-width : 100 % !important ;
max-width : 100 % !important ;
}
.scroll {
max-width : 100 % !important ;
}
</ style >
</ head >
< body >
< div class = "scroll-container" >
< div class = "scroll" data-simplebar >
< form id = "my_form" class = "m-3 d-flex flex-column justify-content-center" >
< p class = "text-center mt-3 mb-3 font-weight-bold" >Jak jste s námi byli spokojeni?</ p >
< div class = "inner-container p-3" >
< div class = "rating-stars mb-1" >
< label class = "icon" >
< svg class = "curp" width = "38px" height = "38px" viewBox = "0 0 512 512" xml:space = "preserve" >
< polygon class = "star-path" fill = "#e5e5e5" stroke-width = "37.6152" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10" points = "
259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08
29.274,197.007 188.165,173.919 " />
</ svg >
< input
value = "1"
type = "radio"
id = "rating_1"
name = "rating"
class = "d-none"
onclick = " onRatingClick ( this )"
/>
</ label >
< label >
< svg class = "curp" width = "38px" height = "38px" viewBox = "0 0 512 512" xml:space = "preserve" >
< polygon class = "star-path" fill = "#e5e5e5" stroke-width = "37.6152" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10" points = "
259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08
29.274,197.007 188.165,173.919 " />
</ svg >
< input
value = "2"
type = "radio"
id = "rating_2"
name = "rating"
class = "d-none"
onclick = " onRatingClick ( this )"
/>
</ label >
< label >
< svg class = "curp" width = "38px" height = "38px" viewBox = "0 0 512 512" xml:space = "preserve" >
< polygon class = "star-path" fill = "#e5e5e5" stroke-width = "37.6152" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10" points = "
259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08
29.274,197.007 188.165,173.919 " />
</ svg >
< input
value = "3"
type = "radio"
id = "rating_3"
name = "rating"
class = "d-none"
onclick = " onRatingClick ( this )"
/>
</ label >
< label >
< svg class = "curp" width = "38px" height = "38px" viewBox = "0 0 512 512" xml:space = "preserve" >
< polygon class = "star-path" fill = "#e5e5e5" stroke-width = "37.6152" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10" points = "
259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08
29.274,197.007 188.165,173.919 " />
</ svg >
< input
value = "4"
type = "radio"
id = "rating_4"
name = "rating"
class = "d-none"
onclick = " onRatingClick ( this )"
/>
</ label >
< label >
< svg class = "curp" width = "38px" height = "38px" viewBox = "0 0 512 512" xml:space = "preserve" >
< polygon class = "star-path" fill = "#e5e5e5" stroke-width = "37.6152" stroke-linecap = "round" stroke-linejoin = "round" stroke-miterlimit = "10" points = "
259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08
29.274,197.007 188.165,173.919 " />
</ svg >
< input
value = "5"
type = "radio"
id = "rating_5"
name = "rating"
class = "d-none"
onclick = " onRatingClick ( this )"
/>
</ label >
</ div >
< textarea
rows = "4"
id = "feedback"
name = "feedback"
class = "form-control feedback"
placeholder = "Vaše zpětná vazba"
></ textarea >
< div class = "custom-control custom-checkbox mt-3 mb-2" >
< input type = "checkbox" class = "custom-control-input" id = "send_to_email" >
< label id = "email_checkbox" class = "custom-control-label curp" for = "send_to_email" >
Chci poslat přepis konverzace
</ label >
</ div >
< div class = "form-group" >
< input
disabled
required
id = "email"
type = "email"
placeholder = "E-mailová adresa"
class = "form-control email"
/>
</ div >
</ div >
< div class = "form-group d-flex py-3 m-0" >
< input
id = "submit"
type = "submit"
value = "Ok"
class = "btn btn-primary mt-3 mx-auto px-5"
/>
</ div >
</ form >
</ div >
</ div >
< script src = "https://unpkg.com/simplebar@3.1.0/dist/simplebar.js" ></ script >
< script >
var selectedStarColor = '#FFD700' ;
var emptyStarColor = '#e5e5e5' ;
var form = document .getElementById ( 'my_form' );
// var stars = [...document.querySelectorAll('svg')];
var stars = Array . prototype . slice .call ( document .querySelectorAll ( 'svg' ));
var starRating = null ;
stars .forEach ( function (star) {
star .addEventListener ( 'mouseenter' , fillStars);
star .addEventListener ( 'mouseleave' , resetStars);
});
function setFilledStars (endIndex) {
stars .forEach ( function (star , index) {
if (index < endIndex) {
star .childNodes[ 1 ]. style .setProperty ( 'fill' , selectedStarColor);
}
else if (index >= endIndex) {
star .childNodes[ 1 ]. style .setProperty ( 'fill' , emptyStarColor);
}
})
}
function fillStars (e) {
setFilledStars ( stars .indexOf ( e .target));
}
function resetStars (e) {
return starRating ? setFilledStars (starRating) : setFilledStars ( 0 );
}
function onRatingClick (target) {
starRating = target .value;
}
var checkbox = document .getElementById ( 'send_to_email' );
checkbox . onchange = function (e) {
document .getElementById ( 'email' ).disabled = ! e . target .checked;
};
form . onsubmit = function (e) {
e .preventDefault ();
var email = document .getElementById ( 'email' ).value;
var feedback = document .getElementById ( 'feedback' ).value;
var checked = document .getElementById ( 'send_to_email' ).checked;
window . parent .postMessage ({
type : "FEEDBACK_ACTION" ,
email : checked ? email : null ,
stars : starRating ,
content : feedback
} , "*" );
};
</ script >
</ body >
</ html > Inserting a link to the mluvii application administration
You created an entry 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. So you have a link to our form, which you put into the administration interface.
