Hi,
I am trying to develop a AMP (Accelerated Mobile Page) form in AEM. It is a rating form where the user rates and writes a review,I also need to save this review in a database table.Please find the below code for the same:
<!doctype html>
<html amp>
<head>
<style amp-custom>
.rating {
--star-size: 3;
padding: 0;
border: none;
unicode-bidi: bidi-override; direction: rtl;
text-align: left;
user-select: none;
font-size: 3em;
font-size: calc(var(--star-size) * 1em);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
margin-bottom: 1em;
}
.rating > label {
display: inline-block;
position: relative;
width: 1.1em;
width: calc(var(--star-size) / 3 * 1.1em);
}
.rating > *:hover,
.rating > *:hover ~ label,
.rating:not(:hover) > input:checked ~ label {
color: transparent;
cursor: inherit;
}
.rating > *:hover:before,
.rating > *:hover ~ label:before,
.rating:not(:hover) > input:checked ~ label:before {
content: "★";
position: absolute;
left: 0;
color: gold;
}
.rating > input {
position: relative;
transform: scale(3);
transform: scale(var(--star-size));
top: -0.5em;
top: calc(var(--star-size) / 6 * -1em);
margin-left: -2.5em;
margin-left: calc(var(--star-size) / 6 * -5em);
z-index: 2;
opacity: 0;
font-size: initial;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
</style>
</head>
<body>
<form class="sample-form"
method="post"
action-xhr="/bin/rating.rest"
target="_top">
<input type="text"
name="name"
placeholder="Name..."
required>
<input type="email"
name="email"
placeholder="Email..."
required>
<input type="text"
name="title"
placeholder="Title..."
required>
<input type="textarea"
name="textarea"
placeholder="Feedback..."
required>
<input type="submit"
value="Subscribe">
<fieldset class="rating">
<input name="rating" type="radio" id="rating5" value="5" on="change:rating.submit">
<label for="rating5" title="5 stars">☆</label>
<input name="rating" type="radio" id="rating4" value="4" on="change:rating.submit">
<label for="rating4" title="4 stars">☆</label>
<input name="rating" type="radio" id="rating3" value="3" on="change:rating.submit" checked="checked">
<label for="rating3" title="3 stars">☆</label>
<input name="rating" type="radio" id="rating2" value="2" on="change:rating.submit" >
<label for="rating2" title="2 stars">☆</label>
<input name="rating" type="radio" id="rating1" value="1" on="change:rating.submit">
<label for="rating1" title="1 stars">☆</label>
</fieldset>
<div submit-success>
<template type="amp-mustache">
Success! Thanks {{name}} for trying the <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how <code>amp-form</code> handles errors.
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response.
</template>
</div>
</form>
</body>
</html>
But I am getting the below error:
javax.jcr.nodetype.ConstraintViolationException: No matching property definition: name = Test
Can anyone who has implemented AMP form in AEM help with this issue.
@AEM @smacdonald2008 @kautuk_sahni
