---
title: Step 2 - Done
slug: step-2-done
createdAt: 2025-02-11T20:36:41.788Z
---

# Dependencies

Requires wizard.js

# HTML

```html
  <div class="modal-background">
    <div class="modal-container _48">
      <div class="wizard-steps-container">
        <div class="wizard-steps">
          <div class="wizard-step completed">
            <div class="wizard-step-content-wrapper">
              <div class="wizard-progress-icon current-step w-embed"><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="inner-path" 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">Step 1</div>
                <div>Upload CSV File</div>
              </div>
            </div>
            <div class="wizard-divider-arrow w-embed"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                <polygon id="caretPolygon" 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">
            <div class="wizard-step-content-wrapper">
              <div class="wizard-progress-icon current-step w-embed"><svg fill="currentColor" height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                  <path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"></path>
                </svg></div>
              <div>
                <div class="wizard-step-heading">Step 2</div>
                <div>Map Fields</div>
              </div>
            </div>
            <div class="wizard-divider-arrow w-embed"><svg width="12" height="24" viewbox="0 0 12 24" xmlns="http://www.w3.org/2000/svg">
                <polygon id="caretPolygon" 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 future-step">
            <div class="wizard-step-content-wrapper">
              <div class="wizard-progress-icon w-embed"><svg id="icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
                  <defs>
                    <style>.cls-1{fill:currentColor;}.cls-2{fill:none;}</style>
                  </defs>
                  <path class="cls-1" d="M7.7,4.7a14.7,14.7,0,0,0-3,3.1L6.3,9A13.26,13.26,0,0,1,8.9,6.3Z"></path>
                  <path class="cls-1" d="M4.6,12.3l-1.9-.6A12.51,12.51,0,0,0,2,16H4A11.48,11.48,0,0,1,4.6,12.3Z"></path>
                  <path class="cls-1" d="M2.7,20.4a14.4,14.4,0,0,0,2,3.9l1.6-1.2a12.89,12.89,0,0,1-1.7-3.3Z"></path>
                  <path class="cls-1" d="M7.8,27.3a14.4,14.4,0,0,0,3.9,2l.6-1.9A12.89,12.89,0,0,1,9,25.7Z"></path>
                  <path class="cls-1" d="M11.7,2.7l.6,1.9A11.48,11.48,0,0,1,16,4V2A12.51,12.51,0,0,0,11.7,2.7Z"></path>
                  <path class="cls-1" d="M24.2,27.3a15.18,15.18,0,0,0,3.1-3.1L25.7,23A11.53,11.53,0,0,1,23,25.7Z"></path>
                  <path class="cls-1" d="M27.4,19.7l1.9.6A15.47,15.47,0,0,0,30,16H28A11.48,11.48,0,0,1,27.4,19.7Z"></path>
                  <path class="cls-1" d="M29.2,11.6a14.4,14.4,0,0,0-2-3.9L25.6,8.9a12.89,12.89,0,0,1,1.7,3.3Z"></path>
                  <path class="cls-1" d="M24.1,4.6a14.4,14.4,0,0,0-3.9-2l-.6,1.9a12.89,12.89,0,0,1,3.3,1.7Z"></path>
                  <path class="cls-1" d="M20.3,29.3l-.6-1.9A11.48,11.48,0,0,1,16,28v2A21.42,21.42,0,0,0,20.3,29.3Z"></path>
                  <rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-2" width="32" height="32"></rect>
                </svg></div>
              <div>
                <div class="wizard-step-heading">Step 3</div>
                <div>Import Data</div>
              </div>
            </div>
            <div class="wizard-bottom-border"></div>
          </div>
        </div>
      </div>
      <div class="modal-heading-container">
        <h1 class="modal-h1">Map Fields</h1>
        <div>Map each column from your CSV to the corresponding field in our application.</div>
      </div>
        <form id="map-fields" name="map-fields" data-name="map-fields" method="get" class="form">
          <div class="table-outline">
            <div class="table-scroll-container">
              <table class="table">
                <thead class="table-head">
                  <tr class="table-header-row">
                    <th>
                      <div class="table-cell-content">
                        <div class="table-heading">Field</div>
                      </div>
                    </th>
                    <th>
                      <div class="table-cell-content">
                        <div class="table-heading">CSV Column</div>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody class="table-body">
                  <tr class="table-row">
                    <td class="table-cell">
                      <div class="table-cell-content">
                        <div data-tippy-content="This is a tooltip." class="table-cell-left">
                          <div class="field-label-container">
                            <div class="table-data overflow">Name</div>
                            <div class="required-star">*</div>
                            <div data-tippy-content="help text about this field" class="help-tooltip w-embed"><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">
                                <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>
                      </div>
                    </td>
                    <td class="table-cell">
                      <div class="table-cell-content">
                        <div data-delay="0" data-hover="false" id="w-node-e2debdf1-1ae9-516a-157a-5008472ccad7-de7043ec" class="dropdown w-dropdown">
                          <div class="dropdown-closed table-filter w-dropdown-toggle">
                            <div class="dropdown-arrow w-icon-dropdown-toggle"></div>
                            <div class="dropdown-text">John Doe</div>
                          </div>
                          <div class="dropdown-open max-100 w-dropdown-list">
                            <div class="dropdown-options">
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 danger-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <path d="M2,16H2A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm23.15,7.75L8.25,6.85a12,12,0,0,1,16.9,16.9ZM8.24,25.16A12,12,0,0,1,6.84,8.27L23.73,25.16a12,12,0,0,1-15.49,0Z" transform="translate(0)"></path>
                                  </svg></div>
                                <div class="dropdown-option-text"><em>Do not map</em></div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 1, Row 1 Value}</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">John Doe</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">john.doe@email.com</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 4, Row 1 Value}</div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr class="table-row last-row">
                    <td class="table-cell">
                      <div class="table-cell-content">
                        <div class="table-cell-left">
                          <div class="field-label-container">
                            <div class="table-data overflow">Email Address</div>
                            <div class="required-star">*</div>
                            <div data-tippy-content="help text about this field" class="help-tooltip w-embed"><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">
                                <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>
                      </div>
                    </td>
                    <td class="table-cell">
                      <div class="table-cell-content">
                        <div data-delay="0" data-hover="false" id="w-node-e2debdf1-1ae9-516a-157a-5008472ccaff-de7043ec" class="dropdown w-dropdown">
                          <div class="dropdown-closed table-filter w-dropdown-toggle">
                            <div class="dropdown-arrow w-icon-dropdown-toggle"></div>
                            <div class="dropdown-text">john.doe@email.com</div>
                          </div>
                          <div class="dropdown-open max-100 w-dropdown-list">
                            <div class="dropdown-options">
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 danger-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <path d="M2,16H2A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm23.15,7.75L8.25,6.85a12,12,0,0,1,16.9,16.9ZM8.24,25.16A12,12,0,0,1,6.84,8.27L23.73,25.16a12,12,0,0,1-15.49,0Z" transform="translate(0)"></path>
                                  </svg></div>
                                <div class="dropdown-option-text"><em>Do not map</em></div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 1, Row 1 Value}</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">John Doe</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">john.doe@email.com</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 4, Row 1 Value}</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 4, Row 1 Value}</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 4, Row 1 Value}</div>
                              </a>
                              <a href="#" class="dropdown-option no-selected w-inline-block">
                                <div class="icon _24 success-text w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewbox="0 0 32 32">
                                    <polygon points="11.41 26.59 7.83 23 28 23 28 21 7.83 21 11.41 17.41 10 16 4 22 10 28 11.41 26.59">
                                    <polygon points="28 10 22 4 20.59 5.41 24.17 9 4 9 4 11 24.17 11 20.59 14.59 22 16 28 10">
                                  </polygon></polygon></svg></div>
                                <div class="dropdown-option-text">{Column 4, Row 1 Value}</div>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="form-button-container">
              <button type="button" data-wait="Please wait..." class="button tertiary full w-button">Cancel</button>
              <button type="button" data-wait="Please wait..." class="button full disabled w-button">Import</button>
            </div>
        </form>
    </div>
  </div>
```

