How can I make my custom autoresponder email?

  • Skinopathy
    Asked on January 28, 2021 at 5:11 PM

    Hello,


    I am trying to recreate a page (see image attachment) for the autoresponder remail.


    I'm having quite a bit of difficulty doing so.


    There are gaps, things aren't consistent, the 3 grey rectangles near the bottom can't be copied to create consistency.


    How can I go about recreating my template exactly?


    Thanks,

    Brian Kan

    Jotform Thread 2857315 Screenshot
  • Jed_C
    Replied on January 28, 2021 at 10:09 PM

    I have checked your site https://getskinhelp.com/, but I'm unable to find the thank you page similar to what is shown in your sample screenshot. Would you mind sharing the link? It might be possible to copy that into your autoresponse email since it allows you to customize it with HTML?

    As for the 3 gray rectangular box, it's possible using the table tag. Please watch my screencast below.

    1611889740 60137c4c8b338 table Screenshot 10

    Please share to us the thank you page in your sample screenshot and we'll try to copy the format of the code.

    Looking forward for your response.

  • Skinopathy
    Replied on January 28, 2021 at 10:56 PM

    Hello,


    That thank you page doesn't currently exist on our website. It's my job to build it. What you see there is just a mock-up from our designer.


    I was asking for help in building it. I've looked through the tutorials and forums but nothing is quite what I'm looking for. I think if you look into the existing page at:


    Settings > Emails > Autoresponder 1


    You can see my attempts at it. Speaking of which: I uploaded the image of the woman and the image size is too big. I can't seem to control it with the frames. Do I have to manage the size on my end first or is there a responsive option from the autoresponder builder?


    Regards,

    Brian

  • Jed_C
    Replied on January 29, 2021 at 12:36 AM

    Do I have to manage the size on my end first or is there a responsive option from the autoresponder builder? — It can be either or. You can adjust the image even if it's in a larger pixel. Based on your mock up image, you will need to divide it by 5 (Logo, Heading, Header image, body and footer).

    It's similar to how you are creating a website, you should be able inject some basic HTML using the source button.

    1611898110 60139cfeea7a7 The Easiest Onl Screenshot 10

    I have cloned your form and it seems that you were able to modify the 3 gray box in your sample screenshot. I have made a cloned version of your form and made some modification. You can watch my screen recording here http://shots.jotform.com/jed/vid/2857315.webm.

    You may also download the images I've used from the links below.

    http://shots.jotform.com/jed/img/header_2857315.png

    http://shots.jotform.com/jed/img/logo_2857315.png

    I hope my screencast helps you. Let us know if you need further help.

  • Skinopathy
    Replied on January 29, 2021 at 4:03 PM

    Hello,


    There seems to be unwanted gaps that I can't remove.


    How do I fix this?

    1611954221 6014782d58864  Screenshot 10Regards,

    Brian Kan

  • Jed_C
    Replied on January 29, 2021 at 7:11 PM

    You can add style="margin-top: -14px;" into the source code. Please refer to my sample screenshot.

    1611965409 6014a3e142b9f The Easiest Onl Screenshot 10

    Let us know how it goes.

  • Skinopathy
    Replied on January 31, 2021 at 4:57 PM

    Hello,


    Is it possible to just rewrite the code entirely using CSS Grid instead of tables? I'm finding it difficult to style things using tables.


    Regards,

    Brian

  • Sigit JotForm Support
    Replied on January 31, 2021 at 9:42 PM

    Hi,

    Regarding "Is it possible to just rewrite the code entirely using CSS Grid instead of tables?"

    Yes, it is possible. As mentioned by my colleague "you should be able inject some basic HTML using the source button." on Thank You page.

    This means that your option is inline CSS, style tag on Thank You source page will be stripped.

    I hope that helps.

    Regards.

  • Skinopathy
    Replied on February 1, 2021 at 12:30 PM

    Hello!


    I've built out my custom auto responder under "Autoresponder 2".


    However, I'm noticing random <p> tags through out that creates unwanted spaces.


    It's not there in the source code but it's there in the actual email received.


    Why is that?


    1612200627 60183ab3c2ccc  Screenshot 10


    Regards,

    Brian

  • Alexander_G
    Replied on February 1, 2021 at 4:11 PM

    Hi, Brian!

    Thank you for your reply,


    I have cloned and tested your form. It seems that the system still recognizes the spaces between elements and adds <p> &nbsp.

    Hence, I am not sure that you can remove it from the email.



    Best Regards,

    Alex




  • Skinopathy
    Replied on February 1, 2021 at 4:38 PM

    Hello,


    What about the fact that it seems to be removing a number of my tags; namely my <section> tags?


    What is causing all these behaviours?


    Regards,

    Brian

  • Jed_C
    Replied on February 1, 2021 at 6:27 PM

    Unfortunately, I don't have a list of what HTML tags are allowed, but if it's stripped off after adding it then that means it's not allowed by the program.

  • Skinopathy
    Replied on February 2, 2021 at 8:45 PM

    Hello,

    I am trying to style those 3 grey boxes using grid.

    When I test for it via JotForms responder email, it allows it to "display: grid" but nothing more. I have 2 additional grid stylings I need to add:

    grid-template-columns: repeat(3, 33%);

    grid-column-gap: .5%;

    I've tried adding it like the other stylings and even as inline but neither are accepted. Can you help?

    It's under the class name: benefitSlates

    When it comes to layouts what is accepted?


    Regards,

    Brian

  • Jed_C
    Replied on February 2, 2021 at 10:01 PM

    I checked your autoresponse and I can see that the inline style was saved and styling was already applied.

    1612321263 601a11efe7ab8 The Easiest Onl Screenshot 10

    Can you please check again? Looking forward for your response.

  • Skinopathy
    Replied on February 3, 2021 at 1:49 AM

    Hello,


    It shows that is applied and the preview DOES show it BUT: when I actually go through my form and receive the autoresponder email, it's lacking many of the stylings.


    Please go through my form and see for yourself. Just remember to put in a valid email address you can access to receive the email.


    Best Regards,

    Brian

  • Jed_C
    Replied on February 3, 2021 at 7:52 AM

    I apologize for the late response. Please try replacing the code in your autoresponse with my code below.

    <table style="align-content: center; border: 5px outset black; text-align: center; border-spacing: 0px; height: 954px;" width="488">
    <tbody>
    <tr>
    <td style="align-content: center; width: 550px;"><img src="https://www.jotform.com/uploads/Skinopathy/form_files/logo_2857315.6014785727a7e1.81624510.png" alt="Get Skin Help Logo0" /></td>
    </tr>
    <tr>
    <td style="width: 550px;">
    <table style="height: 79px !important; background-color: #fbb040; width: 570px !important;">
    <tbody>
    <tr>
    <td style="width: 567px;"><span style="font-size: 14pt;"><strong>Thank you for registering on GetSkinHelp!</strong></span></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr>
    <td style="width: 550px;"><img src="https://www.jotform.com/uploads/Skinopathy/form_files/AdobeStock_200801527.60147790920a94.82438639.jpeg" alt="Asian woman looking at her cellphone.1" width="570px" height="400px" /></td>
    </tr>
    </tbody>
    <tbody>
    <tr>
    <td style="width: 550px;">
    <p>Congratulations for taking control of your skin health! Expect an email within one business day that will outline the details of your appointment.</p>
    <p>Do not hesitate to contact us if you have any questions, or go here for more information and to look at our FAQ.</p>
    <h4>A reminder of some of the benefits of using GetSkinHelp:</h4>
    <table style="height: 1px; width: 550px;">
    <tbody>
    <tr style="height: 1px;">
    <td style="width: 183px; height: 1px;">
    <table style="height: 250px; background-color: #d0cece;" width="183px">
    <tbody>
    <tr>
    <td style="width: 155px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://shots.jotform.com/jed/img/fast.png" alt="How can I make my custom autoresponder email? Image-2" width="132" height="122" /></td>
    </tr>
    <tr>
    <td style="width: 155px; text-align: center;">&nbsp;<strong>Faster</strong></td>
    </tr>
    <tr>
    <td style="width: 155px;">&nbsp;Why wait? We connect you faster to health specialists.</td>
    </tr>
    </tbody>
    </table>
    </td>
    <td style="width: 183px; height: 1px;">
    <table style="height: 250px; background-color: #d0cece;" width="183px">
    <tbody>
    <tr>
    <td style="width: 155px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://shots.jotform.com/jed/img/virtual.png" alt="How can I make my custom autoresponder email? Image-2" width="132" height="122" /></td>
    </tr>
    <tr>
    <td style="width: 155px; text-align: center;">&nbsp;<strong>Virtual</strong></td>
    </tr>
    <tr>
    <td style="width: 155px;">&nbsp;Get the consultation you need in the comfort of your own home.</td>
    </tr>
    </tbody>
    </table>
    </td>
    <td style="width: 183px; height: 1px;">
    <table style="height: 250px; background-color: #d0cece;" width="183px">
    <tbody>
    <tr>
    <td style="width: 155px;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://shots.jotform.com/jed/img/ohip.png" alt="How can I make my custom autoresponder email? Image-2" width="132" height="122" /></td>
    </tr>
    <tr>
    <td style="width: 155px; text-align: center;">&nbsp;<strong>OHIP-Covered</strong></td>
    </tr>
    <tr>
    <td style="width: 155px;">&nbsp;It's completely coverd within your health plan so no out-of-pocket expense.</td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    &nbsp;<center>Contact Us | Update Your Profile | Opt Out | Privacy Notice | Cookie Policy
    <table style="height: 1px; width: 10px;">
    <tbody>
    <tr>
    <td style="width: 155px;"><a href="https://www.instagram.com"><img src="http://shots.jotform.com/jed/img/ig.png" alt="How can I make my custom autoresponder email? Image-2" width="50" height="50" /></a></td>
    <td style="width: 155px;"><a href="https://www.facebook.com"><img src="http://shots.jotform.com/jed/img/fb.png" alt="How can I make my custom autoresponder email? Image-2" width="50" height="50" /></a></td>
    <td style="width: 155px;"><a href="https://www.twitter.com"><img src="http://shots.jotform.com/jed/img/twitter.png" alt="How can I make my custom autoresponder email? Image-2" width="50" height="50" /></a></td>
    <td style="width: 155px;"><a href="https://www.youtube.com"><img src="http://shots.jotform.com/jed/img/yt.png" alt="How can I make my custom autoresponder email? Image-2" width="50" height="50" /></a></td>
    </tr>
    </tbody>
    </table>
    </center></td>
    </tr>
    </tbody>
    </table>

    Sample output:

    1612356602 601a9bfa4e8f6 autores Screenshot 19

    You can try submitting my form here https://form.jotform.com/210331955698059 so you can see how it looks on your end.

    Let me know if you need further help.

  • Skinopathy
    Replied on February 8, 2021 at 10:32 PM


  • Rehan Support Team Lead
    Replied on February 9, 2021 at 1:57 AM

    Greetings,

    We've received an empty message from your end. Kindly send your reply again.

    Thanks

  • Skinopathy
    Replied on February 9, 2021 at 1:31 PM

    Sorry about that.


    My question is: I noticed that the design is different depending on the screen size (desktop vs mobile).


    How would I make this email more responsive?

    Best Regards,

    Brian

  • Alexander_G
    Replied on February 9, 2021 at 3:02 PM

    Hi, Brian!

    Thank you for contacting us.


    Please, allow us some time to bring you the answer.

    We will get back to you soon.


    Thanks,

    Alex

  • Jed_C
    Replied on February 9, 2021 at 6:35 PM

    There are two issues here:

    1). Jotform email only allowed a limited modification to it's source code.

    2). Each email client has their own rendering engine (not all, but some creates their own).

    The only workaround I see here is to put a question in your form asking them what email client are they using, then create a conditional email that will send your email notification designed for that email client.

    Due to the constraints, you'll need to design multiple notification for them to see the rendering correctly. Anther option is to just redirect them to your own website that has your own thank you page style so that they will only see one design.

    Guide: https://www.jotform.com/help/38-redirecting-users-to-a-different-page

  • Skinopathy
    Replied on February 19, 2021 at 12:51 AM

    Hello again!

    Thank you again for all your help on this. However, something else has come up:

    I am using the template you gave me (with minor modifications) on a new form:


    https://form.jotform.com/210466778464264


    However, it does not look like the formatting carried over properly. Before on my Outlook App it was aligned, but now, after moving it to the new form it's misaligned:


    Was there something holding the icons in the center?

    Regards,

    Brian

  • Rehan Support Team Lead
    Replied on February 19, 2021 at 2:04 AM

    Greetings Brian,

    I've created a new ticket so the issue can be handled separately. Following is the new ticket link:

    https://www.jotform.com/answers/2909668

    Thanks