Forms Email Notifications
Last updated
Last updated
1. Login to Sitefinity backend.
2. Navigate to the Content tab and then to Forms.
3. Select the Form that you want to customise the email template of, by clicking on the form link to edit it.
4. From the right panel select the Settings link.
Locate the Confirmation email section and tick the “Send email to form respondent checkbox”
6. Then proceed to click on the Customise email button located below the checkbox.
7. If you would like to use the template suggested in ticket 47782, in the content editor click on the HTML tab and then paste the following html in the editor
8. Press Save and then Publish
Copy the HTML for email template for Forms below and put in the content editor
<meta name="viewport" content="width=device-width" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>[Ready for Experience] Thank you for your registration and welcome!</title>
<style>/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&amp;amp;amp;amp;amp;amp;amp;amp;display=swap');
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #eaebed;
font-family: 'Montserrat', Arial, sans-serif sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
min-width: 100%;
width: 100%; }
table td {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY &amp;amp;amp;amp;amp;amp;amp;amp; CONTAINER
------------------------------------- */
.body {
background-color: #eaebed;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 580px;
padding: 0px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.header {
padding: 20px 0;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
Margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #9a9ea6;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #06090f;
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 30px;
font-weight: 600;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: 'Montserrat', Arial, sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #017EFF;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
min-width: 100%;
width: 100%; }
.btn > tr > td {
padding-bottom: 15px; }
.btn table {
min-width: auto;
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #017EFF;
border-radius: 5px;
box-sizing: border-box;
color: #017EFF;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #017EFF;
}
.btn-primary a {
background-color: #017EFF;
border-color: #017EFF;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
Margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 26px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
@media (min-width: 768px) {
.container,.body {
max-width: 700px;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #d5075d !important;
}
.btn-primary a:hover {
background-color: #d5075d !important;
border-color: #d5075d !important;
}
}
</style>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body k-table"><tbody><tr><td> </td>
<td class="container"><div class="header"><table border="0"><tbody><tr><td style="border:40px solid #017EFF;"><table role="presentation" border="0" bgcolor="#fff" style="background-color:#fff;border-width:0px;" cellpadding="0" cellspacing="0"><tbody><tr><td class="align-center" border="0" height="60" style="border-width:0px;padding-top:12px;"><a href="https://staging.readyforexperience.sg"><img src="https://staging.readyforexperience.sg/images/default-source/default-album/uplay-logo.png?sfvrsn=212c949_2" height="60" width="171" alt="Ready for experiecne" /></a>
</td>
</tr>
<tr><td class="align-center" border="0" style="border-width:0px;"><h1 style="margin-bottom:10px;">Thank you!</h1>
<p>Your submission has been received.</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div><div class="content"><!-- START CENTERED WHITE CONTAINER -->
<span class="preheader">Registration confirmation for [DATAFIELDContext.OwnerEntity.EventDetails.Title].</span>
<table role="presentation" class="main k-table"><!-- START MAIN CONTENT AREA -->
<tbody><tr><td class="wrapper"><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<p>In the meantime, you should check out our upcoming events and experiences. We would be delighted if you could join us.
</p>
<table border="0" style="border-collapse:separate;min-width:100%;width:100%;" cellspacing="0" cellpadding="0"><tbody><tr style=""><td style="text-align:center;padding:20px 20px 0px;border:0;font-family:'Montserrat', Arial, sans-serif;font-size:14px;vertical-align:top;" width="600" valign="top"><div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://staging.readyforexperience.sg/" style="height:33px;v-text-anchor:middle;width:200px;" arcsize="8%" stroke="f" fillcolor="#1773f7">
<w:anchorlock />
<center>
<![endif]-->
<a href="https://staging.readyforexperience.sg/" style="background-color:#1773f7;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:12px;font-weight:bold;line-height:33px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;-webkit-text-size-adjust:none;">START BROWSING</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div></td>
</tr>
</tbody></table>
</div><p>If you have any further questions, please contact us at
<a href="mailto:admin@readyforexperience.sg">
admin@readyforexperience.sg
</a>
</p>
<p>Thank you and we look forward to seeing you soon!
</p>
<p>Best regards,
</p>
<p><strong>Team UPlay</strong>
</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</tbody></table>
<!-- START FOOTER -->
<div class="footer"><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="content-block"> </td>
</tr>
<tr><td class="content-block powered-by">Powered by <a href="https://www.avionsoftware.com">Avalon</a>.
</td>
</tr>
</tbody></table>
</div><!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div></td>
<td> </td>
</tr>
</tbody></table>
