Show Lightbox based on a condition AMP for EMAIL

Question

I have 2 lightboxes. 1 for showing error lightbox and 1 for showing success lightbox. I have a amp form and a input textfield where user enters a text. I need to compare the value entered by the user and based on the value show either 1 of the 2 lightbox.

If value matches the text to compare then show success lightbox else show error lightbox.

My question is how can I show 1 of the 2 lightboxes if a condition is met either true or false.

if true then show success lightbox and if false then show error lightbox.

I am using action-xhr = submitform.php and method="POST"

Also I would like to know what server side code do I need to write (if I am using php to test for matching text entered by user and how to retrieve the data sent back from the server in the form).

I am new to AMP for EMAIL and trying to do this for the first time.

If anybody can help I will really appreciate that.

If you need anymore details let me know.

How can I do it.

Regards, iceheros

I tried a lot of sample demos on the official website but could not find a concreate solution to the problem.

Answer 1

To show one of two lightboxes based on a condition being met, you can use the amp-state component to store the state of the condition, and then use amp-bind to bind the visibility of the lightboxes to the state.

For example, you can use the amp-state component to set an initial state for the condition:

<amp-state id="myState">
  <script type="application/json">
    {
      "showSuccess": false,
      "showError": false
    }
  </script>
</amp-state>

Then, you can bind the visibility of the success and error lightboxes to the state using the [hidden] attribute and the amp-bind component:

<div id="successLightbox" [hidden]="!myState.showSuccess">Success Lightbox</div>
<div id="errorLightbox" [hidden]="!myState.showError">Error Lightbox</div>

To compare the value entered by the user to the text you want to compare it to, you can use the amp-form component to submit the form data to a server-side script (e.g. submitform.php) and then use server-side code (e.g. PHP) to compare the values and set the state accordingly.

For example, in your submitform.php file, you can retrieve the input value using the $_POST variable, compare it to the text you want to compare it to, and then return the appropriate state to the client.

$inputValue = $_POST['inputValue'];
$textToCompare = "textToCompare";

if ($inputValue == $textToCompare) {
  $response = array("showSuccess" => true, "showError" => false);
} else {
  $response = array("showSuccess" => false, "showError" => true);
}

echo json_encode($response);

On the client side, you can use the amp-form component's on="submit-success" attribute to update the state with the response from the server:

Please adjust code to your needs and requirements