Add to PulseCheck - Done

<div class="modal-background">
    <div class="modal-container">
        <div class="modal-heading-container">
            <h1 class="modal-h1">Add Contacts to PulseCheck</h1>
        </div>
        <div class="review-platform-tile">
            <div class="flex">
                <div class="icon _32 brand-color w-embed"><svg fill="currentColor" width="512" height="512" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
                    </svg></div>
                <div>
                    <div class="review-platform-tile-name">Client Happiness</div>
                    <div class="review-platform-tile-category">199/200 Contacts</div>
                </div>
            </div>
        </div>
        <form id="add-existing-contacts" name="add-existing-contacts" method="get" class="contacts-selector-form">
            <div class="dropdown-filter">
                <input class="form-field w-input" maxlength="256" name="filter-contacts" placeholder="Filter" type="text" id="filter-contacts"></div>
            <div class="contacts-selector-container">
                
                <!-- START Contact - repeat for every contact not already added to this PulseCheck -->
                
                <div class="contacts-selector-contact">
                    <div class="flex gap-1rem">
                        <label class="w-checkbox checkbox-field">
                        <div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div>
                            <input type="checkbox" name="checkbox-2" id="checkbox-2" style="opacity:0;position:absolute;z-index:-1">
                        </label>
                        <div class="flex">
                            <div><strong>{First name} {Last Name}</strong></div>
                            <div class="text-small">{email address}</div>
                        </div>
                    </div>
                </div>
                
                <!-- END Contact -->
                
            </div>
            <div class="contacts-selector-bottom">
                <div class="text-small"><strong>{number of selected contacts}</strong> Selected</div>
                
                <!-- START error message, display when existing contacts + selected is > # contacts allowed by PulseCheck's plan -->
                <div class="text-small danger-text"><em>Selection exceeds limit by 1. Please deselect 1 contact(s).</em></div>
                <!-- END error message -->
            </div>
        </form>
        <div class="form-button-container">
            <button type="button" class="button tertiary full w-button">Cancel</button>
            <button type="button" class="button full disabled w-button" disabled>Add {number of selected} Contacts</button> <!-- disabled when no contacts selceted or when too many are selected -->
        </div>
        <div class="modal-close-button w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg></div>
    </div>
</div>