The following guide will demonstrate how to update the NPS element design.
Example demo form template for import - https://app.formyoula.com/templates/import
Please use the following JavaScript code on your form and update the "nps_id" with your NPS Field Id.
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂
// Set NPS element ID to update
var nps_id = 'd485-82cc-4013';
// Set each NPS number colors
var color = ['#8B0000', '#B22222', '#FF0000', '#FF7F50', '#FF8C00', '#FFA500', '#FFFF00', '#F0E68C', '#ADFF2F', '#7FFF00', '#00FF00'];
// Update the actual NPS element
$('#component-' + nps_id + ' label span').each(function (i, v) {
$(v).html(
'<span class="glyphicon glyphicon-star" style="font-size: 35px;color:' +
color[i] +
'"><span style="position: absolute;top: 9px;text-align: center;width: 100%;left: -1px;color: white;font-family: arial;font-weight: bold;font-size: 15px;border-radius: 4px;">' +
i +
'</span></span>'
);
});
// Update labels
$('#component-' + nps_id + ' .control-label').removeClass('pull-right').removeClass('pull-left');