What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Can I insert a HTML notification template for email

    Asked by ICMA on July 11, 2012 at 09:54 AM

    Hello,

    Is it possible to create my own HTML email notification template. Also is it possible when I design the HTML template to be able to address the individual id of the rows and columns of part of a  matrix.

     

    many thanks

    Scott

    Page URL:
    http://form.jotformeu.com/form/21923818180353

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 11, 2012 at 10:30 AM

    Scott

    Yes, it is possible to create your own HTML template for the email notification. However, bear in mind that emails are different from webpages, which means not all HTML elements can be used in an email.

    Also is it possible when I design the HTML template to be able to address the individual id of the rows and columns of part of a  matrix.

    Sadly, the notification e-mail source editor disallows the use of <style> tags (for CSS). Therefore, you will not be able to control the appearance of the matrix table.

  • Profile Image

    Answered by ICMA on July 11, 2012 at 10:47 AM

    HI,

    Thank you for your answer, but just to give you a little more information. I use Mail Designer to design the template (which is really cool software) it will generate all the code for me without me having to get my hands dirty with coding.

    So from what you are saying I cannot break down a matrix by addressing the indiviual id's of the rows and columns when using the email source editor, but will it accept the HTML code if I cut and pasted from Mail designer into the HTML part of the source editor?

    Many thanks

    Scott

  • Profile Image
    JotForm Support

    Answered by NeilVicente on July 11, 2012 at 11:13 AM

    It will accept the pasted HTML codes and will maintain the same look if the styling is done inline, or inside another html tag

    (for example: <td style="text-decoration: underline; padding: 5px !important;" bgcolor="#f9f9f9">)

    ...and not with CSS codes enclosed in <style></style> tags. Otherwise, most of the styling will be lost because the email source editor does not accept style tags.

    As for the matrix, I can see no possible way to change its appearance because the matrix is generated by our system upon sending [the email] and cannot be found anywhere in the email template.

    It would have been possible if style tags are allowed, but that is not the case.

  • Profile Image

    Answered by ICMA on July 11, 2012 at 11:19 AM

    Thank you, I will try and design one, and yes all styling would be inline anyway so things should work out just fine. I'll let you know how I get on :)

    Scott

  • Profile Image

    Answered by ICMA on July 11, 2012 at 01:30 PM

    Hi I have made a email template but when the email is recieved it is not HTML formatted, any ideas why?

    Here is the code I used in the template:

    <html><head><meta name="Generator" content="Made with Mail Designer from equinux - www.equinux.com/maildesigner"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; " background="page-bg.jpg" bgcolor="#ffffff"> <table width="100%" cellspacing="0" cellpadding="0" id="page-wrap" align="center" background="page-bg.jpg" bgcolor="#ffffff"> <tbody><tr> <td><table class="email-body-wrap" width="1020" cellspacing="0" cellpadding="0" id="email-body" align="center"> <tbody><tr> <td width="30" eqfixedwidth="true">&nbsp;<!-- Left page bg show-thru --></td> <td width="960" background="content-bg.jpg" bgcolor="#ffffff"> <!-- Begin of layout container --> <div id="eqLayoutContainer"> <div eqlayoutblock=""> <table width="960" cellpadding="0" cellspacing="0" align="center"> <tbody><tr> <td width="960" align="center"> <img width="960" height="39" alt="" style="display: block; " src="top.jpg" border="0"> </td> </tr> </tbody></table> </div> <div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="30">&nbsp;</td> <td width="900" valign="top" align="left"> <div class="heading" style="font-size: 16px; font-family: 'Lucida Grande'; "> <font face="Arial"><b><font class="Apple-style-span" style="font-size: 32px; " face="">ENTRY FORM</font><span class="Apple-style-span" style="font-size: 30px; ">&nbsp;</span></b></font><div><font class="Apple-style-span" face="Arial"><span class="Apple-style-span" style="font-size: 30px; "><b><br></b></span></font><div style="text-align: right; "><b><font class="Apple-style-span" face="Trebuchet MS" style="font-size: 20px; ">FORM ENTRY ID:&nbsp;{id}</font></b></div></div></div> </td> <td width="30">&nbsp;</td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="960" height="38" eqverticalspacer=""><div class="spacer"></div></td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="30">&nbsp;</td> <td width="900" valign="top" align="left"> <div class="text" style="font-size: 16px; font-family: 'Lucida Grande'; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">ENTERED BY: </span><span class="Apple-style-span" style="line-height: 24px; "><b>{enteredBy9}</b></span></font><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">APPLICANT'S FULL NAME:&nbsp;<b>{applicantsFull}</b></span></font></div><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">EMAIL:&nbsp;<b>{email}</b></span></font></div><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">DAYTIME TEL:&nbsp;<b>{daytimeTel16}&nbsp;</b>EVENING TEL<span class="Apple-tab-span" style="white-space:pre; "> </span>:&nbsp;<b>{eveningTel17}</b>&nbsp;EMERGENCY MOBILE TEL:&nbsp;<b>{emergencyMobile}</b></span></font><span class="Apple-tab-span" style="white-space:pre; "> </span><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; "><span class="Apple-tab-span" style="font-weight: bold; white-space: pre; "> </span></span></font></div></div> </td> <td width="30">&nbsp;</td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="960" height="20" eqverticalspacer=""><div class="spacer"></div></td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="30">&nbsp;</td> <td width="435" valign="top" align="left"> <div class="text" style="font-size: 16px; font-family: 'Lucida Grande'; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">ADDRESS - For All Communications:</span></font><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; "><b>{address11}</b></span></font></div></div> </td> <td width="30" eqfixedwidth="true">&nbsp;</td> <td width="435" valign="top" align="left"> <div class="text" style="font-size: 16px; font-family: 'Lucida Grande'; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">EXAMINATION ADDRESS - if different:</span><span class="Apple-style-span" style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; "> </span></span><span class="Apple-style-span" style="line-height: 24px; "> </span><span class="Apple-style-span" style="line-height: 24px; "><b>{examinationAddress61}</b></span></font></div> </td> <td width="30">&nbsp;</td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="960" height="31" eqverticalspacer=""><div class="spacer"></div></td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="30">&nbsp;</td> <td width="435" valign="top" align="left"> <div class="text" style="font-size: 16px; font-family: 'Lucida Grande'; "><div style="line-height: 24px; "><span class="Apple-style-span" style="font-family: 'Trebuchet MS'; line-height: 24px; ">INVIGILATOR'S NAME:<b>&nbsp;{invigilatorsName20}</b></span></div><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">INVIGILATOR'S ADDRESS:</span></font></div><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; "><b>{invigilatorsAddress}</b></span></font></div><div style="line-height: 24px; "><span class="Apple-style-span" style="font-family: 'Trebuchet MS'; line-height: 24px; "><b><br></b></span></div></div> </td> <td width="30" eqfixedwidth="true">&nbsp;</td> <td width="435" valign="top" align="left"> <div class="text" style="font-size: 16px; font-family: 'Lucida Grande'; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">INVIGILATOR'S TEL:&nbsp;<b>{invigilatorsTel21}</b></span></font></div> </td> <td width="30">&nbsp;</td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="960" height="20" eqverticalspacer=""><div class="spacer"></div></td> </tr> </tbody></table> </div><div eqlayoutblock=""><table width="960" cellspacing="0" cellpadding="0"> <tbody><tr> <td width="32">&nbsp;</td> <td width="896" valign="top" align="left"> <div class="text" style="font-size: 16px; font-family: 'Lucida Grande'; "><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">{candidates}</font></span><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; "><br></span></font><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">SUB-TOTAL ENTRY FEE:</font></span></div><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><b>£{subtotalEntry}</b><span class="Apple-tab-span" style="white-space: pre; "> </span></font></span></div></div><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><br></span></div><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">Please choose if you wish to give your candidates</font></span></div><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">gaining a distinction the opportunity to purchase a plaque:&nbsp;<b>{pleaseChoose}</b></font></span></div><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><br></span></div><div style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-style-span" style="line-height: 24px; ">1st choice examination date:&nbsp;<b>{1stExamination}</b></span></font><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-tab-span" style="white-space: pre; "> 2nd choice examination da</span>te:&nbsp;<span class="Apple-tab-span" style="white-space: pre; "><b>{stExamination53}</b></span></font></span></div><div style="line-height: 24px; "><span class="Apple-style-span" style="line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><span class="Apple-tab-span" style="white-space: pre; "><b><br></b></span></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">REQUESTED STARTING TIME:<b> {requestedStarting55}</b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">DATES AND TIMES TO BE AVOIDED:</font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><b>{datesAnd}</b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><b><br></b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">Please check box if you Agree to the above declaration:<b> {57}</b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">PLEASE SELECT WHICH PAYMENT OPTION:<b> {pleaseSelect80}</b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><b><br></b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">SUB-TOTAL ENTRY FEE:<b> <font class="Apple-style-span" style="font-size: 18px; " face="">£{subtotalEntry84}</font></b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">PayPal surcharge 3.4% of Sub-Total + 20p: <font class="Apple-style-span" style="font-size: 18px; " face=""><b>£{paypalSurcharge}</b></font></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS"><b><br></b></font></span></div><div style="line-height: 24px; "><span class="Apple-tab-span" style="white-space: pre; line-height: 24px; "><font class="Apple-style-span" face="Trebuchet MS">TOTAL FEES FOR THIS ENTRY (Sub-Total + PayPal surcharge): <b><span class="Apple-style-span" style="font-size: 20px; "><font class="Apple-style-span" color="#be010f" face="">£{totalFees50}</font></span> </b></font></span></div></div> </td> <td width="32">&nbsp;</td> </tr> </tbody></table> </div></div> <!-- End of layout container --> </td> <td width="30" eqfixedwidth="true">&nbsp;<!-- Right page bg show-thru --></td> </tr> </tbody></table><!-- email-body --> </td> </tr> <tr> <td height="30">&nbsp;<!-- Bottom page bg show-thru --></td> </tr> </tbody></table><!-- page-wrap --></body></html>

  • Profile Image
    JotForm Support

    Answered by Mike_T on July 11, 2012 at 07:52 PM

    Scott,

    I have copied provided code, and received formatted HTML email.

    Please note that generic HTML tags like <html><body> will be stripped by HTML Source Editor, but email will be sent in HTML format.

    If you need any further assistance, please let us know.

  • Profile Image

    Answered by ICMA on July 12, 2012 at 06:16 AM

    Hi Mike,

    Yes I have now stripped out the HTML headers etc and it's now working pretty good.

    One other thing I would like to insert into the template is the date and time of form submittion, what ID's should I use for this and how do I find them.

    Thank you again for all your help at JotForm, I'm very impressed by the service.

    Scott

  • Profile Image
    JotForm Support

    Answered by liyam on July 12, 2012 at 11:42 AM

    Hello Scott,

    You can read the details on this user guide on how to add date and time on your email template.

    Please let us know if you have further questions.

    Thanks.