Resend Button for OTP via Email with Forms for Actions

Overview

This article explains how to add a Resend code button to Step Node using Forms for Actions. Use case: verify email addresses by sending OTP codes via email.

Applies To

  • Forms for Actions
  • OTP Verification

Solution

Add an extra first step and then the previous button at the screen where the users need to enter the code.

Example of how that extra first step could look like:

{
        "id": "step_abkS",
        "type": "STEP",
        "alias": "New step",
        "config": {
          "nextNode": "flow_3Qle",
          "components": [
            {
              "id": "rich_text_Xwb8",
              "type": "RICH_TEXT",
              "config": {
                "content": "<p>Hello! We need to verify your email.</p>"
              },
              "category": "BLOCK"
            },
            {
              "id": "next_button_cDil",
              "type": "NEXT_BUTTON",
              "config": {
                "text": "Start verification process"
              },
              "category": "BLOCK"
            }
          ]
        }

How the previous button could look like:

           {
              "id": "previous_button_ErZG",
              "type": "PREVIOUS_BUTTON",
              "config": {
                "text": "Re-send email"
              },
              "category": "BLOCK"
            }