How can I make my custom autoresponder email?

  • Profile Image
    Skinopathy
    Asked on January 28, 2021 at 05: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

  • Profile Image
    Jed_C
    Answered 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.gif

    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.

  • Profile Image
    Skinopathy
    Answered 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

  • Profile Image
    Jed_C
    Answered 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

    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.

  • Profile Image
    Skinopathy
    Answered on January 29, 2021 at 04:03 PM

    Hello,


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


    How do I fix this?

    1611954221_6014782d58864_Regards,

    Brian Kan

  • Profile Image
    Jed_C
    Answered on January 29, 2021 at 07:11 PM

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

    1611965409_6014a3e142b9f_The Easiest Onl

    Let us know how it goes.

  • Profile Image
    Skinopathy
    Answered on January 31, 2021 at 04: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

  • Profile Image
    Sigit_W
    Answered on January 31, 2021 at 09: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.

  • Profile Image
    Skinopathy
    Answered on February 01, 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_


    Regards,

    Brian

  • Profile Image
    Alexander_G
    Answered on February 01, 2021 at 04: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




  • Profile Image
    Skinopathy
    Answered on February 01, 2021 at 04: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

  • Profile Image
    Jed_C
    Answered on February 01, 2021 at 06: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.

  • Profile Image
    Skinopathy
    Answered on February 02, 2021 at 08: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

  • Profile Image
    Jed_C
    Answered on February 02, 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

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

  • Profile Image
    Skinopathy
    Answered on February 03, 2021 at 01: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

  • Profile Image
    Jed_C
    Answered on February 03, 2021 at 07: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 Logo" /></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." 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="https://shots.jotform.com/jed/img/fast.png" alt="" 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="https://shots.jotform.com/jed/img/virtual.png" alt="" 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="https://shots.jotform.com/jed/img/ohip.png" alt="" 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 target="_blank" href="https://www.instagram.com" rel="nofollow noopener ugc"><img src="https://shots.jotform.com/jed/img/ig.png" alt="" width="50" height="50" /></a></td>
    <td style="width: 155px;"><a target="_blank" href="https://www.facebook.com" rel="nofollow noopener ugc"><img src="https://shots.jotform.com/jed/img/fb.png" alt="" width="50" height="50" /></a></td>
    <td style="width: 155px;"><a target="_blank" href="https://www.twitter.com" rel="nofollow noopener ugc"><img src="https://shots.jotform.com/jed/img/twitter.png" alt="" width="50" height="50" /></a></td>
    <td style="width: 155px;"><a target="_blank" href="https://www.youtube.com" rel="nofollow noopener ugc"><img src="https://shots.jotform.com/jed/img/yt.png" alt="" width="50" height="50" /></a></td>
    </tr>
    </tbody>
    </table>
    </center></td>
    </tr>
    </tbody>
    </table>

    Sample output:

    1612356602_601a9bfa4e8f6_autores.png

    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.

  • Profile Image
    Skinopathy
    Answered on February 08, 2021 at 10:32 PM


  • Profile Image
    Rehan_F
    Answered on February 09, 2021 at 01:57 AM

    Greetings,

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

    Thanks

  • Profile Image
    Skinopathy
    Answered on February 09, 2021 at 01: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

  • Profile Image
    Alexander_G
    Answered on February 09, 2021 at 03: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

  • Profile Image
    Jed_C
    Answered on February 09, 2021 at 06: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

  • Profile Image
    Skinopathy
    Answered 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

  • Profile Image
    Rehan_F
    Answered on February 19, 2021 at 02: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