Design & Branding - Done
1 min
HTML
<div data-w-tab="Design & Branding" class="sub-tab-content-area w-tab-pane" role="tabpanel" aria-labelledby="design-branding-tab">
<div class="tab-content-container">
<div>
<h2 id="design-branding-heading">Design & Branding</h2>
<div class="subheading" id="design-branding-description">Configure the emails that will be sent to your PulseCheck audience</div>
</div>
<div class="w-layout-grid grid-2x1">
<div>
<form id="design-branding-form" name="design-branding-form" data-name="Design Branding Form" method="get" class="form-column" aria-labelledby="design-branding-heading">
<div class="form-list">
<!-- Logo field -->
<div class="form-field-container">
<h3 id="branding-section" class="h4-wrapper">Branding</h3>
<div class="field-label-container">
<label for="brand-logo-upload" class="field-label">Logo</label>
<div class="required-star" aria-hidden="true">*</div>
<div data-tippy-content="The logo that will appear in your PulseCheck surveys. This helps recipients recognize your brand." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The logo that will appear in your PulseCheck surveys.">
<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>
</div>
</div>
<div class="pulsecheck-settings-logo-container" role="button" tabindex="0" aria-label="Upload logo" aria-describedby="logo-upload-desc">
<img loading="lazy" src="../images/Logo-Logo.svg" alt="Brand Logo" id="brand-logo" class="pulsecheck-brand-logo">
<div style="opacity:0" class="logo-upload-hover" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
</div>
<input type="file" id="brand-logo-upload" name="brand-logo-upload" accept="image/*" class="visually-hidden" aria-required="true">
</div>
<div id="logo-upload-desc" class="visually-hidden">Click to upload your company logo image</div>
</div>
<!-- Brand Name field -->
<div class="form-field-container">
<div class="field-label-container">
<label for="brand-name" class="field-label"><strong>Brand Name</strong></label>
<div class="required-star" aria-hidden="true">*</div>
<div data-tippy-content="The name of your organization that will appear in your PulseCheck surveys." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The name of your organization that will appear in your PulseCheck surveys.">
<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>
</div>
</div>
<input class="form-field w-input" maxlength="256" name="brand-name" placeholder="Enter your brand name" type="text" id="brand-name" required aria-required="true">
</div>
<!-- Colors & Design section -->
<div class="form-field-container">
<h3 id="colors-design-section" class="h3-wrapper">Colors & Design</h3>
<h4 id="colors-section" class="h4-wrapper">Colors</h4>
<div class="w-layout-grid color-picker-grid" role="group" aria-labelledby="colors-section">
<!-- Page Background color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="page-background-color" class="field-label"><strong>Page Background</strong></label>
<div data-tippy-content="The background color of the page surrounding your PulseCheck survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The background color of the page surrounding your PulseCheck survey.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-preview-container.backgroundcolor" data-colorpicker-value="#f5f7f8" class="color-picker" role="group" aria-labelledby="page-background-color-label">
<input type="color" id="page-background-color-picker" class="form-field" aria-label="Select page background color" value="#f5f7f8">
<input class="form-field color-picker w-input" maxlength="256" name="page-background-color" value="#f5f7f8" type="text" id="page-background-color" aria-label="Page background color hex value">
</div>
</div>
<!-- PulseCheck Background color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="pulsecheck-background-color" id="pulsecheck-background-color-label" class="field-label"><strong>PulseCheck Background</strong></label>
<div data-tippy-content="The background color of your PulseCheck survey container." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The background color of your PulseCheck survey container.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-preview.backgroundcolor" data-colorpicker-value="#ffffff" class="color-picker" role="group" aria-labelledby="pulsecheck-background-color-label">
<input type="color" id="pulsecheck-background-color-picker" class="form-field" aria-label="Select PulseCheck background color" value="#ffffff">
<input class="form-field color-picker w-input" maxlength="256" name="pulsecheck-background-color" value="#ffffff" type="text" id="pulsecheck-background-color" aria-label="PulseCheck background color hex value">
</div>
</div>
<!-- Brand Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="brand-color" id="brand-color-label" class="field-label"><strong>Brand Color</strong></label>
<div data-tippy-content="Your primary brand color that will be used for titles, selected options, and buttons." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Your primary brand color that will be used for titles, selected options, and buttons.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-title.color, pulsecheck-question-option:hover.outlinecolor, pulsecheck-question-option.selected.outlinecolor, pulsecheck-question-comment:focus.bordercolor, pulsecheck-question-comment:focus.outlinecolor, referral-question-option:hover.bordercolor, referral-question-option:hover.outlinecolor, referral-question-option:hover.backgroundcolor:0.07, referral-question-option.selected.bordercolor, referral-question-option.selected.outlinecolor, pulsecheck-complete-button.backgroundcolor" data-colorpicker-value="#13a2e4" class="color-picker" role="group" aria-labelledby="brand-color-label">
<input type="color" id="brand-color-picker" class="form-field" aria-label="Select brand color" value="#13a2e4">
<input class="form-field color-picker w-input" maxlength="256" name="brand-color" value="#13a2e4" type="text" id="brand-color" aria-label="Brand color hex value">
</div>
</div>
<!-- Brand Hover Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="brand-hover-color" id="brand-hover-color-label" class="field-label"><strong>Brand Hover Color</strong></label>
<div data-tippy-content="The color that appears when users hover over buttons and interactive elements." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color that appears when users hover over buttons and interactive elements.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-complete-button:hover.backgroundcolor" data-colorpicker-value="#108ac2" class="color-picker" role="group" aria-labelledby="brand-hover-color-label">
<input type="color" id="brand-hover-color-picker" class="form-field" aria-label="Select brand hover color" value="#108ac2">
<input class="form-field color-picker w-input" maxlength="256" name="brand-hover-color" value="#108ac2" type="text" id="brand-hover-color" aria-label="Brand hover color hex value">
</div>
</div>
<!-- Text Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="text-color" id="text-color-label" class="field-label"><strong>Text Color</strong></label>
<div data-tippy-content="The color of text throughout your PulseCheck survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color of text throughout your PulseCheck survey.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-preview.color" data-colorpicker-value="#616472" class="color-picker" role="group" aria-labelledby="text-color-label">
<input type="color" id="text-color-picker" class="form-field" aria-label="Select text color" value="#616472">
<input class="form-field color-picker w-input" maxlength="256" name="text-color" value="#616472" type="text" id="text-color" aria-label="Text color hex value">
</div>
</div>
<!-- Border Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="border-color" id="border-color-label" class="field-label"><strong>Border Color</strong></label>
<div data-tippy-content="The color of borders around questions and input fields." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color of borders around questions and input fields.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question.bordercolor, pulsecheck-question-comment.bordercolor, referral-question-option.bordercolor" data-colorpicker-value="#dee2e7" class="color-picker" role="group" aria-labelledby="border-color-label">
<input type="color" id="border-color-picker" class="form-field" aria-label="Select border color" value="#dee2e7">
<input class="form-field color-picker w-input" maxlength="256" name="border-color" value="#dee2e7" type="text" id="border-color" aria-label="Border color hex value">
</div>
</div>
<!-- Positive Feedback Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="positive-color" id="positive-color-label" class="field-label"><strong>Positive</strong></label>
<div data-tippy-content="The color used for positive feedback options in your survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color used for positive feedback options in your survey.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question-option-icon.positive.color" data-colorpicker-value="#34a853" class="color-picker" role="group" aria-labelledby="positive-color-label">
<input type="color" id="positive-color-picker" class="form-field" aria-label="Select positive feedback color" value="#34a853">
<input class="form-field color-picker w-input" maxlength="256" name="positive-color" value="#34a853" type="text" id="positive-color" aria-label="Positive feedback color hex value">
</div>
</div>
<!-- Neutral Feedback Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="neutral-color" id="neutral-color-label" class="field-label"><strong>Neutral</strong></label>
<div data-tippy-content="The color used for neutral feedback options in your survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color used for neutral feedback options in your survey.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question-option-icon.neutral.color" data-colorpicker-value="#ffb300" class="color-picker" role="group" aria-labelledby="neutral-color-label">
<input type="color" id="neutral-color-picker" class="form-field" aria-label="Select neutral feedback color" value="#ffb300">
<input class="form-field color-picker w-input" maxlength="256" name="neutral-color" value="#ffb300" type="text" id="neutral-color" aria-label="Neutral feedback color hex value">
</div>
</div>
<!-- Negative Feedback Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="negative-color" id="negative-color-label" class="field-label"><strong>Negative</strong></label>
<div data-tippy-content="The color used for negative feedback options in your survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color used for negative feedback options in your survey.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question-option-icon.negative.color" data-colorpicker-value="#fa4d56" class="color-picker" role="group" aria-labelledby="negative-color-label">
<input type="color" id="negative-color-picker" class="form-field" aria-label="Select negative feedback color" value="#fa4d56">
<input class="form-field color-picker w-input" maxlength="256" name="negative-color" value="#fa4d56" type="text" id="negative-color" aria-label="Negative feedback color hex value">
</div>
</div>
<!-- N/A Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="na-color" id="na-color-label" class="field-label"><strong>N/A</strong></label>
<div data-tippy-content="The color used for 'Not Applicable' options in your survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color used for 'Not Applicable' options in your survey.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question-option-icon.not-applicable.color" data-colorpicker-value="#dee2e7" class="color-picker" role="group" aria-labelledby="na-color-label">
<input type="color" id="na-color-picker" class="form-field" aria-label="Select N/A color" value="#dee2e7">
<input class="form-field color-picker w-input" maxlength="256" name="na-color" value="#dee2e7" type="text" id="na-color" aria-label="N/A color hex value">
</div>
</div>
<!-- Text Area Background Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="textarea-bg-color" id="textarea-bg-color-label" class="field-label"><strong>Text Area Background</strong></label>
<div data-tippy-content="The background color for comment fields and text input areas." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The background color for comment fields and text input areas.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question-comment.backgroundcolor" data-colorpicker-value="#ffffff" class="color-picker" role="group" aria-labelledby="textarea-bg-color-label">
<input type="color" id="textarea-bg-color-picker" class="form-field" aria-label="Select text area background color" value="#ffffff">
<input class="form-field color-picker w-input" maxlength="256" name="textarea-bg-color" value="#ffffff" type="text" id="textarea-bg-color" aria-label="Text area background color hex value">
</div>
</div>
<!-- Text Area Placeholder Color -->
<div class="form-field-container">
<div class="field-label-container">
<label for="textarea-placeholder-color" id="textarea-placeholder-color-label" class="field-label"><strong>Text Area Placeholder</strong></label>
<div data-tippy-content="The color of placeholder text in comment fields and text input areas." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: The color of placeholder text in comment fields and text input areas.">
<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>
</div>
</div>
<div data-colorpicker-update-classes="pulsecheck-question-comment.placeholder" data-colorpicker-value="#dee2e7" class="color-picker" role="group" aria-labelledby="textarea-placeholder-color-label">
<input type="color" id="textarea-placeholder-color-picker" class="form-field" aria-label="Select text area placeholder color" value="#dee2e7">
<input class="form-field color-picker w-input" maxlength="256" name="textarea-placeholder-color" value="#dee2e7" type="text" id="textarea-placeholder-color" aria-label="Text area placeholder color hex value">
</div>
</div>
</div>
</div>
<!-- Design Elements section -->
<div class="form-field-container">
<h4 id="design-elements-section" class="h4-wrapper">Design Elements</h4>
<div class="field-label-container">
<label for="corner-slider" id="corner-slider-label" class="field-label">Rounded Corners</label>
<div class="required-star" aria-hidden="true">*</div>
<div data-tippy-content="Adjust the roundness of corners for buttons, input fields, and containers in your survey." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Adjust the roundness of corners for buttons, input fields, and containers in your survey.">
<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>
</div>
</div>
<div class="flex full gap-1rem">
<div id="radius-example" class="pulsecheck-corner-radius-example" aria-hidden="true"></div>
<input id="corner-slider" name="corner-slider" type="range" min="0" max="2" step="0.01" class="slider" value="0.38" aria-required="true" aria-valuemin="0" aria-valuemax="2" aria-valuenow="0.38" aria-valuetext="0.38" aria-labelledby="corner-slider-label">
</div>
</div>
<!-- Hide Branding section -->
<div class="form-field-container">
<h3 id="remove-branding-section" class="h3-wrapper">Remove "Powered by 360Pulse" from your PulseCheck surveys</h3>
<div class="field-label-container">
<label for="hide-branding-toggle" id="hide-branding-label" class="field-label">Hide 360Pulse Branding</label>
<div data-tippy-content="Remove the 'Powered by 360Pulse' branding from your PulseCheck surveys. This feature is only available on Pro plans." class="help-tooltip" role="tooltip" tabindex="0" aria-label="Help: Remove the 'Powered by 360Pulse' branding from your PulseCheck surveys. This feature is only available on Pro plans.">
<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>
</div>
<a href="{open modal to upgrade subscription}" class="label-pro-icon w-inline-block" aria-label="Upgrade to Pro plan">
<div data-tippy-content="This feature is only available on the Pro plan.">Pro</div>
</a>
</div>
<div class="toggle-field-container">
<a id="hide-branding-toggle" href="#" data-ix="toggle" data-toggle-state="disabled" class="toggle-button w-inline-block" role="switch" aria-checked="false" aria-disabled="true" tabindex="0" aria-labelledby="hide-branding-label"></a>
</div>
</div>
<!-- Form action buttons -->
<div class="flex space-between">
<button type="button" id="reset-defaults" class="button danger w-inline-block" aria-label="Reset to Default">
<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>
<button type="button" id="save-changes" class="button w-inline-block" aria-label="Save 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>
</form>
</div>
<div>
<div class="pulsecheck-preview-container" role="region" aria-label="PulseCheck Preview">
<div class="email-preview-header-title">
<div 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>
</div>
<h4 class="heading-4 white">PulseCheck Preview</h4>
</div>
<div class="pulsecheck-preview">
<img loading="lazy" src="{PulseCheck Logo}" alt="Workspace Name (or override)" class="email-preview-logo">
<div>
<h1 class="pulsecheck-title">{Welcome Heading}</h1>
<p class="pulsecheck-welcome-paragraph">{Welcome Message}</p>
</div>
<form id="pulsecheck-preview" name="pulsecheck-preview" method="get" aria-label="PulseCheck survey preview">
<div class="pulsecheck-question" role="group" aria-label="Preview question">
<div class="pulsecheck-question-text" id="preview-question-1">{First Question}</div>
<div class="w-layout-grid pulsecheck-quetion-options-grid" role="radiogroup" aria-labelledby="preview-question-1">
<div class="pulsecheck-question-options">
<div class="pulsecheck-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="pulsecheck-question-option-icon positive" aria-label="Positive response">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" 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="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>
</div>
</div>
<div class="pulsecheck-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="pulsecheck-question-option-icon neutral" aria-label="Neutral response">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" 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><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>
</div>
</div>
<div class="pulsecheck-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="pulsecheck-question-option-icon negative" aria-label="Negative response">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" 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="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>
</div>
</div>
<div data-tipp="" class="pulsecheck-question-option selected" role="radio" aria-checked="true" tabindex="0">
<div class="pulsecheck-question-option-icon not-applicable" aria-label="Not applicable">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" 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><line x1="8" y1="12" x2="16" y2="12"></line></svg>
</div>
</div>
</div>
</div>
<textarea id="comment-box" name="comment-box" maxlength="2000" placeholder="Comment... " class="pulsecheck-question-comment w-input" disabled aria-label="Comment box (disabled in preview)"></textarea>
</div>
<div class="pulsecheck-question" role="group" aria-label="Preview NPS question">
<div class="pulsecheck-question-text" id="preview-nps-question">{NPS Question}</div>
<div class="referral-question-container-over">
<div class="referral-question-legend-label">0 = Not likely at all</div>
<div class="referral-question-legend-label">10 = Extremely likely</div>
</div>
<div class="referral-question-container" role="radiogroup" aria-labelledby="preview-nps-question">
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">1</div>
</div>
<div class="referral-question-option selected" role="radio" aria-checked="true" tabindex="0">
<div class="referral-question-option-text">2</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">3</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">4</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">5</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">6</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">7</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">8</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">9</div>
</div>
<div class="referral-question-option" role="radio" aria-checked="false" tabindex="-1">
<div class="referral-question-option-text">10</div>
</div>
</div>
</div>
</form>
</div>
<button type="button" class="pulsecheck-complete-button w-button" disabled aria-disabled="true">Complete</button>
</div>
</div>
</div>
</div>
</div>