Sending AMP mail with Send Email node or Gmail node

Describe the issue/error/question

Is it possible to send an email with embedded form through Send email node or Gmail node in n8n?
I created an AMP html email and tested it on AMP playground. I sent the test mail from AMP playground to my Gmail and was able to submit my response in the embedded form in Gmail itself. I was able to submit my name and email id in the embedded form in Gmail. I copy pasted the same html code in Send Email node and Gmail node too, and tried the same. However the response are not getting submitted instead on clicking submit button it is opening a new tab with the same Gmail content.

What is the error message (if any)?

No error messages are show, somehow the amp mail is not sent as amp when using Gmail node or Send mail node.

Please share the workflow

  "meta": {
    "instanceId": "4a1d5d5144e1d06fa84217c508c3d70bbe46964ac5177d5b51e46752455d094c"
  },
  "nodes": [
    {
      "parameters": {
        "resource": "message",
        "subject": "AMP",
        "includeHtml": true,
        "htmlMessage": "<!doctype html>\n<html ⚡4email data-css-strict>\n<head>\n  <meta charset=\"utf-8\">\n  <script async src=\"https://cdn.ampproject.org/v0.js\"></script>\n  <script async custom-element=\"amp-form\" src=\"https://cdn.ampproject.org/v0/amp-form-0.1.js\"></script>\n  <script async custom-template=\"amp-mustache\" src=\"https://cdn.ampproject.org/v0/amp-mustache-0.2.js\"></script>  \n\n  <style amp4email-boilerplate>body{visibility:hidden}</style>\n  <style amp-custom>\n    h1 {\n      margin: 1rem;\n    }\n  </style>\n</head> \n<body>\n  <h1>Hello, I am an AMP EMAIL!</h1>\n  <h5>AMP mail</h5>\n\n  <form class=\"sample-form\" method=\"post\" action-xhr=\"https://upekkha-applications.app.n8n.cloud/webhook-test/ampTest\">\n  <input type=\"text\" name=\"Name\" placeholder=\"Name\" required>\n  <input type=\"email\" name=\"mailID\" placeholder=\"Email\" required>\n  <input type=\"submit\" value=\"Submit\">\n  <div submit-success>\n    <template type=\"amp-mustache\">\n      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.\n    </template>\n  </div>\n  <div submit-error>\n    <template type=\"amp-mustache\">\n      Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response.\n    </template>\n  </div>\n</form>\n</body>\n</html>\n",
        "message": "amp mail",
        "toList": [
          "[email protected]"
        ],
        "additionalFields": {}
      },
      "id": "4e74545f-82be-4a41-a5f0-5682bd51807d",
      "name": "Gmail",
      "type": "n8n-nodes-base.gmail",
      "typeVersion": 1,
      "position": [
        -20,
        500
      ],
      "credentials": {
        "gmailOAuth2": {
          "id": "34",
          "name": "upekkha Application G mail"
        }
      }
    },
    {
      "parameters": {
        "fromEmail": "[email protected]",
        "toEmail": "[email protected]",
        "subject": "AMP mail with Typeform and n8n",
        "html": "<!doctype html>\n<html ⚡4email data-css-strict>\n<head>\n  <meta charset=\"utf-8\">\n  <script async src=\"https://cdn.ampproject.org/v0.js\"></script>\n  <script async custom-element=\"amp-form\" src=\"https://cdn.ampproject.org/v0/amp-form-0.1.js\"></script>\n  <script async custom-template=\"amp-mustache\" src=\"https://cdn.ampproject.org/v0/amp-mustache-0.2.js\"></script>  \n\n  <style amp4email-boilerplate>body{visibility:hidden}</style>\n  <style amp-custom>\n    h1 {\n      margin: 1rem;\n    }\n  </style>\n</head>\n<body>\n  <h1>Hello, I am an AMP EMAIL!</h1>\n  <h5>AMP mail</h5>\n\n  <form class=\"sample-form\" method=\"post\" action-xhr=\"https://upekkha-applications.app.n8n.cloud/webhook-test/ampTest\">\n  <input type=\"text\" name=\"Name\" placeholder=\"Name\" required>\n  <input type=\"email\" name=\"mailID\" placeholder=\"Email\" required>\n  <input type=\"submit\" value=\"Submit\">\n  <div submit-success>\n    <template type=\"amp-mustache\">\n      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.\n    </template>\n  </div>\n  <div submit-error>\n    <template type=\"amp-mustache\">\n      Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response.\n    </template>\n  </div>\n</form>\n</body>\n</html>\n",
        "options": {
          "allowUnauthorizedCerts": false
        }
      },
      "id": "1237a21d-92ce-40e2-98fd-2f1ea1ac55e9",
      "name": "Send Email",
      "type": "n8n-nodes-base.emailSend",
      "typeVersion": 1,
      "position": [
        -20,
        660
      ],
      "credentials": {
        "smtp": {
          "id": "49",
          "name": "SMTP account"
        }
      }
    },
    {
      "parameters": {
        "httpMethod": "POST",
        "path": "ampTest",
        "options": {}
      },
      "id": "741da42c-eff7-4c47-aa15-75edd9a992ee",
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        -20,
        840
      ],
      "webhookId": "d2a6576c-d9f3-4f88-993f-ae743c0ff836"
    },
    {
      "parameters": {
        "values": {
          "string": [
            {
              "name": "Name",
              "value": "={{$json[\"body\"][\"Name\"]}}"
            },
            {
              "name": "Email Id",
              "value": "={{$json[\"body\"][\"mailID\"]}}"
            }
          ]
        },
        "options": {}
      },
      "id": "a009f837-1bcd-41db-b174-adbf005cac58",
      "name": "Set",
      "type": "n8n-nodes-base.set",
      "typeVersion": 1,
      "position": [
        200,
        840
      ]
    }
  ],
  "connections": {
    "Webhook": {
      "main": [
        [
          {
            "node": "Set",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
(Select the nodes and use the keyboard shortcuts CMD+C/CTRL+C and CMD+V/CTRL+V to copy and paste the workflow respectively)

Share the output returned by the last node

Information on your n8n setup

  • n8n version:
  • Database you’re using (default: SQLite):
  • Running n8n with the execution process [own(default), main]:
  • Running n8n via [Docker, npm, n8n.cloud, desktop app]:

Hey @Abhay,

I am not sure how much control we have over what a mailserver does to the body of the message, One thing I couldn’t see was how to send a message from the amp playground. A big help there would be to compare the email source between the 2 to see if maybe AMP Playground sends a different header.