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

# 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">
                    <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 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 future-step">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon w-embed">
                            <svg height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><defs><style>.cls-1{fill:currentColor;}</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></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"></div>
                </div>
                <div class="wizard-step future-step">
                    <div class="wizard-step-content-wrapper">
                        <div class="wizard-progress-icon w-embed">
                            <svg height="32" width="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><defs><style>.cls-1{fill:currentColor;}</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></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>Add users manually or upload a CSV file to invite them to your workspace.</div>
        </div>
        <div class="auth-form w-form">
            <form id="invite-users" name="invite-users" data-name="invite-users" method="get" class="form">
                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="email-addresses" class="field-label">Enter Email Addresses</label>
                        <div class="required-star">*</div>
                    </div>
                    <textarea id="email-addresses" name="email-addresses" maxlength="5000" data-name="email-addresses" placeholder="e.g. user1@example.com, user2@example.com" required class="form-field text-area w-input"></textarea>
                    <div class="text-area-under">
                        <div>Type or paste emails separated by commas, spaces, or new lines.</div>
                    </div>
                </div>
                <div class="separator">
                    <div class="separator-line"></div>
                    <div>or</div>
                    <div class="separator-line"></div>
                </div>
                <div class="form-field-container">
                    <div class="field-label-container">
                        <label for="dropzone" class="field-label">Upload a CSV</label>
                    </div>
                    <div id="dropzone" class="dropzone">
                        <div class="icon-2rem w-embed">
                            <svg fill="currentColor" height="512" width="512" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><polygon points="11 18 12.41 19.41 15 16.83 15 29 17 29 17 16.83 19.59 19.41 21 18 16 13 11 18"><path d="M23.5,22H23V20h.5a4.5,4.5,0,0,0,.36-9L23,11l-.1-.82a7,7,0,0,0-13.88,0L9,11,8.14,11a4.5,4.5,0,0,0,.36,9H9v2H8.5A6.5,6.5,0,0,1,7.2,9.14a9,9,0,0,1,17.6,0A6.5,6.5,0,0,1,23.5,22Z"></path></polygon></svg>
                        </div>
                        <div>Drop a CSV here or click to upload</div>
                    </div>
                    <div class="text-area-under">
                        <div>Ensure your CSV contains a column with valid email addresses.</div>
                    </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>Next</button>
                </div>
            </form>
        </div>
    </div>
</div>

```