below is my email template, i want to send emails to people from my website and render the questions one after another. when user answers one question then next question is displayed . i have implemented the logic and it worked fine in the background . however when i sent it to gmail and yahoo the consequent input fields are not displayed even if i answer the first question.
<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
/* any custom styles go here. */
.hide {
display:none;
}
.show{
display:block;
}
</style>
</head>
<body>
<amp-state id="questionsState">
<script type="application/json">
{
"selectedQuestion": 1
}
</script>
</amp-state>
<form
action-xhr="https://emailmodo.vercel.app/api/receiveEmail"
method="POST"
>
<input type="hidden" name="emailId" id="emailId" value=${emailId?.toString()} />
<input type="hidden" name="uEmail" id="uEmail" value=${r?.toString()} />
<!-- Question 1 -->
<div class='show' [class]="questionsState.selectedQuestion >= 1 ? 'show' : 'hide'">
<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>
<!-- Your question 1 content here -->
<input type="date" name="question1" on="change:AMP.setState({questionsState: {selectedQuestion: 2} })" />
</div>
<!-- Question 2 -->
<div class='hide' [class]="questionsState.selectedQuestion >= 2 ? 'show' : 'hide'">
<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>
<!-- Your question 2 content here -->
<input type="date" name="question2" on="change:AMP.setState({questionsState:{ selectedQuestion: 3 }})" />
</div>
<!-- Question 3 -->
<div class='hide' [class]="questionsState.selectedQuestion >= 3 ? 'show' : 'hide'">
<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 type="date" name="question3" on="change:AMP.setState({questionsState:{selectedQuestion: 4} })" />
</div>
<!-- Question 4 -->
<div class='hide' [class]="questionsState.selectedQuestion >= 4 ? 'show' : 'hide'">
<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 type="date" name="question4" on="change:AMP.setState({questionsState:{selectedQuestion: 5} })" />
</div>
<!-- Question 5 -->
<div class='hide' [class]="questionsState.selectedQuestion >= 5 ? 'show' : 'hide'">
<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 type="date" name="question5" />
</div>
</form>
</body>
</html>