<form class="m-user-rating js-user-rating" action="/mock/page-rating-response.json" method="GET" data-success-message="Vielen Dank für Ihr Feedback.">
<div class="user-rating__stars">
<h3 class="user-rating__headline">Wie bewerten Sie diesen Artikel?</h3>
<div class="a-rating-stars" role="group" aria-labelledby="rating-label">
<span class="sr-only" id="rating-label">Ihre Bewertung: </span>
<label class="rating-stars__star">
<input class="sr-only" type="radio" name="rating" value="1">
<span class="sr-only">Ihre Bewertung: 1 Stern</span>
<i class="a-icon rating-stars__icon" aria-hidden="true"></i>
</label>
<label class="rating-stars__star">
<input class="sr-only" type="radio" name="rating" value="2">
<span class="sr-only">Ihre Bewertung: 2 Sterne</span>
<i class="a-icon rating-stars__icon" aria-hidden="true"></i>
</label>
<label class="rating-stars__star">
<input class="sr-only" type="radio" name="rating" value="3">
<span class="sr-only">Ihre Bewertung: 3 Sterne</span>
<i class="a-icon rating-stars__icon" aria-hidden="true"></i>
</label>
<label class="rating-stars__star">
<input class="sr-only" type="radio" name="rating" value="4">
<span class="sr-only">Ihre Bewertung: 4 Sterne</span>
<i class="a-icon rating-stars__icon" aria-hidden="true"></i>
</label>
<label class="rating-stars__star">
<input class="sr-only" type="radio" name="rating" value="5">
<span class="sr-only">Ihre Bewertung: 5 Sterne</span>
<i class="a-icon rating-stars__icon" aria-hidden="true"></i>
</label>
</div>
</div>
<div class="user-rating__message" hidden>
<label class="a-label user-rating__label" for="bm-rating-textarea">
Haben Sie noch weitere Anmerkungen zu Ihrer Bewertung?
<span class="sr-only">Maximale Zeichenzahl: 1000</span>
</label>
<div class="user-rating__textarea-wrapper">
<textarea class="a-textarea " id="bm-rating-textarea" name="comment" placeholder="Wir freuen uns über Ihre Anregungen..." autocomplete="off" maxlength="1000"></textarea>
<div class="a-counter " data-target="#bm-rating-textarea" hidden>
<span class="counter__current"></span>
/
<span class="counter__max"></span>
</div>
</div>
<input type="hidden" name="webcode" value="">
<label class="a-label user-rating__name-label" for="ratingname" aria-hidden="true">
Name
</label>
<input type="text" value="" class="a-input user-rating__name" id="ratingname" name="name" autocomplete="off" tabindex="-1" aria-hidden="true">
<button class="a-btn btn--secondary js-rating-cancel" type="button">Abbrechen</button>
<button class="a-btn btn--primary js-rating-submit" type="submit">Abschicken</button>
</div>
<div class="user-rating__success-text" hidden>
<div class="a-richtext ">
<p>Vielen Dank für Ihr Feedback.<br><a href="#" class="bm-richtext-link">Link</a></p>
</div>
</div>
</form>
<form class="m-user-rating {{ viewtypes.specifier }}" action="{{ content.formUrl }}" method="{{ content.formMethod }}" data-success-message="{{ content.successHeadline }}">
<div class="user-rating__stars">
<h3 class="user-rating__headline">{{ content.ratingHeadline }}</h3>
{{ render '@rating-stars' partials.ratingStars merge=true }}
</div>
<div class="user-rating__message" hidden>
{{ render '@formelement-label' partials.textareaLabel merge=true }}
<div class="user-rating__textarea-wrapper">
{{ render '@formelement-textarea' partials.textarea merge=true }}
{{ render '@formelement-counter' partials.counter merge=true }}
</div>
<input type="hidden" name="webcode" value="{{ content.webcode }}">
{{ render '@formelement-label' partials.namelabel merge=true }}
{{ render '@formelement-input' partials.name merge=true }}
{{ render '@button--secondary' partials.btnCancel merge=true }}
{{ render '@button--primary' partials.btnSubmit merge=true }}
</div>
<div class="user-rating__success-text" hidden>
{{render '@richtext--default' this.partials.richtext merge=true}}
</div>
</form>
{
"switches": {},
"viewtypes": {
"specifier": "js-user-rating"
},
"content": {
"formUrl": "/mock/page-rating-response.json",
"formMethod": "GET",
"ratingHeadline": "Wie bewerten Sie diesen Artikel?",
"successHeadline": "Vielen Dank für Ihr Feedback.",
"webcode": ""
},
"partials": {
"textareaLabel": {
"switches": {},
"viewtypes": {
"specifier": "user-rating__label"
},
"content": {
"text": "Haben Sie noch weitere Anmerkungen zu Ihrer Bewertung?",
"for": "bm-rating-textarea",
"srOnlyText": "Maximale Zeichenzahl: 1000"
},
"partials": {}
},
"textarea": {
"switches": {
"isRequired": false
},
"viewtypes": {},
"content": {
"id": "bm-rating-textarea",
"name": "comment",
"placeholder": "Wir freuen uns über Ihre Anregungen...",
"autocomplete": "off",
"maxlength": "1000"
}
},
"counter": {
"switches": {
"isHidden": true
},
"content": {
"dataTarget": "#bm-rating-textarea"
}
},
"namelabel": {
"viewtypes": {
"specifier": "user-rating__name-label"
},
"content": {
"for": "ratingname",
"text": "Name",
"ariaAttributes": "aria-hidden=\"true\""
}
},
"name": {
"viewtypes": {
"specifier": "user-rating__name"
},
"content": {
"id": "ratingname",
"name": "name",
"autocomplete": "off",
"tabIndex": "-1",
"ariaHidden": "true"
}
},
"btnSubmit": {
"viewtypes": {
"specifier": "btn--primary js-rating-submit"
},
"content": {
"type": "submit",
"label": "Abschicken"
},
"partials": {}
},
"btnCancel": {
"switches": {},
"viewtypes": {
"specifier": "btn--secondary js-rating-cancel"
},
"content": {
"label": "Abbrechen"
},
"partials": {}
},
"richtext": {
"switches": {
"hasWrapper": true
},
"content": {
"text": "<p>Vielen Dank für Ihr Feedback.<br><a href=\"#\" class=\"bm-richtext-link\">Link</a></p>"
}
}
}
}
No notes defined.