I have a react app in which i want to send form to users . I want to show the input field after user selects answer to previous question.
<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-custom>
body {
font-family: Arial, sans-serif;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div>
<form
action-xhr="https://myapp/api/receiveEmail"
method="POST"
>
<input type="hidden" name="emailId" id="emailId" value="${emailId?.toString()}" />
<input type="hidden" name="uEmail" id="uEmail" value="${r?.toString()}" />
<amp-state id="questionsState">
<script type="application/json">
{
"selectedQuestion": 1
}
</script>
</amp-state>
<amp-selector layout="container" name="questionSelector" on="select:AMP.setState({ selectedQuestion: event.targetOption })">
<div option="1" selected="selected"></div>
<div option="2"></div>
<div option="3"></div>
<div option="4"></div>
<div option="5"></div>
</amp-selector>
<template type="amp-mustache">
<!-- Question 1 -->
<section [hidden]="questionsState.selectedQuestion !== 1">
<label style="font-size: 18px; margin-bottom: 10px; color: #333">
1. Would you love to partner with KNOTOPIAN for your outsourcing projects?
</label>
<h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
If Yes, use the calendar to set up a quick sync-up at your convenience to
discuss further.
</h5>
<input
style="
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 5px;
box-sizing: border-box;
"
type="date"
name="question1"
/>
</section>
<!-- Question 2 -->
<section [hidden]="questionsState.selectedQuestion !== 2">
<label style="font-size: 18px; margin-bottom: 10px; color: #333">
2. Trust us, you are missing a great deal already! Okay, would you give us
a chance to display our portfolio?
</label>
<h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
If Yes, use the calendar to set up a quick sync-up at your convenience to
discuss further.
</h5>
<input
style="
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 5px;
box-sizing: border-box;
"
type="date"
name="question2"
/>
</section>
<!-- Question 3 -->
<section [hidden]="questionsState.selectedQuestion !== 3">
<label style="font-size: 18px; margin-bottom: 10px; color: #333">
3. Uhm, we still don’t want to miss a chance to let you know how much we
can help you! After all, we have a record of creating JAW-DROPPING
eLearning in just 7 days! Would you want to know how flexible is
Knotopian’s collaboration framework?
</label>
<h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
If Yes, use the calendar to set up a quick sync-up at your convenience to
discuss further.
</h5>
<input
style="
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 5px;
box-sizing: border-box;
"
type="date"
name="question3"
/>
</section>
<!-- Question 4 -->
<section [hidden]="questionsState.selectedQuestion !== 4">
<label style="font-size: 18px; margin-bottom: 10px; color: #333">
4. Ouch! Give us a FEW minutes and SAVE huge! You won’t regret. Just
letting you know our team will be available 24x7 to supporting your needs.
Cool, let’s think of the partnership later. But, how about a quick sync-up
to just know us better?
</label>
<h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
If Yes, use the calendar to set up a quick sync-up at your convenience to
discuss further.
</h5>
<input
style="
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 5px;
box-sizing: border-box;
"
type="date"
name="question4"
/>
</section>
<!-- Question 5 -->
<section [hidden]="questionsState.selectedQuestion !== 5">
<label style="font-size: 18px; margin-bottom: 10px; color: #333">
5. We just WON a LearnX Gold Award for one of our innovative learning
solutions. Just letting you know! And yeah, we still want to meet you.
After all, we both work towards the same goal – Creating Impactful
Learning.
</label>
<h5 style="font-size: 14px; color: #555; margin-bottom: 15px">
If Yes, use the calendar to set up a quick sync-up at your convenience to
discuss further.
</h5>
<input
style="
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 5px;
box-sizing: border-box;
"
type="date"
name="question5"
/>
</section>
</template>
<button
[class]="questionsState.selectedQuestion === 5 ? 'show' : 'hide'"
style="
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
margin-top: 10px;
"
type="submit"
>
Submit
</button>
</form>
</div>
</body>
</html>
This is the html i want to embed in my app .However when i send the email , the functionality doesnt work. is there any way i can implement this functionality? i have sent this email to gmail and yahoo . i only want each question to render after user answers previous question
Well there are number of ways you can solve this issue first of all add
<html ⚡4email >
<html ⚡4email data-css-strict>
After that now moving on to your issue of showing question one by one you can use hidden in amp to make it work with the state.
flow: at start set the question to 1 and show it like below [hidden]="selectedData.question> 1"
then on click or submit button of that question you can change the question number to 2 add add this to the div of second question data-amp-bind-hidden="selectedData.question<1" hidden
like that for all questions for saving their answers you need to create diffrent states that store that. hope it helps.