Email Templates - Done
6 min
HTML
HTML
<div data-w-tab="Email Templates" class="sub-tab-content-area w-tab-pane">
<div class="tab-content-container">
<div>
<h2>Email Templates</h2>
<div class="subheading">Configure the emails that will be sent to your PulseCheck audience</div>
</div>
<div data-current="Initial Email" data-easing="ease" data-duration-in="300" data-duration-out="100" class="tabs-2 w-tabs">
<div class="tabs-menu-2 w-tab-menu">
<a data-w-tab="initial-email" class="sub-sub-tab left w-tab-link w--current">
<div>Initial Email</div>
</a>
<a data-w-tab="first-reminder" class="sub-sub-tab w-tab-link">
<div>First Reminder</div>
</a>
<a data-w-tab="second-reminder" class="sub-sub-tab right w-tab-link">
<div>Second Reminder</div>
</a>
</div>
<div class="w-tab-content">
<!-- Tab 1 - Initial Email Configuration Tab -->
<div data-w-tab="initial-email" class="sub-sub-tab-content w-tab-pane w--tab-active" role="tabpanel">
<!-- Section Header -->
<div class="section-header">
<h3 id="initial-email-heading">Initial Email</h3>
<div class="subheading">Configure the content of the initial PulseCheck email</div>
</div>
<!-- Main Grid Layout -->
<div class="w-layout-grid grid-2x1">
<!-- Form Column -->
<div class="form-wrapper">
<form id="initial-email-config-form" name="initial-email-config-form" data-name="Initial Email Configuration" method="post" class="form-column">
<div class="form-list">
<!-- From Name Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="initial_from_name" class="field-label">From Name</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for From Name -->
<span data-tippy-content="The name that will appear in the recipient's inbox as the sender of the email. This is typically your organization's name." class="help-tooltip" aria-describedby="tooltip-initial-from-name" tabindex="0" role="button" aria-label="Help for From Name field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-initial-from-name" class="sr-only">The name that will appear in the recipient's inbox as the sender of the email. This is typically your organization's name.</div>
</div>
<input class="form-field w-input" maxlength="256" name="initial_from_name" data-name="From Name" data-preview-target="#preview-from-name" placeholder="Acme Corporation" type="text" id="initial_from_name" required aria-required="true" value="Acme Corporation">
</div>
<!-- Subject Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="initial_email_subject" class="field-label">Email Subject</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Subject -->
<span data-tippy-content="The subject line of your email that recipients will see in their inbox. Keep it clear, engaging, and under 60 characters for best results." class="help-tooltip" aria-describedby="tooltip-initial-email-subject" tabindex="0" role="button" aria-label="Help for Email Subject field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-initial-email-subject" class="sr-only">The subject line of your email that recipients will see in their inbox. Keep it clear, engaging, and under 60 characters for best results.</div>
</div>
<input class="form-field w-input" maxlength="256" name="initial_email_subject" data-name="Email Subject" data-preview-target="#preview-email-subject" placeholder="Our survey is short, but it matters." type="text" id="initial_email_subject" required aria-required="true" value="Our survey is short, but it matters.">
</div>
<!-- Preview Text Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="initial_preview_text" class="field-label">Email Preview Text</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Preview Text -->
<span data-tippy-content="The short summary text that appears in the inbox preview after the subject line. This gives recipients additional context before opening the email." class="help-tooltip" aria-describedby="tooltip-initial-preview-text" tabindex="0" role="button" aria-label="Help for Email Preview Text field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-initial-preview-text" class="sr-only">The short summary text that appears in the inbox preview after the subject line. This gives recipients additional context before opening the email.</div>
</div>
<input class="form-field w-input" maxlength="256" name="initial_preview_text" data-name="Preview Text" data-preview-target="#preview-preview-text" placeholder="We value your feedback" type="text" id="initial_preview_text" required aria-required="true" value="We value your feedback">
</div>
<!-- Email Body Before Survey Link -->
<div class="form-field-container">
<div class="field-label-container">
<label for="initial_email_body_before" class="field-label">Email Body (Before Survey Link)</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Email Body Before -->
<span data-tippy-content="The main content that appears at the beginning of your email before the survey button. Introduce the purpose of your survey and why the recipient's feedback matters." class="help-tooltip" aria-describedby="tooltip-initial-email-body-before" tabindex="0" role="button" aria-label="Help for Email Body Before field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-initial-email-body-before" class="sr-only">The main content that appears at the beginning of your email before the survey button. Introduce the purpose of your survey and why the recipient's feedback matters.</div>
</div>
<textarea id="initial_email_body_before" name="initial_email_body_before" maxlength="2000" data-name="Email Body Before" data-preview-target="#preview-body-before" placeholder="Hello John,
Thank you for choosing Acme Corporation. We strive to provide exceptional experiences and value your feedback.
Would you take a moment to let us know how we're doing? Your input is valuable and will help us improve." required class="form-field text-area w-input" aria-required="true">Hello John,
Thank you for choosing Acme Corporation. We strive to provide exceptional experiences and value your feedback.
Would you take a moment to let us know how we're doing? Your input is valuable and will help us improve.</textarea>
<!-- Variable insertion bar -->
<div class="variable-insert-bar" role="toolbar" aria-label="Variable insertion options">
<span>Insert Variable:</span>
<span data-variable-value="{{name}}" class="variable-button" role="button" tabindex="0">Name</span>
</div>
</div>
<!-- Separator for Survey Button -->
<div class="separator" aria-hidden="true">
<span class="separator-line"></span>
<span>Survey Button Will Appear Here</span>
<span class="separator-line"></span>
</div>
<!-- Email Body After Survey Link -->
<div class="form-field-container">
<div class="field-label-container">
<label for="initial_email_body_after" class="field-label">Email Body (After Survey Link)</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Email Body After -->
<span data-tippy-content="The content that appears after the survey button. Include a thank you message and signature. Keep it brief and appreciative." class="help-tooltip" aria-describedby="tooltip-initial-email-body-after" tabindex="0" role="button" aria-label="Help for Email Body After field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-initial-email-body-after" class="sr-only">The content that appears after the survey button. Include a thank you message and signature. Keep it brief and appreciative.</div>
</div>
<textarea id="initial_email_body_after" name="initial_email_body_after" maxlength="2000" data-name="Email Body After" data-preview-target="#preview-body-after" placeholder="Your feedback helps us improve and better meet your needs.
Thank you for your time and continued support.
Best regards,
The Acme Team" required class="form-field text-area w-input" aria-required="true">Your feedback helps us improve and better meet your needs.
Thank you for your time and continued support.
Best regards,
The Acme Team</textarea>
<!-- Variable insertion bar -->
<div class="variable-insert-bar" role="toolbar" aria-label="Variable insertion options">
<span>Insert Variable:</span>
<span data-variable-value="{{name}}" class="variable-button" role="button" tabindex="0">Name</span>
</div>
</div>
<!-- Action Buttons -->
<div class="flex space-between">
<!-- Reset Button -->
<div>
<button type="button" id="initial_reset_button" class="button danger" aria-label="Reset form to default values">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18,28A12,12,0,1,0,6,16v6.2L2.4,18.6,1,20l6,6,6-6-1.4-1.4L8,22.2V16H8A10,10,0,1,1,18,26Z"></path></svg></span>
<span>Reset to Default</span>
</button>
</div>
<!-- Save and Test Buttons -->
<div class="flex">
<!-- Test Email Button -->
<button type="button" id="initial_test_email_button" class="button secondary" aria-label="Send a test email">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="16.59 20.41 20.17 24 20.17 24 16.58 27.59 18 29 23 24 18 19 16.59 20.41"></polygon><polygon points="23.59 20.41 27.17 24 27.17 24 23.58 27.59 25 29 30 24 25 19 23.59 20.41"></polygon><path d="M14,23H4V7.91l11.43,7.91a1,1,0,0,0,1.14,0L28,7.91V17h2V7a2,2,0,0,0-2-2H4A2,2,0,0,0,2,7V23a2,2,0,0,0,2,2H14ZM25.8,7,16,13.78,6.2,7Z"></path></svg></span>
<span>Send Test</span>
</button>
<!-- Save Changes Button -->
<button type="button" id="initial_save_changes_button" class="button" aria-label="Save your changes">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.71,9.29l-5-5A1,1,0,0,0,22,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V10A1,1,0,0,0,27.71,9.29ZM12,6h8v4H12Zm8,20H12V18h8Zm2,0V18a2,2,0,0,0-2-2H12a2,2,0,0,0-2,2v8H6V6h4v4a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6.41l4,4V26Z"></path></svg></span>
<span>Save Changes</span>
</button>
</div>
</div>
<!-- Information Alert Box -->
<div class="alert-box" role="alert">
<span class="alert-icon" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"></path></svg></span>
<span>To send a test email to yourself, save the template first, then use the "Send Test" button to send the email.</span>
</div>
</div>
</form>
</div>
<!-- Email Preview Column -->
<div class="preview-wrapper">
<div class="email-preview-container" aria-labelledby="email-preview-title">
<!-- Preview Header -->
<div class="email-preview-header-title">
<span class="icon _20" aria-hidden="true"><svg fill="currentColor" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6ZM25.8,8,16,14.78,6.2,8ZM4,24V8.91l11.43,7.91a1,1,0,0,0,1.14,0L28,8.91V24Z" transform="translate(0)"></path></svg></span>
<h4 id="email-preview-title" class="heading-4 white">Email Preview</h4>
</div>
<!-- Email Meta Information -->
<div class="email-preview-header" role="region" aria-label="Email metadata">
<table>
<tbody>
<tr>
<td><div><strong>From:</strong></div></td>
<td><div id="preview-from-name"></div></td>
</tr>
<tr>
<td><div><strong>To:</strong></div></td>
<td><div>John Smith <[email protected]></div></td>
</tr>
<tr>
<td><div><strong>Subject:</strong></div></td>
<td><div id="preview-email-subject"></div></td>
</tr>
<tr>
<td><div><strong>Preview:</strong></div></td>
<td><div id="preview-preview-text"></div></td>
</tr>
</tbody>
</table>
</div>
<!-- Email Content Preview -->
<div class="email-preview-body" role="region" aria-label="Email content preview">
<!-- Company Logo -->
<img loading="lazy" src="../images/360Pulse-LogoWordmark.svg" alt="360Pulse Logo" class="email-preview-logo">
<!-- Content Before Survey Button -->
<div id="preview-body-before" class="email-preview-paragraph"></div>
<!-- Survey Button -->
<button type="button" class="email-preview-survey-link-container" aria-label="Survey button example">
<!-- Emotion Icons -->
<span class="flex">
<!-- Positive/Happy Icon -->
<span class="pulsecheck-question-option-icon positive" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
<!-- Neutral Icon -->
<span class="pulsecheck-question-option-icon neutral" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="15" x2="16" y2="15"></line><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
<!-- Negative/Sad Icon -->
<span class="pulsecheck-question-option-icon negative" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
</span>
<!-- Survey Description -->
<span class="survey-description">
<span class="email-preview-survey-link-heading">Your opinion matters</span>
<span>Complete in 1-2 minutes</span>
</span>
<!-- Survey Call-to-Action Button -->
<span class="button">Take the Survey</span>
</button>
<!-- Survey Features Grid -->
<div class="w-layout-grid grid-3x1" role="list">
<!-- Feature 1: Quick & Easy -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span>
<div>
<span class="email-preview-feature-heading">Quick & Easy</span>
<span>Brief survey<br></span>
</div>
</div>
<!-- Feature 2: Help Us Improve -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
<div>
<span class="email-preview-feature-heading">Help Us Improve</span>
<span>We value your input<br></span>
</div>
</div>
<!-- Feature 3: Share Comments -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></span>
<div>
<span class="email-preview-feature-heading">Share Comments</span>
<span>Tell us your thoughts<br></span>
</div>
</div>
</div>
<!-- Content After Survey Button -->
<div id="preview-body-after" class="email-preview-paragraph"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab 2 - First Reminder Email Configuration Tab -->
<div data-w-tab="first-reminder" class="sub-sub-tab-content w-tab-pane" role="tabpanel">
<!-- Section Header -->
<div class="section-header">
<h3 id="first-reminder-heading">First Reminder</h3>
<div class="subheading">Configure the content of the first reminder email</div>
</div>
<!-- Main Grid Layout -->
<div class="w-layout-grid grid-2x1">
<!-- Form Column -->
<div class="form-wrapper">
<!-- Main form with email configuration fields -->
<form id="first-reminder-config-form" name="first-reminder-config-form" data-name="First Reminder Email Configuration" method="post" class="form-column">
<div class="form-list">
<!-- From Name Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="first_reminder_from_name" class="field-label">From Name</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for From Name -->
<span data-tippy-content="The name that will appear in the recipient's inbox as the sender of the email. This is typically your organization's name." class="help-tooltip" aria-describedby="tooltip-first-reminder-from-name" tabindex="0" role="button" aria-label="Help for From Name field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-first-reminder-from-name" class="sr-only">The name that will appear in the recipient's inbox as the sender of the email. This is typically your organization's name.</div>
</div>
<input class="form-field w-input" maxlength="256" name="first_reminder_from_name" data-name="First Reminder From Name" data-preview-target="#reminder-from-name" placeholder="Acme Corporation" type="text" id="first_reminder_from_name" required aria-required="true" value="Acme Corporation">
</div>
<!-- Subject Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="first_reminder_subject" class="field-label">Email Subject</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Subject -->
<span data-tippy-content="The subject line of your email that recipients will see in their inbox. Keep it clear, engaging, and under 60 characters for best results." class="help-tooltip" aria-describedby="tooltip-first-reminder-subject" tabindex="0" role="button" aria-label="Help for Email Subject field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-first-reminder-subject" class="sr-only">The subject line of your email that recipients will see in their inbox. Keep it clear, engaging, and under 60 characters for best results.</div>
</div>
<input class="form-field w-input" maxlength="256" name="first_reminder_subject" data-name="First Reminder Subject" data-preview-target="#reminder-email-subject" placeholder="Reminder: We'd love to hear from you" type="text" id="first_reminder_subject" required aria-required="true" value="Reminder: We'd love to hear from you">
</div>
<!-- Preview Text Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="first_reminder_preview_text" class="field-label">Email Preview Text</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Preview Text -->
<span data-tippy-content="The short summary text that appears in the inbox preview after the subject line. This gives recipients additional context before opening the email." class="help-tooltip" aria-describedby="tooltip-first-reminder-preview" tabindex="0" role="button" aria-label="Help for Email Preview Text field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-first-reminder-preview" class="sr-only">The short summary text that appears in the inbox preview after the subject line. This gives recipients additional context before opening the email.</div>
</div>
<input class="form-field w-input" maxlength="256" name="first_reminder_preview_text" data-name="First Reminder Preview Text" data-preview-target="#reminder-preview-text" placeholder="Your continued feedback is important to us" type="text" id="first_reminder_preview_text" required aria-required="true" value="Your continued feedback is important to us">
</div>
<!-- Email Body Before Survey Link -->
<div class="form-field-container">
<div class="field-label-container">
<label for="first_reminder_body_before" class="field-label">Email Body (Before Survey Link)</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Email Body Before -->
<span data-tippy-content="The main content that appears at the beginning of your email before the survey button. Introduce the purpose of your survey and why the recipient's feedback matters." class="help-tooltip" aria-describedby="tooltip-first-reminder-body-before" tabindex="0" role="button" aria-label="Help for Email Body Before field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-first-reminder-body-before" class="sr-only">The main content that appears at the beginning of your email before the survey button. Introduce the purpose of your survey and why the recipient's feedback matters.</div>
</div>
<textarea id="first_reminder_body_before" name="first_reminder_body_before" maxlength="2000" data-name="First Reminder Body Before" data-preview-target="#reminder-body-before" placeholder="Hello John,
This is a friendly reminder about our satisfaction pulse check we sent earlier this month.
Your ongoing feedback is invaluable to us as we strive to improve your experience with our organization. This brief survey only takes a minute or two to complete." required class="form-field text-area w-input" aria-required="true">Hello John,
This is a friendly reminder about our satisfaction pulse check we sent earlier this month.
Your ongoing feedback is invaluable to us as we strive to improve your experience with our organization. This brief survey only takes a minute or two to complete.</textarea>
<!-- Variable insertion toolbar -->
<div class="variable-insert-bar" role="toolbar" aria-label="Variable insertion options">
<span>Insert Variable:</span>
<span data-variable-value="{{name}}" class="variable-button" role="button" tabindex="0">Name</span>
</div>
</div>
<!-- Survey Button Separator -->
<div class="separator" aria-hidden="true">
<span class="separator-line"></span>
<span>Survey Button Will Appear Here</span>
<span class="separator-line"></span>
</div>
<!-- Email Body After Survey Link -->
<div class="form-field-container">
<div class="field-label-container">
<label for="first_reminder_body_after" class="field-label">Email Body (After Survey Link)</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Email Body After -->
<span data-tippy-content="The content that appears after the survey button. Include a thank you message and signature. Keep it brief and appreciative." class="help-tooltip" aria-describedby="tooltip-first-reminder-body-after" tabindex="0" role="button" aria-label="Help for Email Body After field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-first-reminder-body-after" class="sr-only">The content that appears after the survey button. Include a thank you message and signature. Keep it brief and appreciative.</div>
</div>
<textarea id="first_reminder_body_after" name="first_reminder_body_after" maxlength="2000" data-name="First Reminder Body After" data-preview-target="#reminder-body-after" placeholder="Thank you for being a valued part of our community.
Best regards,
The Acme Team" required class="form-field text-area w-input" aria-required="true">Thank you for being a valued part of our community.
Best regards,
The Acme Team</textarea>
<!-- Variable insertion toolbar -->
<div class="variable-insert-bar" role="toolbar" aria-label="Variable insertion options">
<span>Insert Variable:</span>
<span data-variable-value="{{name}}" class="variable-button" role="button" tabindex="0">Name</span>
</div>
</div>
<!-- Form Action Buttons -->
<div class="flex space-between">
<div>
<!-- Reset button -->
<button type="button" id="first_reminder_reset_button" class="button danger" aria-label="Reset form to default values">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18,28A12,12,0,1,0,6,16v6.2L2.4,18.6,1,20l6,6,6-6-1.4-1.4L8,22.2V16H8A10,10,0,1,1,18,26Z"></path></svg></span>
<span>Reset to Default</span>
</button>
</div>
<div class="flex">
<!-- Send test email button -->
<button type="button" id="first_reminder_test_button" class="button secondary" aria-label="Send a test email">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="16.59 20.41 20.17 24 20.17 24 16.58 27.59 18 29 23 24 18 19 16.59 20.41"></polygon><polygon points="23.59 20.41 27.17 24 27.17 24 23.58 27.59 25 29 30 24 25 19 23.59 20.41"></polygon><path d="M14,23H4V7.91l11.43,7.91a1,1,0,0,0,1.14,0L28,7.91V17h2V7a2,2,0,0,0-2-2H4A2,2,0,0,0,2,7V23a2,2,0,0,0,2,2H14ZM25.8,7,16,13.78,6.2,7Z"></path></svg></span>
<span>Send Test</span>
</button>
<!-- Save changes button -->
<button type="button" id="first_reminder_save_button" class="button" aria-label="Save your changes">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.71,9.29l-5-5A1,1,0,0,0,22,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V10A1,1,0,0,0,27.71,9.29ZM12,6h8v4H12Zm8,20H12V18h8Zm2,0V18a2,2,0,0,0-2-2H12a2,2,0,0,0-2,2v8H6V6h4v4a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6.41l4,4V26Z"></path></svg></span>
<span>Save Changes</span>
</button>
</div>
</div>
<!-- Alert Box -->
<div class="alert-box" role="alert">
<span class="alert-icon" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"></path></svg></span>
<span>To send a test email to yourself, save the template first, then use the "Send Test" button to send the email.</span>
</div>
</div>
</form>
</div>
<!-- Email Preview Column -->
<div class="preview-wrapper">
<div class="email-preview-container" aria-labelledby="reminder-email-preview-title">
<!-- Email Preview Header -->
<div class="email-preview-header-title">
<span class="icon _20" aria-hidden="true"><svg fill="currentColor" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6ZM25.8,8,16,14.78,6.2,8ZM4,24V8.91l11.43,7.91a1,1,0,0,0,1.14,0L28,8.91V24Z" transform="translate(0)"></path></svg></span>
<h4 id="reminder-email-preview-title" class="heading-4 white">Email Preview</h4>
</div>
<!-- Email Metadata Preview -->
<div class="email-preview-header" role="region" aria-label="Email metadata">
<table>
<tbody>
<tr>
<td><div><strong>From:</strong></div></td>
<td><div id="reminder-from-name"></div></td>
</tr>
<tr>
<td><div><strong>To:</strong></div></td>
<td><div>John Smith <[email protected]></div></td>
</tr>
<tr>
<td><div><strong>Subject:</strong></div></td>
<td><div id="reminder-email-subject"></div></td>
</tr>
<tr>
<td><div><strong>Preview:</strong></div></td>
<td><div id="reminder-preview-text"></div></td>
</tr>
</tbody>
</table>
</div>
<!-- Email Body Preview -->
<div class="email-preview-body" role="region" aria-label="Email content preview">
<!-- Email Logo -->
<img loading="lazy" src="../images/360Pulse-LogoWordmark.svg" alt="360Pulse Logo" class="email-preview-logo">
<!-- First Paragraph (Before Survey) -->
<div id="reminder-body-before" class="email-preview-paragraph"></div>
<!-- Survey Button Preview -->
<button type="button" class="email-preview-survey-link-container" aria-label="Survey button example">
<span class="flex">
<!-- Feedback Icons -->
<span class="pulsecheck-question-option-icon positive" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
<span class="pulsecheck-question-option-icon neutral" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="15" x2="16" y2="15"></line><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
<span class="pulsecheck-question-option-icon negative" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
</span>
<span class="survey-description">
<span class="email-preview-survey-link-heading">Your opinion matters</span>
<span>Complete in 1-2 minutes</span>
</span>
<span class="button">Take the Survey</span>
</button>
<!-- Feature Blocks -->
<div class="w-layout-grid grid-3x1" role="list">
<!-- Quick & Easy Feature -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span>
<div>
<span class="email-preview-feature-heading">Quick & Easy</span>
<span>Brief survey<br></span>
</div>
</div>
<!-- Help Us Improve Feature -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
<div>
<span class="email-preview-feature-heading">Help Us Improve</span>
<span>We value your input<br></span>
</div>
</div>
<!-- Share Comments Feature -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></span>
<div>
<span class="email-preview-feature-heading">Share Comments</span>
<span>Tell us your thoughts<br></span>
</div>
</div>
</div>
<!-- Closing Text -->
<div id="reminder-body-after" class="email-preview-paragraph"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab 3 - Second Reminder Email Configuration Tab -->
<div data-w-tab="second-reminder" class="sub-sub-tab-content w-tab-pane" role="tabpanel">
<!-- Section Header -->
<div>
<h3 id="second-reminder-heading">Second Reminder</h3>
<div class="subheading">Configure the content of the second reminder email</div>
</div>
<!-- Main Grid Layout -->
<div class="w-layout-grid grid-2x1">
<!-- Form Column -->
<div>
<form id="second-reminder-config-form" name="second-reminder-config-form" data-name="Second Reminder Email Configuration" method="post" class="form-column">
<div class="form-list">
<!-- From Name Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="second_reminder_from_name" class="field-label">From Name</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for From Name -->
<span data-tippy-content="The name that will appear in the recipient's inbox as the sender of the email. This is typically your organization's name." class="help-tooltip" aria-describedby="tooltip-second-reminder-from-name" tabindex="0" role="button" aria-label="Help for From Name field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-second-reminder-from-name" class="sr-only">The name that will appear in the recipient's inbox as the sender of the email. This is typically your organization's name.</div>
</div>
<input class="form-field w-input" maxlength="256" name="second_reminder_from_name" data-name="Second Reminder From Name" data-preview-target="#second-reminder-from-name" placeholder="Acme Corporation" type="text" id="second_reminder_from_name" required aria-required="true" value="Acme Corporation">
</div>
<!-- Subject Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="second_reminder_subject" class="field-label">Email Subject</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Subject -->
<span data-tippy-content="The subject line of your email that recipients will see in their inbox. Keep it clear, engaging, and under 60 characters for best results." class="help-tooltip" aria-describedby="tooltip-second-reminder-subject" tabindex="0" role="button" aria-label="Help for Email Subject field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-second-reminder-subject" class="sr-only">The subject line of your email that recipients will see in their inbox. Keep it clear, engaging, and under 60 characters for best results.</div>
</div>
<input class="form-field w-input" maxlength="256" name="second_reminder_subject" data-name="Second Reminder Subject" data-preview-target="#second-reminder-email-subject" placeholder="Last chance to share your thoughts" type="text" id="second_reminder_subject" required aria-required="true" value="Last chance to share your thoughts">
</div>
<!-- Preview Text Field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="second_reminder_preview_text" class="field-label">Email Preview Text</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Preview Text -->
<span data-tippy-content="The short summary text that appears in the inbox preview after the subject line. This gives recipients additional context before opening the email." class="help-tooltip" aria-describedby="tooltip-second-reminder-preview" tabindex="0" role="button" aria-label="Help for Email Preview Text field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-second-reminder-preview" class="sr-only">The short summary text that appears in the inbox preview after the subject line. This gives recipients additional context before opening the email.</div>
</div>
<input class="form-field w-input" maxlength="256" name="second_reminder_preview_text" data-name="Second Reminder Preview Text" data-preview-target="#second-reminder-preview-text" placeholder="Quick feedback opportunity closing soon" type="text" id="second_reminder_preview_text" required aria-required="true" value="Quick feedback opportunity closing soon">
</div>
<!-- Email Body Before Survey Link -->
<div class="form-field-container">
<div class="field-label-container">
<label for="second_reminder_body_before" class="field-label">Email Body (Before Survey Link)</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Email Body Before -->
<span data-tippy-content="The main content that appears at the beginning of your email before the survey button. Introduce the purpose of your survey and why the recipient's feedback matters." class="help-tooltip" aria-describedby="tooltip-second-reminder-body-before" tabindex="0" role="button" aria-label="Help for Email Body Before field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-second-reminder-body-before" class="sr-only">The main content that appears at the beginning of your email before the survey button. Introduce the purpose of your survey and why the recipient's feedback matters.</div>
</div>
<textarea id="second_reminder_body_before" name="second_reminder_body_before" maxlength="2000" data-name="Second Reminder Body Before" data-preview-target="#second-reminder-body-before" placeholder="Hello John,
Our monthly PulseCheck survey will be closing soon, and we haven't heard from you yet.
Your perspective is important to us and helps ensure we're meeting your needs consistently. This brief check-in takes just 1-2 minutes to complete." required class="form-field text-area w-input" aria-required="true">Hello John,
Our monthly PulseCheck survey will be closing soon, and we haven't heard from you yet.
Your perspective is important to us and helps ensure we're meeting your needs consistently. This brief check-in takes just 1-2 minutes to complete.</textarea>
<!-- Variable insertion bar -->
<div class="variable-insert-bar" role="toolbar" aria-label="Variable insertion options">
<span>Insert Variable:</span>
<span data-variable-value="{{name}}" class="variable-button" role="button" tabindex="0">Name</span>
</div>
</div>
<!-- Survey Button Separator -->
<div class="separator" aria-hidden="true">
<span class="separator-line"></span>
<span>Survey Button Will Appear Here</span>
<span class="separator-line"></span>
</div>
<!-- Email Body After Survey Link -->
<div class="form-field-container">
<div class="field-label-container">
<label for="second_reminder_body_after" class="field-label">Email Body (After Survey Link)</label>
<span class="required-star" aria-hidden="true">*</span>
<!-- Help tooltip for Email Body After -->
<span data-tippy-content="The content that appears after the survey button. Include a thank you message and signature. Keep it brief and appreciative." class="help-tooltip" aria-describedby="tooltip-second-reminder-body-after" tabindex="0" role="button" aria-label="Help for Email Body After field"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg></span>
<div id="tooltip-second-reminder-body-after" class="sr-only">The content that appears after the survey button. Include a thank you message and signature. Keep it brief and appreciative.</div>
</div>
<textarea id="second_reminder_body_after" name="second_reminder_body_after" maxlength="2000" data-name="Second Reminder Body After" data-preview-target="#second-reminder-body-after" placeholder="Thank you for your continued support and for helping us improve.
Best regards,
The Acme Team" required class="form-field text-area w-input" aria-required="true">Thank you for your continued support and for helping us improve.
Best regards,
The Acme Team</textarea>
<!-- Variable insertion bar -->
<div class="variable-insert-bar" role="toolbar" aria-label="Variable insertion options">
<span>Insert Variable:</span>
<span data-variable-value="{{name}}" class="variable-button" role="button" tabindex="0">Name</span>
</div>
</div>
<!-- Action Buttons -->
<div class="flex space-between">
<!-- Reset Button -->
<div>
<button type="button" id="second_reminder_reset_button" class="button danger" aria-label="Reset form to default values">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18,28A12,12,0,1,0,6,16v6.2L2.4,18.6,1,20l6,6,6-6-1.4-1.4L8,22.2V16H8A10,10,0,1,1,18,26Z"></path></svg></span>
<span>Reset to Default</span>
</button>
</div>
<!-- Test and Save Buttons -->
<div class="flex">
<!-- Send Test Button -->
<button type="button" id="second_reminder_test_button" class="button secondary" aria-label="Send a test email">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon points="16.59 20.41 20.17 24 20.17 24 16.58 27.59 18 29 23 24 18 19 16.59 20.41"></polygon><polygon points="23.59 20.41 27.17 24 27.17 24 23.58 27.59 25 29 30 24 25 19 23.59 20.41"></polygon><path d="M14,23H4V7.91l11.43,7.91a1,1,0,0,0,1.14,0L28,7.91V17h2V7a2,2,0,0,0-2-2H4A2,2,0,0,0,2,7V23a2,2,0,0,0,2,2H14ZM25.8,7,16,13.78,6.2,7Z"></path></svg></span>
<span>Send Test</span>
</button>
<!-- Save Changes Button -->
<button type="button" id="second_reminder_save_button" class="button" aria-label="Save your changes">
<span class="icon _16" aria-hidden="true"><svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.71,9.29l-5-5A1,1,0,0,0,22,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V10A1,1,0,0,0,27.71,9.29ZM12,6h8v4H12Zm8,20H12V18h8Zm2,0V18a2,2,0,0,0-2-2H12a2,2,0,0,0-2,2v8H6V6h4v4a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V6.41l4,4V26Z"></path></svg></span>
<span>Save Changes</span>
</button>
</div>
</div>
<!-- Alert Box -->
<div class="alert-box" role="alert">
<span class="alert-icon" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"></path></svg></span>
<span>To send a test email to yourself, save the template first, then use the "Send Test" button to send the email.</span>
</div>
</div>
</form>
</div>
<!-- Email Preview Column -->
<div class="preview-wrapper">
<div class="email-preview-container" aria-labelledby="second-reminder-email-preview-title">
<!-- Preview Header -->
<div class="email-preview-header-title">
<span class="icon _20" aria-hidden="true"><svg fill="currentColor" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28,6H4A2,2,0,0,0,2,8V24a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V8A2,2,0,0,0,28,6ZM25.8,8,16,14.78,6.2,8ZM4,24V8.91l11.43,7.91a1,1,0,0,0,1.14,0L28,8.91V24Z" transform="translate(0)"></path></svg></span>
<h4 id="second-reminder-email-preview-title" class="heading-4 white">Email Preview</h4>
</div>
<!-- Email Meta Information -->
<div class="email-preview-header" role="region" aria-label="Email metadata">
<table>
<tbody>
<tr>
<td><div><strong>From:</strong></div></td>
<td><div id="second-reminder-from-name"></div></td>
</tr>
<tr>
<td><div><strong>To:</strong></div></td>
<td><div>John Smith <[email protected]></div></td>
</tr>
<tr>
<td><div><strong>Subject:</strong></div></td>
<td><div id="second-reminder-email-subject"></div></td>
</tr>
<tr>
<td><div><strong>Preview:</strong></div></td>
<td><div id="second-reminder-preview-text"></div></td>
</tr>
</tbody>
</table>
</div>
<!-- Email Content Preview -->
<div class="email-preview-body" role="region" aria-label="Email content preview">
<!-- Company Logo -->
<img loading="lazy" src="../images/360Pulse-LogoWordmark.svg" alt="360Pulse Logo" class="email-preview-logo">
<!-- Content Before Survey Button -->
<div id="second-reminder-body-before" class="email-preview-paragraph"></div>
<!-- Survey Button -->
<button type="button" class="email-preview-survey-link-container" aria-label="Survey button example">
<span class="flex">
<span class="pulsecheck-question-option-icon positive" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
<span class="pulsecheck-question-option-icon neutral" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="15" x2="16" y2="15"></line><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
<span class="pulsecheck-question-option-icon negative" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16 16s-1.5-2-4-2-4 2-4 2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg></span>
</span>
<span class="survey-description">
<span class="email-preview-survey-link-heading">Your opinion matters</span>
<span>Complete in 1-2 minutes</span>
</span>
<span class="button">Take the Survey</span>
</button>
<!-- Survey Features Grid -->
<div class="w-layout-grid grid-3x1" role="list">
<!-- Feature 1: Quick & Easy -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></span>
<div>
<span class="email-preview-feature-heading">Quick & Easy</span>
<span>Brief survey<br></span>
</div>
</div>
<!-- Feature 2: Help Us Improve -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
<div>
<span class="email-preview-feature-heading">Help Us Improve</span>
<span>We value your input<br></span>
</div>
</div>
<!-- Feature 3: Share Comments -->
<div class="email-preview-survey-feature-block" role="listitem">
<span class="icon _36 brand-color" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></span>
<div>
<span class="email-preview-feature-heading">Share Comments</span>
<span>Tell us your thoughts<br></span>
</div>
</div>
</div>
<!-- Content After Survey Button -->
<div id="second-reminder-body-after" class="email-preview-paragraph"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Javascript
Live update of Preview Panes
document.addEventListener('DOMContentLoaded', () => {
const fields = document.querySelectorAll('.form-field');
fields.forEach((field) => {
// Save the initial value as the previous valid value
field.dataset.prevValue = field.value;
let updateTimer;
// When the field gets focus, save its current (valid) value
field.addEventListener('focus', () => {
field.dataset.prevValue = field.value;
});
// Function to update the preview element based on the field value
const updatePreview = () => {
const targetSelector = field.getAttribute('data-preview-target');
if (targetSelector) {
const previewElement = document.querySelector(targetSelector);
if (previewElement) {
// For textareas, replace newlines with <br> tags so that line breaks are preserved
if (field.tagName.toLowerCase() === 'textarea') {
previewElement.innerHTML = field.value.replace(/\n/g, '<br>');
} else {
previewElement.textContent = field.value;
}
}
}
};
// Update preview in real time as the user types, with a slight delay (debounce)
field.addEventListener('input', () => {
clearTimeout(updateTimer);
updateTimer = setTimeout(() => {
updatePreview();
}, 200); // 200ms delay
});
// When the field loses focus, if it's empty (ignoring whitespace), restore the previous valid value.
field.addEventListener('blur', () => {
if (field.value.trim() === '') {
field.value = field.dataset.prevValue;
updatePreview();
} else {
updatePreview();
// Save this as the new valid value
field.dataset.prevValue = field.value;
}
});
// Trigger the blur event initially to populate preview elements (with cross-browser support)
let event;
if (typeof(Event) === 'function') {
event = new Event('blur');
} else {
event = document.createEvent('Event');
event.initEvent('blur', true, true);
}
field.dispatchEvent(event);
});
});Functions
"Send Test"
- Sends a test copy of the email to the email address of the logged in user (using their name as well) instantly on-click.
"Reset to Default"
- Restores all the fields on the same tab back to the 360Pulse defaults values.