Schedule - Done
2 min
HTML
<div data-w-tab="Schedule" class="sub-tab-content-area w-tab-pane" role="tabpanel" aria-labelledby="schedule-tab">
<div class="tab-content-container">
<h2 id="schedule-heading">Schedule</h2>
<div class="subheading" id="schedule-description">Configure when your PulseCheck will send.</div>
<form id="schedule-pulsecheck" name="schedule-pulsecheck" method="get" class="form-column" aria-labelledby="schedule-heading">
<div class="w-layout-grid frequency-picker-container">
<div class="frequency-picker-selection-container">
<div class="form-field-container">
<div class="field-label-container">
<label for="frequency-select" id="frequency-label" class="field-label">Frequency</label>
</div>
<div id="frequency-select" name="frequency" data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="frequency-label">
<div class="dropdown-closed w-dropdown-toggle" aria-controls="frequency-dropdown">
<div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text">{selected frequency}</div>
</div>
<div id="frequency-dropdown" class="dropdown-open w-dropdown-list" role="listbox">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="true"> <!-- Default -->
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Monthly</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Bi-Monthly</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Quarterly</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Semi-Annually</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Annually</div>
</a>
</div>
</div>
</div>
</div>
<div class="space-2rem"></div>
<div class="form-field-container">
<div class="frequency-picker-send-on-label">
<label id="send-on-label" class="field-label">Send on</label>
</div>
</div>
<div data-current="Specific Day" data-easing="ease" data-duration-in="300" data-duration-out="100" class="w-tabs" role="tablist" aria-labelledby="send-on-label">
<div class="tabs-menu-2 w-tab-menu" role="tablist">
<a data-w-tab="Specific Day" class="sub-sub-tab left w-inline-block w-tab-link w--current" id="specific-day-tab" role="tab" aria-controls="specific-day-panel" aria-selected="true" tabindex="0">
<div>Specific day</div>
</a>
<a data-w-tab="Relative Day" class="sub-sub-tab right w-inline-block w-tab-link" id="relative-day-tab" role="tab" aria-controls="relative-day-panel" aria-selected="false" tabindex="-1">
<div>Relative Day</div>
</a>
</div>
<div class="tabs-content-2 w-tab-content">
<div data-w-tab="Specific Day" class="sub-sub-tab-content w-tab-pane w--tab-active" id="specific-day-panel" role="tabpanel" aria-labelledby="specific-day-tab">
<div class="w-layout-grid grid-6" role="radiogroup" aria-label="Day of month">
<div class="frequency-picker-day selected" role="radio" aria-checked="true" tabindex="0">1</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">2</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">3</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">4</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">5</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">6</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">7</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">8</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">9</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">10</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">11</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">12</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">13</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">14</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">15</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">16</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">17</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">18</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">19</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">20</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">21</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">22</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">23</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">24</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">25</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">26</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">27</div>
<div class="frequency-picker-day" role="radio" aria-checked="false" tabindex="-1">28</div>
</div>
</div>
<div data-w-tab="Relative Day" class="sub-sub-tab-content w-tab-pane" id="relative-day-panel" role="tabpanel" aria-labelledby="relative-day-tab">
<div class="form-list">
<div class="form-field-container">
<div class="field-label-container">
<label for="occurrence-select" id="occurrence-label" class="field-label">Occurrence</label>
</div>
<div id="occurrence-select" name="occurrence" data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="occurrence-label">
<div class="dropdown-closed w-dropdown-toggle" aria-controls="occurrence-dropdown">
<div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text">{selected occurrence}</div>
</div>
<div id="occurrence-dropdown" class="dropdown-open w-dropdown-list" role="listbox">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="true">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">First</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Second</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Third</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Fourth</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Fifth</div>
</a>
<div class="dropdown-divider-container">
<div class="divider" role="separator" aria-orientation="horizontal"></div>
</div>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Last</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Next to Last</div>
</a>
</div>
</div>
</div>
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="day-type-select" id="day-type-label" class="field-label">Day Type</label>
</div>
<div id="day-type-select" name="day-type" data-delay="0" data-hover="false" class="dropdown w-dropdown" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="day-type-label">
<div class="dropdown-closed w-dropdown-toggle" aria-controls="day-type-dropdown">
<div class="dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text">{selected day type}</div>
</div>
<div id="day-type-dropdown" class="dropdown-open w-dropdown-list" role="listbox">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="true">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Day</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Weekday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Weekend Day</div>
</a>
<div class="dropdown-divider-container">
<div class="divider" role="separator" aria-orientation="horizontal"></div>
</div>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Monday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Tuesday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Wednesday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Thursday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Friday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Saturday</div>
</a>
<a href="#" class="dropdown-option w-inline-block" role="option" tabindex="-1" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
</div>
<div class="dropdown-option-text">Sunday</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="frequency-picker-selection-container">
<div class="form-field-container">
<div class="field-label-container">
<label for="start-after" class="field-label">Start After</label> <!-- current date or later, no past date selection -->
</div>
<div class="date-filter">
<input class="form-field date-picker w-input" maxlength="256" name="start-after" placeholder="March 1, 2025" type="text" id="start-after" aria-describedby="date-picker-desc">
<div id="dateFilterButton" class="date-filter-icon-container" role="button" aria-label="Open date picker" tabindex="0">
<div class="date-filter-icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32"><path d="M26,4H22V2H20V4H12V2H10V4H6A2.0025,2.0025,0,0,0,4,6V26a2.0025,2.0025,0,0,0,2,2H26a2.0025,2.0025,0,0,0,2-2V6A2.0025,2.0025,0,0,0,26,4ZM6,6h4V8h2V6h8V8h2V6h4l0,4H6Zm0,6h5v6H6ZM19,26H13V20h6Zm0-8H13V12h6Zm2,8V20h5l.0012,6Z"></path></svg>
</div>
</div>
</div>
<div id="date-picker-desc" class="visually-hidden">Select a date on or after the current date</div>
</div>
<div class="space-2rem"></div>
<div>
<div class="frequency-picker-send-on-label">
<label id="summary-label" class="field-label">Summary</label>
</div>
<div id="summary" name="summary" class="frequency-picker-summary" aria-labelledby="summary-label">
<div class="frequency-checker-next-occurent-header">
<div class="icon _12" aria-hidden="true">
<svg fill="currentColor" width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M26,4h-4V2h-2v2h-8V2h-2v2H6C4.9,4,4,4.9,4,6v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V6C28,4.9,27.1,4,26,4z M26,26H6V12h20V26z M26,10H6V6h4v2h2V6h8v2h2V6h4V10z"></path></svg>
</div>
<div>Schedule:</div>
</div>
<div>{frequency} on the {occurance} {day-type}</div>
<div class="schedule-divider-container">
<div class="divider" role="separator" aria-orientation="horizontal"></div>
</div>
<div class="frequency-checker-next-occurent-header">
<div class="icon _12" aria-hidden="true">
<svg fill="currentColor" width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path><polygon points="20.59 22 15 16.41 15 7 17 7 17 15.58 22 20.59 20.59 22"></polygon></svg>
</div>
<div>Next occurrence:</div>
</div>
<div>{long date - e.g. Monday, March 17, 2025}</div>
</div>
</div>
<div class="space-2rem"></div>
</div>
</div>
<div class="flex space-between">
<button type="button" class="button tertiary w-inline-block" aria-label="Reset to Current Settings">
<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 Current Settings</span>
</button>
<button type="button" class="button w-inline-block" aria-label="Update Schedule">
<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>Update Schedule</span>
</button>
</div>
</form>
</div>
</div>