FormEmailer dropping CSS Inline to Gmail

46
May 02, 2021, at 01:00 AM

I have set up a FormEmailer script to run on a form/sheet I'm working on. The current aim is to have an email sent to a specific person after form submission with the questions and answers in a table (two columns, six rows).

Currently, my HTML code inside FormEmailer looks like this:

<h1>Hello!</h1>
<br>
<p>A new SAP Role request has been submitted to the Google Sheet. Please tend to this when you get a chance.</p>
<p>Thank you!</p>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 4px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<table>
    <thead>
        <tr>
            <th colspan="2">Form Submissions:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><b>Timestamp:</b></td>
            <td>#Timestamp|M/d/yyyy H:mm:ss#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Email Address:</b></td>
            <td>#Email Address#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Name, Department, Supervisor:</b></td>
            <td>#Name, Department, Supervisor#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>User ID:</b></td>
            <td>#User ID#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Department:</b></td>
            <td>#Department#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td><b>Job Responsibilities:</b></td>
            <td>#Job Responsibilities#</td>
        </tr>
    </tbody>
     
   
</table> 
                                    

Unfortunately, it appears that GMail strips CSS code in some way, so CSS inlining needs to be done. I adjusted my code to look like this after putting it through the Juice CSS Inliner on GitHub:

<h1>Hello!</h1>
<br>
<p>A new SAP Role request has been submitted to the Google Sheet. Please tend to this when you get a chance.</p>
<p>Thank you!</p>

<table class="gmail-table" style="border: solid 2px #DDEEEE;border-collapse: collapse;border-spacing: 0;font: normal 14px Roboto, sans-serif;">>
    <thead>
        <tr>
            <th colspan="2" style="background-color: #DDEFEF;border: solid 1px #DDEEEE;color: #336B6B;padding: 10px;text-align: left;text-shadow: 1px 1px 1px #fff;">Form Submissions:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Timestamp:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Timestamp|M/d/yyyy H:mm:ss#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Email Address:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Email Address#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Name, Department, Supervisor:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Name, Department, Supervisor#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>User ID:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#User ID#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Department:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Department#</td>
        </tr>
    </tbody>    
    <tbody>
        <tr>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;"><b>Job Responsibilities:</b></td>
            <td style="border: solid 1px #DDEEEE;color: #333;padding: 10px;text-shadow: 1px 1px 1px #fff;">#Job Responsibilities#</td>
        </tr>
    </tbody>
     
   
</table>

This makes the sent email even worse, dropping multiple elements from the final product. What's strange is that if I was to do the trick where you drop an emoji in an email in Gmail, inspect element, and replace that emoji's HTML with the HTML of the CSS Inliner code, that table formats just fine when I send it to myself.

So is FormEmailer stripping the CSS before it gets to Gmail? Or is there something I can do to format the code within FormEmailer so that it will come through as a table in a Gmail response?

READ ALSO
How to shift an array of posenet points?

How to shift an array of posenet points?

I'm a beginner at using p5js but I'm currently currently attempting to create a brush sketch like this ellipse brush

69
Cannot validate part of string in database

Cannot validate part of string in database

Working on a booking project; I want to check if the seat that the user has inputted is already taken on the database; if it has, then the query to add the booking to the database shouldn't be executedOtherwise, if it hasn't been taken, then the query can be executed

47
check checkboxes for values that exists in a list

check checkboxes for values that exists in a list

I am trying to check checkboxes that have values in a list of strings returned from a ModelForm class

67
How to convert pdf file to QR Code in Android

How to convert pdf file to QR Code in Android

Im working on a project to share a pdf file among users using QR CodeWhen the user scan the QR Code , they will get the same pdf file as the sender

69