Responsive Autorespond Mails

  • XARDS
    Asked on July 25, 2021 at 10:15 AM

    Hi there,

    I hired someone to do a responsive Email template for the autoresponder and I noticed that the E-Mails will not be adjusted on Mobile devices because the Jotform Mail Editor cuts out the <head> part where the responsiveness is being configured.

    Why is that and can I deactivate this, so my E-Mails will be displayed correctly on all devices?

    best regards

  • Carlos_C
    Replied on July 25, 2021 at 12:06 PM

    Hello There

    Thanks for contacting support.

    Is it possible to have a screenshot of the issue?

    Also, can you please provide us with the form URL, so we can check it.

    Regards

  • XARDS
    Replied on July 25, 2021 at 1:31 PM

    URL: https://eu.jotform.com/build/211695588745876

    On the screenshot you will see that everything is quite small and a little bit out of center.

    1627234287 60fd9fefcc384 IMG DFAF2B67AC9 Screenshot 10

  • Carlos_C
    Replied on July 25, 2021 at 3:02 PM

    In this case, the only way to edit this is by creating an HTML responsive code, you can ask a developer to create it for you, that way the autoresponder will fit the screen.

    Regards

  • XARDS
    Replied on July 25, 2021 at 5:26 PM

    I have a responsive HTML code but the responsive part is in the <head> section. And the Jotform Email editor will cut out everything that comes before the <body> section so the <head> part is always lost.

  • Billy JotForm Support
    Replied on July 25, 2021 at 11:28 PM

    Kindly share the code with us so we can consult our backend team if the code can be used for customizing the email notification.

    We'll be waiting for your response.

  • XARDS
    Replied on July 26, 2021 at 8:01 AM
     
    <!DOCTYPE html>
    
<html lang="de">
    
<head>
    
<meta charset="UTF-8">
    
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, shrink-to-fit=no">
    
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    
<meta name="x-apple-disable-message-reformatting">
    
<title> </title>
    
<style>
    
@media only screen and (max-width: 450px){
    
.break{
    
width: 100%!important; 
    
text-align: center!important;
    
display: block!important;
    
}
    
}
    

    
@media only screen and (max-width: 600px){
    
     .full_width{
    
width: 100%!important; 
    
}
    
}
    
</style>
    
</head>
    
<body style="margin: 0px; padding: 0px; font-family: arial; background: #f8f8fc;" bgcolor="#f8f8fc">


    This is the part that is being cut out

  • Carlos_C
    Replied on July 26, 2021 at 9:26 AM

    Hello There

    Thanks for sharing the code with us. Seems to be working on our end, the best advice will be that the person hired to create it, edit the code to fill your needs, unfortunately, edit these personalized codes are out of our scoop of support.

    Regards

  • XARDS
    Replied on July 26, 2021 at 1:44 PM

    I think we are misunderstanding each other. I have made a video to show you the problem:

    https://www.loom.com/share/6b99e4176af44b28a5687e6d523a2004

  • Carlos_C
    Replied on July 26, 2021 at 3:23 PM

    Hello There

    I'm sorry for the misunderstanding, I can see what the error is, however, the type of code you are trying to add is not supported for the autoresponder email, we can ask a feature request about this, just remember we do not have an estimated ETA for this type of requests, please let us know if you would like to request it.


    Regards

  • XARDS
    Replied on July 26, 2021 at 7:57 PM

    Hi,

    I have noticed that I am only having these display issues on mobile with one of the two emails despite the fact that they are almost the same. And after checking again I've seen that that email's appearance has changed from what it was before and that that is causing this displaying issue on mobile devices. I already opened a ticket because of this before down here:

    https://www.jotform.com/answers/3242870-autoresponder-mail-not-displayed-as-expected#3

    Now I put in the original code and now it looks fine again, also on mobile. But I've not changed anything significant in the code to cause such a change so I hope that this won't somehow be triggered again. If so I will get back to you here.

    No feature request necessary (yet), thank you.