How can I make my custom autoresponder email?

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

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.

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.

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

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.

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.

Hello,

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

How do I fix this?

Regards,

Brian Kan

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

Let us know how it goes.

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

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.

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?

Regards,

Brian

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

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

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.

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

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

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

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

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:

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.

Greetings,

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

Thanks

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

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

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

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