星级评定表 - 电子邮件评级

Question

I have a form that has a star rating system. Users vote 1 through 5 stars. It works great on the front-end, however when it's emailed through it comes through like this:

'Rating-input-1: on'

I really want it to give me the number that they scored (1 - 5) rather than just 'on'. Any ideas? My HTML and CSS code is below, please let me know if you need anything else.

HTML:

<span class="rating">

         <input type="radio" class="rating-input"
            id="rating-input-1-1" name="rating-input-1">
        <label for="rating-input-1-1" class="rating-star"></label>
        <input type="radio" class="rating-input"
            id="rating-input-1-2" name="rating-input-1">
        <label for="rating-input-1-2" class="rating-star"></label>        
       <input type="radio" class="rating-input"
            id="rating-input-1-3" name="rating-input-1">
        <label for="rating-input-1-3" class="rating-star"></label>        
         <input type="radio" class="rating-input"
            id="rating-input-1-4" name="rating-input-1">
        <label for="rating-input-1-4" class="rating-star"></label>       
                <input type="radio" class="rating-input"
            id="rating-input-1-5" name="rating-input-1">
        <label for="rating-input-1-5" class="rating-star"></label>
    </span>

CSS:

.rating {
          overflow: hidden;
      }

      .rating-input {
          position: absolute;
          left: 0;
          top: -50px;
      }
      .rating:hover .rating-star:hover,
      .rating:hover .rating-star:hover ~ .rating-star,
      .rating-input:checked ~ .rating-star {
          background-position: 0 0;
      }
      .rating-star,
      .rating:hover .rating-star {
          float: right;
          display: block;
          width: 30px;
          height: 30px;
          background: url(images/stars2-2.png) 0 -30px;
      }

      .rating-star:hover {
            -webkit-transition: -webkit-width 0.5s;
    -moz-transition: -moz-width 0.5s;
    -ms-transition: -ms-width 0.5s;
    -o-transition: -o-width 0.5s;
    transition: width 0.5s;
      }

Answer 1

Maybe you can try to add 'value' attribute into every input. Like this:

<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" value="1">
<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" value="2">

</div>