Update NPS Element Design

The following guide will demonstrate how to update the NPS element design.

Example demo form template for import - https://app.formyoula.com/templates/import

[Demo Form] Custom NPS Design v1.2.json4.6KB
image

Please use the following JavaScript code on your form and update the "nps_id" with your NPS Field Id.

// 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');

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂