---
title: Invite Users - Step 2 - Done
slug: invite-users-step-2-done
createdAt: 2025-02-06T00:01:24.632Z
---

# Dependencies

| Module       | Global Depenedency                                                                                                                |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| webflow\.css | Yes                                                                                                                               |
| wizard.css   | Up to dev, could be used only when wizards are used it Wizards are made into a reusable module. Files are in Global Dependencies. |
| wizard.js    | Up to dev, could be used only when wizards are used it Wizards are made into a reusable module. Files are in Global Dependencies. |

# 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>Enter Email Addresses</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>Review and Send Invites</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>Confirmation</div>
                        </div>
                    </div>
                    <div class="wizard-bottom-border"></div>
                </div>
            </div>
        </div>
        <div class="modal-heading-container">
            <h1 class="modal-h1">Invite Users to Your Workspace</h1>
            <div>Review invited users and fix invalid email addresses before you proceed.</div>
        </div>
        <div class="auth-form w-form">
            <form id="invites-list" name="invites-list" data-name="invites-list" method="get" class="form">
                <div class="form-field-container">
                    <div class="invite-list-container">
                        <div class="invite_list_filter">
                            <input class="input-filter w-input" maxlength="256" name="invite-email-filter" data-name="invite-email-filter" placeholder="Filter" type="text" id="invite-email-filter">
                        </div>
                        <div class="invite-items-container">
                            
                            <!-- End invalid Email -->
                            <div class="invite-list-item error">
                                <div>invalid-email</div>
                                <div class="flex">
                                    <div data-tippy-content="Edit" class="inline-edit-button">
                                        <div class="inline-edit-icon 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"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                                        </div>
                                    </div>
                                    <div data-tippy-content="Delete" class="inline-edit-button">
                                        <div class="inline-edit-icon delete 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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End invalid Email -->
                            
                            <!-- START Inline Edit Email -->
                            <div class="invite-list-item edit"><input class="inline-edit-input w-input" maxlength="256" name="Edit-Invalid-Email" data-name="Edit Invalid Email" placeholder="Enter a valid email address..." type="text" id="Edit-Invalid-Email">
                                <div class="flex">
                                    <div data-tippy-content="Save" class="inline-edit-button green">
                                        <div class="inline-edit-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 448 512">
                                            <path d="M32 96c0-17.7 14.3-32 32-32l0 96c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V65.8c4.5 1.6 8.7 4.2 12.1 7.6l74.5 74.5c6 6 9.4 14.1 9.4 22.6V416c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V96zM96 64H288v96H96V64zM0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V170.5c0-17-6.7-33.3-18.7-45.3L354.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96zM272 320a48 48 0 1 1 -96 0 48 48 0 1 1 96 0zm-48-80a80 80 0 1 0 0 160 80 80 0 1 0 0-160z"></path>
                                            </svg></div>
                                    </div>
                                    <div data-tippy-content="Cancel" class="inline-edit-button red">
                                        <div class="inline-edit-icon w-embed">
                                            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 384 512"><path d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"></path></svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END Inline Edit Email -->
                            
                            <!-- START Valid Email -->
                            <div class="invite-list-item">
                                <div>john@email.com</div>
                                <div class="flex">
                                    <div data-tippy-content="Edit" class="inline-edit-button">
                                        <div class="inline-edit-icon 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"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>
                                        </div>
                                    </div>
                                    <div data-tippy-content="Delete" class="inline-edit-button">
                                        <div class="inline-edit-icon delete 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"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- END Valid Email -->

                        </div>
                    </div>
                    <div class="invite-list-under">
                        <div>Valid: <strong>45</strong> | Invalid: <span class="danger-text"><strong>5</strong></span></div>
                        <a href="#" class="button right small danger w-button">Remove All Invalid Email Addresses</a>
                    </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" disabled>Send Invites</button>
                </div>
            </form>
        </div>
    </div>
</div>

```