SendGrid: How to put embed form to a HTML template mail when using SendGrid

I am building an app that would send out a HTML template mail thru SendGrid.

Now, I would like to include a Google form to embed in the HTML template mail to send the email with embedded Google form.

I have my HTML template as a string,

Basically looks like this,

const emailHTML = `
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
         <head>
          .....
         </head>
         <body>
          ....
            <iframe src=“https://docs.google.com/forms/d/e/.../viewform?embedded=true” width=“640" height=“1493” frameborder=“0" marginheight=“0” marginwidth=“0">Link</iframe>

        </body>
      </html>
`

Then I would pass this HTML string as html variable to the SendGrid API,

router.post('/send-email', (req, res) => {

    const { recipient, sender, topic, text, emailHTML } = req.body; 

    const msg = {
        to: recipient, 
        from: sender,
        subject: topic,
        text: text,
        html: emailHTML
    }

    sgMail.send(msg).then((msg) => { 
        res.json({ Message: msg })
    });
})

I tested and the email I received but not seeing the Google form embedded in the email.

How do I embed the Google form to the HTML template mail to send thru the SendGrid ?

Solution

You cannot use <iframe> to embed a Google form (or any form).

Some email clients won't accept forms at all, or have limited functionality if they render at all, but Google forms has an embed function available from their platform.

Essentially, on Google forms:

Make your form
Click 'send'
Insert your own Gmail address - this is just to get the code
Under 'Send via' choose 'Email'
Tick 'Include form in email'

See https://www.maketecheasier.com/embed-google-forms-in-email/ for full instructions.

Now, to get the actual code for insertion into SendGrid, you have to get the source code of the form from that email, and paste it into the HTML for the SendGrid email.

Essentially,

Open the email in Gmail Click on More (dropdown arrow in top right) -> Show Original Copy the relevant code

See https://gillandrews.com/embed-a-survey-in-email-newsletter-google-forms/ for full instructions.

I would also add a link in there for those who wanted to fill out the form directly on Google, rather than through email, because there will be some email clients that don't work.