Step 4 - Done
1 min
HTML
<div class="modal-background" role="dialog" aria-labelledby="import-summary-heading" aria-describedby="import-summary-description">
<div class="modal-container _48">
<div class="wizard-steps-container">
<div class="wizard-steps" role="navigation" aria-label="Import Process Steps">
<div class="wizard-step completed">
<div class="wizard-step-content-wrapper">
<div class="wizard-progress-icon current-step w-embed" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
<polygon id="step1-completed" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
</polygon></svg></div>
<div>
<div class="wizard-step-heading" id="step1-label">Step 1</div>
<div id="step1-description">Upload CSV File</div>
</div>
</div>
<div class="wizard-divider-arrow w-embed" aria-hidden="true"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
<polygon id="caretPolygon1" points="0,0 0,24 12,12" fill="none">
<line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
<line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
</polygon></svg></div>
<div class="wizard-bottom-border current-step"></div>
</div>
<div class="wizard-step completed">
<div class="wizard-step-content-wrapper">
<div class="wizard-progress-icon current-step w-embed" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
<polygon id="step2-completed" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
</polygon></svg></div>
<div>
<div class="wizard-step-heading" id="step2-label">Step 2</div>
<div id="step2-description">Map Fields</div>
</div>
</div>
<div class="wizard-divider-arrow w-embed" aria-hidden="true"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
<polygon id="caretPolygon2" points="0,0 0,24 12,12" fill="none">
<line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
<line x1="0" y1="24" x2="12" y2="12" stroke="currentColor" stroke-width="1"></line>
</polygon></svg></div>
<div class="wizard-bottom-border current-step"></div>
</div>
<div class="wizard-step" aria-current="step">
<div class="wizard-step-content-wrapper">
<div class="wizard-progress-icon current-step w-embed" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM14,21.5908l-5-5L10.5906,15,14,18.4092,21.41,11l1.5957,1.5859Z"></path>
<polygon id="step3-completed" fill="#ffffff" points="14 21.591 9 16.591 10.591 15 14 18.409 21.41 11 23.005 12.585 14 21.591">
</polygon></svg></div>
<div>
<div class="wizard-step-heading" id="step3-label">Step 3</div>
<div id="step3-description">Import Data</div>
</div>
</div>
<div class="wizard-bottom-border current-step"></div>
</div>
</div>
</div>
<div class="modal-heading-container">
<h1 class="modal-h1" id="import-summary-heading">Import Complete</h1>
<div id="import-summary-description">Your contact import has been processed. Review the results below.<br></div>
</div>
<div class="auth-form w-form">
<form id="import-summary-form" name="import-summary-form" data-name="Import Summary" method="get" class="form">
<div class="form-list">
<div class="form-field-container">
<div class="w-layout-grid grid-3x1 mt-1rem">
<div>
<a href="#" class="summary-tile w-inline-block" aria-label="Total Records: {total csv lines}">
<div class="text-large" id="total-records-count">{total csv lines}</div>
<div class="dashboard-tile-stat-label">Total Records</div>
</a>
</div>
<a href="#" class="summary-tile w-inline-block" aria-label="Contacts Imported: {# imported}">
<div class="text-large success-text" id="imported-count">{# imported}</div>
<div class="dashboard-tile-stat-label">Contacts Imported</div>
</a>
<a href="#" class="summary-tile right w-inline-block" aria-label="Failed Imports: {# failed}">
<div class="text-large danger-text" id="failed-count">7</div>
<div class="dashboard-tile-stat-label">{# failed}</div>
</a>
</div>
</div>
<div class="form-field-container">
<div class="field-label-container">
<label for="failed-imports-table" id="failed-imports-label" class="field-label">Failed Imports<br></label>
</div>
<div class="table-outline" id="failed-imports-table" aria-labelledby="failed-imports-label">
<div class="table-scroll-container">
<table class="table" aria-label="Failed imports">
<thead class="table-head">
<tr class="table-header-row">
<th scope="col">
<div class="table-cell-content">
<div class="table-heading">Row</div>
</div>
</th>
<th scope="col">
<div class="table-cell-content">
<div class="table-heading">Email</div>
</div>
</th>
<th scope="col">
<div class="table-cell-content">
<div class="table-heading">Error</div>
</div>
</th>
<th scope="col" class="action-column _9rem">
<div class="table-header-icon-container">
<div data-delay="0" data-hover="false" class="table-menu-container w-dropdown" id="table-actions-dropdown" aria-haspopup="menu">
<div class="table-menu-button w-dropdown-toggle" id="table-actions-toggle" aria-expanded="false" aria-controls="table-actions-menu">
<div class="table-header-button">
<div class="table-button-icon w-embed" aria-hidden="true"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32">
<circle cx="16" cy="8" r="2"></circle>
<circle cx="16" cy="16" r="2"></circle>
<circle cx="16" cy="24" r="2"></circle>
</svg></div>
</div>
</div>
<nav class="table-menu w-dropdown-list" id="table-actions-menu" role="menu" aria-labelledby="table-actions-toggle">
<a href="#" class="table-menu-item w-inline-block" id="download-failed-csv" role="menuitem">
<div class="table-menu-item-icon w-embed" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
<polygon points="5 18 5 20 10.586 20 3 27.586 4.414 29 12 21.414 12 27 14 27 14 18 5 18">
<path d="M27,3H5A2,2,0,0,0,3,5V15H5V11H15v4h2V11H27v7H17v2H27v7H17v2H27a2,2,0,0,0,2-2V5A2,2,0,0,0,27,3Zm0,6H5V5H27Z"></path>
</polygon></svg></div>
<div>Download Failed Imports CSV</div>
</a>
</nav>
</div>
</div>
</th>
</tr>
</thead>
<tbody class="table-body">
<!-- START Failed Rows - repeat for each row that failed import -->
<tr class="table-row">
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data overflow" id="failed-row-1">{CSV row #}</div>
</div>
</div>
</td>
<td class="table-cell">
<div class="table-cell-content">
<div class="table-cell-left">
<div class="table-data overflow" id="failed-email-1">{email address}</div>
</div>
</div>
</td>
<td colspan="2" class="table-cell truncate">
<div class="table-cell-content">
<div class="table-cell-left">
<div data-tippy-content="{error details}" class="table-data overflow danger-text" id="failed-error-1">{error}</div>
</div>
</div>
</td>
</tr>
<!-- END Failed Rows -->
</tbody>
</table>
</div>
<div class="table-pagination" role="navigation" aria-label="Pagination">
<div class="pagination-left">
<div class="items-per-page-container">
<div id="items-per-page-label">Items per page:</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown" id="items-per-page-dropdown" aria-labelledby="items-per-page-label">
<div class="dropdown-closed table-filter w-dropdown-toggle" id="items-per-page-toggle" aria-haspopup="listbox" aria-expanded="false" aria-controls="items-per-page-options">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text-content">10</div>
</div>
<nav class="dropdown-open top-left w-dropdown-list" id="items-per-page-options" role="listbox" aria-labelledby="items-per-page-toggle">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block" id="option-10" role="option" aria-selected="true">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed" 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="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">10</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" id="option-25" role="option" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed" 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">25</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" id="option-50" role="option" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed" 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">50</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" id="option-100" role="option" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed" 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">100</div>
</a>
</div>
</nav>
</div>
</div>
<div class="paginaton-total-items">
<div id="pagination-status" aria-live="polite">1–10 of 103 items<br></div>
</div>
</div>
<div class="pagination-right">
<div class="pagination-pages-dropdown">
<div data-delay="0" data-hover="false" class="dropdown w-dropdown" id="page-selector-dropdown">
<div class="dropdown-closed table-filter w-dropdown-toggle" id="page-selector-toggle" aria-haspopup="listbox" aria-expanded="false" aria-controls="page-selector-options" aria-label="Select page">
<div class="filter-dropdown-arrow w-icon-dropdown-toggle" aria-hidden="true"></div>
<div class="dropdown-text-content">#</div>
</div>
<nav class="dropdown-open top-left w-dropdown-list" id="page-selector-options" role="listbox" aria-labelledby="page-selector-toggle">
<div class="dropdown-option-container">
<a href="#" class="dropdown-option-simple w-inline-block" id="page-1" role="option" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed" 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="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">1</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" id="page-2" role="option" aria-selected="true">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed" 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">2</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" id="page-3" role="option" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed" 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">3</div>
</a>
<a href="#" class="dropdown-option-simple w-inline-block" id="page-4" role="option" aria-selected="false">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed" 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" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">4</div>
</a>
</div>
</nav>
</div>
<div id="total-pages">of 11 pages</div>
</div>
<div class="pagination-button" role="button" tabindex="0" aria-label="Previous page" id="prev-page-button">
<div class="pagination-icon w-embed" aria-hidden="true"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32" xml:space="preserve">
<polygon points="20,24 10,16 20,8 ">
</polygon></svg></div>
</div>
<div class="pagination-button" role="button" tabindex="0" aria-label="Next page" id="next-page-button">
<div class="pagination-icon w-embed" aria-hidden="true"><svg version="1.1" fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewbox="0 0 32 32" xml:space="preserve">
<polygon points="12,8 22,16 12,24 ">
</polygon></svg></div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="form-button-container">
<button type="button" id="close-button" class="button full w-button">Close</button>
</div>
</div>
</div>