Star Rating



Hide this field and map it in a connector if using Salesforce or other connector, if necessary.
Instructions

Radio Buttons

1. Create a Radio input type.
2. Add numbers to your Radio input choices. In this example, there are 5.
3. Under Options > Presentation > Choice Layout, make it horizontal
4. Make the Radio input type into a Variable and give it a name.
5. Give each value in the variable the 'opposite' value. For example, if you have 5 stars, give star 5 a value of 1, star 4 a value of 2, star 3 a value of 3, etc. 
6. Add the custom code to the Custom Code section of the Form options. Edit any class and ID tags to match your form's elements.

Rating Value field for Salesforce or other connectors

Here you will grab the star rating's values from the variable you created earlier. This is the field you want to map in your connector, and not the radio input field itself.

1. Make a new Text field, then under Options for this field, make it a calculated field. 
2. Input the name the variable you created earlier in the calculated field box.
3. Test before hiding the field.

The requirement for reversing the order of the stars is due the CSS code not working without doing this. Specifically, the hover effect. If you do not need the hover effect, then there is no need to reverse the order of the stars, but you will need to edit the code to reflect this as well.

Custom code
<script type="application/javascript">
window.addEventListener('DOMContentLoaded',function(){
// All Labels in the Radio Button element
const ratingLabel = document.querySelectorAll('.label.postField')
const radioBtns = document.querySelectorAll(".inputWrapper input[type='radio']")

ratingLabel.forEach((rating,index) =>{
rating.innerHTML = `&#9733` // change each label from text to a Star
    rating.addEventListener('click',()=>{
    updateStarColor(index) // updates color of stars before the one just selected
    rating.classList.add('full') // changes color for clicked selection
    })
})

function updateStarColor(idx){
  ratingLabel.forEach((choice,index)=>{
    if(index <= idx){
      choice.classList.remove('full')
    } else {
      choice.classList.add('full')
    }
  })
}  
  
})//END OF DOMCONTENTLOADED
</script>

<style type="text/css">
  .wForm .inputWrapper .choices.horizontal{
    display:flex !important; 
    flex-direction:row-reverse !important;
    /* This is required even if placed as horizontal in the Form Builder */
}
  .inputWrapper label{
    font-size:3rem;
    cursor:pointer;
  }
  
  /* This hides the radio buttons by default */
  .inputWrapper input[type="radio"]{
display:none !important;
  }
  
  .inputWrapper input[type="radio"].hide{
    display:inline-flex;
  }

  label.label.postField.full{
  color:orange !important;
  }
  .wFormContainer .htmlSection#tfa_11{
    margin:0px;
  }
  
/* As user hovers over the stars, this changes their colors */
  .wFormContainer label.label.postField:hover, .wForm span.oneChoice:hover ~ span.oneChoice label.postField {
    color:orange !important;
}

</style>

Contact Information