Questionario di soddisfazione del cliente

<!DOCTYPE html> <html> <head> <title>Questionario di soddisfazione del cliente</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css" > body {margin: 0;padding: 0;} body * {font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;} div.testata { background-color: #9b473b; color:white; font-size: 32px; line-height: 64px; text-shadow: 0 0 20px black; text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; text-transform: uppercase; } div.msg { overflow: hidden; border: 6px double #9b473b; border-radius: 15px; padding: 20px 40px; margin: 20px; font-size:22px; } div.msg>p { font-size: 18px; font-style: italic; } div.msg>a { display: block; overflow: hidden; text-decoration: none; float: right; margin-top: 20px; border:2px solid #9b473b; color:#9b473b; border-radius: 8px; padding:3px 20px; box-shadow: 3px 3px 5px grey; } div.msg>a:hover {background-color: #ffe9be;} div.msg>a:active {box-shadow: none;background-color: #ccc} div.msg>strong { padding-bottom: 10px; } section { width:1000px; margin: 0 3px; } div.eldomanda { clear: left; box-shadow: 0px 0px 10px #9b473b; margin: 18px 4px; padding: 5px; overflow: hidden; border-radius: 15px; /*background-color: #fff2dd; */ min-height: 150px; /*max-height: 350px;*/ } div.eldomanda>div { float:left; width: 650px; padding: 2px 8px 5px; } div.boxdom { overflow:hidden; line-height: 32px; } div.boxdom>* {float: left;} div.boxrisp { margin-top: 5px; padding-top: 10px; clear: left; /*border-top: 1px dashed gray;*/ } div.boxrisp>div:first-child { color:gray; font-style: italic; font-size: 14px; } div.numDom { color: #9b473b; font-size: 32px; text-shadow: 3px 3px 10px grey; padding: 2px 10px 10px 2px; } div.numDom:after {content:')';} div.testoDom { max-width: 560px; padding-top: 4px; color: black; font-size: 18px; font-weight: bold; text-transform: uppercase; } div.boxrisp>div.req:after {content: '[MOTIVAZIONE RICHIESTA! (da 20 a 300 caratteri)]';} div.boxrisp>div.req + textarea {border: 3px inset red;} div.eldomanda textarea:focus {background-color: #fff5f5;} div.eldomanda textarea {background-color: white; border: 3px inset white;} div.eldomanda textarea { outline: none; width: 600px; max-width: 600px; max-height: 260px; } div.footer>div {width: 100%;} div.footer nav { float: right; padding: 5px 20px 0 0; } input.notappl:not(.press) {cursor: pointer;} input.notappl, input[type="submit"] { background-color: transparent; padding: 4px 10px; font-weight: bold; box-shadow: 3px 3px 5px grey; border-radius: 8px; border: 2px solid; outline: none; color: #9b473b; } input.notappl { font-size: 14px; text-transform: uppercase; margin-top: 10px; width: 100%; } input[type="submit"]:hover, input.notappl:hover {background-color: #ffe9be;} input[type="submit"]:active, input.notappl:active, input.notappl.press {box-shadow: none;background-color: #ccc;cursor:default;} input[type="submit"] { margin-top: 15px; font-size: 18px; cursor: pointer; } div.footer cite { border-top: 1px dashed #9b473b; display: block; overflow: hidden; padding: 8px 5px 4px; margin-top: 5px; float: left; color: gray; } div.eldomanda.hid {display: none} div.balls>a { border: 2px solid gray; width: 48px;height: 48px; border-radius: 15px; display: block; float: left; text-decoration: none; outline: transparent; margin-right: 1px; } div.balls {overflow: hidden;} fieldset { border: 1px solid gray; border-radius: 10px; float: right; } fieldset legend { color: #9b473b; background-color: white; padding: 2px 4px; text-transform: uppercase; font-weight: bold; border: 1px solid gray; } fieldset legend button { padding: 0px 5px; margin-left: 15px; background-color: transparent; border-radius: 5px; font-weight: bold; outline: none; } .notxtsel { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ } div.balls a>img {display: none;opacity:1;} div.balls.notsel a>img {display: block;opacity:.5;} div.balls:hover a>img {display: none;opacity:1;} div.balls.notsel a:hover>img {display: block;} div.balls:hover a {background-color: white} div.balls.notsel>a:hover {border: 2px solid hotpink;} </style>  <script type="text/javascript" src="jquery-3.4.1.min.js" ></script> <script src="https://assets.adobedtm.com/1aaba0661858/27678369c4bc/launch-9205dd525723.min.js" async></script> <script> window.adobeDataLayer=window.adobeDataLayer||[]; </script> <script type="text/javascript"> // function setDataNow () { // let lblData=document.getElementById('dataoggi'); // lblData.innerHTML=(new Date).toLocaleDateString(); // } const NON_APPL='6'; function getArrTesti() { let arrTesti= new Array(); arrTesti.push('Come valuta il processo di gestione degli ordini tramite il Portale?'); arrTesti.push('Come valuta la qualit脿 del prodotto ricevuto?'); arrTesti.push('Come valuta il rispetto dei tempi di consegna?'); arrTesti.push('Come valuta la disponibilit脿 del personale IPZS S.p.A?'); arrTesti.push('Qual 猫 il suo giudizio complessivo?'); return arrTesti; } function CreaMeter() { let arrTesti= getArrTesti(); let $templ=$('div.eldomanda.hid'); let $sect=$('section'); for (let i=0; i<5; i++) { let sIdx=(i+1).toString(); let $blocco= $templ.clone().removeClass('hid'); $blocco.find('div.numDom').text(sIdx); $blocco.find('div.testoDom').text(arrTesti[i]); $blocco.find('textarea').attr('name', 'txt' + sIdx) $blocco.find('div.balls').data('idx', sIdx); $blocco.next('input.notappl').data('idx', NON_APPL); $blocco.insertBefore($sect.children('div.footer')); } } $( document ).ready(function() { CreaMeter(); $('div.balls>a').mouseover(function(){ let $div=$(this).parent('div.balls'); if ($div.hasClass('notsel')) { $div.prev('legend').text($(this).data('lbl')); $(this).css('background-color', $(this).data('col')); $(this).prevAll('a').css('background-color', $(this).data('col')); $(this).nextAll('a').css('background-color', 'white'); } }); $('div.notsel>a').click(function(){ let $divb=$(this).parent('div.balls'); if ($divb.hasClass('notsel')) doScelta($divb, $(this)); }); $('div.notsel').mouseleave(function(){ if ($(this).hasClass('notsel')) resetBall($(this)); }); $('input.notappl').click(function(){ var $this=$(this); if (!$this.hasClass('press')) doScelta($this.prev('div.balls'), $this); }); $('input[type="submit"]').click(function( event ) { var esito=ControlliPreSub(); if (esito===true) esito=confirm("Complimenti!!!\nHai inserito tutte le valutazioni richieste," + "\nPremere 'OK' per inviarci il questionario\nPremere 'Annulla' per riesaminare le valutazioni."); if (!esito) event.preventDefault(); }); adobeAnalyticsPush(); }); function ControlliPreSub() { let num_notsel=$('section').find('div.notsel').length; if (num_notsel>0) { alert('Attenzione!!!\nSi deve esprimere una valutazione per ogni domanda\noppure si pu貌 selezionare "NON APPLICABILE"'); return false; } console.log('inizio'); let arr=new Array(); $('form>input[type="hidden"]').each(function () { let $hidd=$(this); let idxdom=$hidd.attr('name').replace('voto',''); if ($hidd.val()==='1' || $hidd.val()==='2') arr.push(idxdom); }); if (arr.length>0) { let str=''; $('section>div.eldomanda').each(function(idx){ let $miodiv=$(this).find('div.boxrisp>div'); $miodiv.removeClass('req'); let txtlen=$.trim($miodiv.next('textarea').val()).length; let bTextAreOK=(20 <= txtlen && txtlen <= 300); if (arr.indexOf((idx+1).toString())>=0 && !bTextAreOK) {str += ',' + (idx+1).toString();$miodiv.addClass('req');} }); if ($('section').find('div.boxrisp>div.req').length>0) { alert('Attenzione!!!\nSe si esprime una valutazione "INSUFFICENTE" o "SUFFICENTE"\n猫 neccessario indicare anche una motivazione (da 20 a 300 caratteri).'); return false; } } return true; } function doScelta($divb, $but) { $divb.removeClass('notsel'); let sel=NON_APPL; if ($but.is('a')) { let $img=$but.children('img'); $img.css('display','block'); sel=$img.attr('alt').replace('voto', '') } else { let $buts=$divb.children('a'); $buts.css('background-image', 'url(img/x.png)'); $buts.css('opacity', '0.4'); } $divb.prop('disabled', true); $divb.children('a').css('cursor', 'default'); $divb.next('input.notappl').addClass('press').prop('disabled', true).css('cursor', 'default'); $('input[name="voto' + $divb.data('idx').toString() + '"]').val(sel); let $legend=$divb.prev('legend'); $legend.empty(); let $lbl=$('<span/>').text($but.data('lbl')); $legend.append($lbl); let $butAV=$('<button/>').text('X').click(function(){ resetBall($(this).parent('legend').parent('fieldset').find('div.balls')); }); $legend.append($butAV); $divb.parent('fieldset').parent('div.eldomanda').find('textarea').focus(); } function resetBall($divballs) { $divballs.prev('legend').text('valutazione'); $divballs.children('a').removeAttr('style'); if (!$divballs.hasClass('notsel')) $divballs.addClass('notsel'); $divballs.children('a').children('img').removeAttr('style'); $('input[name="voto' + $divballs.data('idx') + '"]').val('0'); $divballs.next('input.notappl').prop('disabled', false).removeClass('press').removeAttr('style'); $divballs.prop('disabled', false); $divballs.parent('fieldset').parent('div.eldomanda').find('div.boxrisp>div').removeClass('req') } function adobeAnalyticsPush() { let isLoggedIn = false; if (isLoggedIn) { let isSurveyJustSent = false; let customerAlreadySentSurvey = false; if (isSurveyJustSent) { pushFormCompletion(); } else if (!customerAlreadySentSurvey) { pushFormLoad(); } } } function pushFormLoad() { window.adobeDataLayer.push({ "event": "formLoad", "data": { "component": { "form": { "name": "survey", "step": "form" } }, "profile": { "userStatus": "logged" } } }); } function pushFormCompletion() { window.adobeDataLayer.push({ "event": "formCompletion", "data": { "component": { "form": { "name": "survey", "stepName": "thank_you" } }, "profile": { "userStatus": "logged" } } }); } </script> </head> <body> <form name="frQuestionario" method="post" action=""> <section> <div class="testata notxtsel">Questionario di soddisfazione del cliente</div> <div class="msg" style="display: block"> UTENTE NON RICONOSCIUTO, EFFETTUARE L'ACCESSO AL SITO

CINXE.COM

Questionario di soddisfazione del cliente