<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Basin Autoresponder</title> <style> @import url("https://use.typekit.net/pbx1jyi.css"); </style> <style type="text/css"> #outlook a { padding: 0; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div, .ExternalClass blockquote { line-height: 100%; } .ExternalClass p, .ExternalClass blockquote { margin-bottom: 0; margin: 0; } #backgroundTable { margin: 0; padding: 0; width: 100% !important; line-height: 100% !important; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } .image_fix { display: block; } p { margin: 1em 0; } h1, h2, h3, h4, h5, h6 { color: black !important; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: black; } h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active { color: black; } h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited { color: black; } table td { border-collapse: collapse; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } a { color: #3498db; } p.domain a { color: black; } hr { border: 0; background-color: #d8d8d8; margin: 0; margin-bottom: 0; height: 1px; } @media (max-device-width: 667px) { a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #3498db; pointer-events: none; cursor: default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #3498db !important; pointer-events: auto; cursor: default; } h1[class="profile-name"], h1[class="profile-name"] a { font-size: 32px !important; line-height: 38px !important; margin-bottom: 14px !important; } span[class="issue-date"], span[class="issue-date"] a { font-size: 14px !important; line-height: 22px !important; } td[class="description-before"] { padding-bottom: 28px !important; } td[class="description"] { padding-bottom: 14px !important; } td[class="description"] span, span[class="item-text"], span[class="item-text"] span { font-size: 16px !important; line-height: 24px !important; } span[class="item-link-title"] { font-size: 17px !important; line-height: 24px !important; } span[class="item-header"] { font-size: 22px !important; } span[class="item-link-description"], span[class="item-link-description"] span { font-size: 14px !important; line-height: 22px !important; } .link-image { width: 84px !important; height: 84px !important; } .link-image img { max-width: 100% !important; max-height: 100% !important; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #3498db; pointer-events: none; cursor: default; } .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] { text-decoration: default; color: #3498db !important; pointer-events: auto; cursor: default; } } </style> </head> <body style="width:100% !important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;"> <table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="margin:0; padding:0; width:100% !important; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin-top:80px;" width="100%"> <tr> <td width="10" valign="top"> </td> <td valign="top" align="center"> <table cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 600px; background-color: #FFF; border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;" id="contentTable"> <tr> <td width="600" valign="top" align="center" style="border-collapse:collapse;"> <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; border: 1px solid #ECEFF3; box-shadow: 0 4px 4px 0 rgba(233,240,243,0.4); border-radius: 12px; padding: 52px;" width="100%"> <tr> <td align="left" style="padding-bottom: 22px;" valign="top"> <div style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #24292E;font-weight:bold;">Hey there!</div> </td> </tr> <tr> <td align="left" style="" valign="top"> <div style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #24292E;"> <p style="margin-top:0; margin-bottom: 0;">You just received a new submission to your <strong>form_name</strong> form. Here is the data that was collected...</p> <hr style="background-color: #ECEFF3; margin: 30px 0;" /> <!-- form_params --> {{#each form_params}} <p style="font-family: 'proxima-soft',sans-serif; line-height: 26px;font-size: 14px; color: #A0ABB2;font-weight:500; margin-top:0; margin-bottom:0;">{{this.name}}</p> <p style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #24292E;font-weight:400; margin-top:0; margin-bottom: 0;">{{this.value}}</p> <div style="margin-top:20px;"></div> {{/each}} <!-- end of form_params --> <!-- attachments --> <p style="font-family: 'proxima-soft',sans-serif; line-height: 26px;font-size: 14px; color: #A0ABB2;font-weight:500; margin-top:0; margin-bottom:0;">attachment(s)</p> {{#each attachment}} <p style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 17px; color: #02BAF2;font-weight:400; margin-top:0; margin-bottom: 0;"><a style="text-decoration: none;" href="{{this.public_url}}">{{this.name}}</a><span style="color: #C9CBCD; margin-left: 14px; font-size: 13px;">{{this.file_size}} bytes</span></p> {{/each}} <!-- end of attachments --> <!-- view_in_dashboard button --> <hr style="background-color: #F2F5F7; margin: 40px 0;" /> <div> <a style="background-color:#24292E;border-radius:4px;color:#FFFFFF;display:inline-block;font-family: 'proxima-soft', sans-serif;font-size:17px;line-height:36px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; padding: 4px 15px; font-weight: 400;" href="https://usebasin.com/dashboard/">View in your dashboard</a> </div> <!-- end of view_in_dashboard button --> </div> </td> </tr> </table> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td align="center" style="padding: 30px 52px 18px 52px;" valign="middle"> <span style="font-family: 'proxima-soft',sans-serif; line-height: 27px;font-size: 14px; color: #A7ADB5; vertical-align: middle;">Submission received at {{timestamp}}</span> </td> </tr> <tr> <td align="center" style="padding: 0 52px 52px 52px;" valign="middle"> <!-- business logo --> <img alt="Cool Company Logo" style="vertical-align: middle;" src="logo_url" /> <!-- end of business logo --> <!-- OR --> <!-- our standard logo --> <a style="border: 0;" href="https://usebasin.com"> <img alt="Powered by Basin" width="143" height="32" style="vertical-align: middle;" src="https://usebasin.com/powered_by_basin.png" /> </a> <!-- end of our standard logo --> </td> </tr> </table> </td> </tr> </table> </td> <td width="10" valign="top"> </td> </tr> </table> </body> </html>