Input Table font format is inconsistent on email notifications

Powstatan

Asked on September 11, 2017 at 5:06 PM

Hello,

I am having huge problems controlling the fonts in my email responses. Recently I had to retype several parts of the form itself because the font was tiny on certain random items. Now, only those sections I retyped are showing up as the correct size on my emails, and none of them are the correct font family.

My form: https://www.jotform.com/build/72485295953167

Please help!!!
Support_Management Jotform Support

Replied on September 11, 2017 at 6:28 PM

I tested this on a cloned copy of your form and noticed the problem with the Input Tables.

This inconsistent font formatting is not caused by your email template. It's caused by the HTML/CSS codes you have entered on the Input Table itself. There's a chance you copied and pasted these items from a website or a document and pasted them as is (which retained some of the formatting). Here's what I mean:

To fix this, you can:

1. Either remove all the HTML/CSS codes there.

2. Or to make it easier, copy and repaste them as "plain text" (instead of pasting with CTRL+V, paste with CTRL+SHIFT+V).

Example:

You would need to do these on all the Input Tables that show HTML/CSS codes on the FIELDS tab.
Powstatan

Replied on September 11, 2017 at 8:03 PM

This worked perfectly. I'm blown away by the speed and quality of your response. Thank you so much!
Powstatan

Replied on September 11, 2017 at 8:37 PM

Sorry, but I may have spoke too soon. I did what you said and re-pasted everything as plain text, and when I first check my email response, the fonts look like they should:

However, when I double click the email so that it pops out (so you can see the whole table), it reverts to this:

Do you know why it would do this? Thanks again.
Powstatan

Replied on September 11, 2017 at 9:14 PM

It might have something to do with the fact that I'm using the web app version of Outlook. By going through and deleting all the html code, I at least made it so that it's uniform.
Kevin Support Team Lead

Replied on September 11, 2017 at 9:29 PM

Apologies for the inconveniences this may have caused to you.

I have just cloned your form and tested it with two different email providers, both seem to be working as expected, here are some screenshots:

1. Gmail:

2. Outlook:

May you please try formatting the text using the toolbar on the email wizard:

Please let us know how it goes.
Powstatan

Replied on September 12, 2017 at 9:01 AM

Hello,

I just tried that, and selected size 12 font and arial, and it seems to have messed up my formatting even more. Below is a screenshot of what it is now:

What is going on??
TREVON

Replied on September 12, 2017 at 11:08 AM

I cloned the form tested but could not replicate the error. However when I inserted css code I noticed changes on how the email contents were being displayed.

To insert CSS follow as shown in demo below. Use this code

.form-matrix-row-headers, .form-matrix-column-headers {
    font-size: 1em;
    font-weight: normal;
    color: #444;
}

Hope this helps. Kindly feel free to let us know if the issue is resolved.
Powstatan

Replied on September 12, 2017 at 1:21 PM

Hello,

Unfortunately, this didn't change anything in my email. As a workaround, I've enabled PDF attachments, so my users can open that and read it. I'm starting to think this is an outlook issue. My school system uses outlook 2013 (desktop) and outlook exchange 2010 (in-browser).

For whatever reason, the web app is forcing 7.5 halvetica bold (I chose this font, but a bigger size and not bold), and the desktop is forcing 7.5 times new roman bold. The only other piece of information I have is that in the web version, everything looks great if you don't double-click the email (so that it pops out in its own window). Very strange. I've included screenshots of that strange phenomenon.

Inline:

Same message popped out:

If this is an outlook problem, I'm really surprised that you guys haven't heard of this happening before. I read on stack overflow that "Outlook strips the <head> section from emails so an external CSS cannot be used." I'm not sure if this applies to our situation. Any more ideas? I really appreciate all this help.
Kevin Support Team Lead

Replied on September 12, 2017 at 1:51 PM

This is a weird issue that we cannot replicate on our end, I can only think that there may be a setting that may be setting that format to the text on the email notifications.

I would recommend you to try changing the font style injecting CSS code to the email source code directly.

Just as a test, you may clone your form and remove all the other fields except the Input Table where you're experiencing the issue, this way you do not alter your entire form and just text if this works.

Here is a visual reference about where you may add the CSS code:

Here is a link what will help you with the basic CSS properties to change font color, size and weight: https://www.w3schools.com/css/css_text.asp

Please let us know how it goes.