Modal Window
Front uses third-party Custombox dialog plugin, so add dialogs to your site for lightboxes, user notifications, or completely custom content.
For more detailed information on how to link and use the modal windows, see the Modal Window documentation page.
Subscription modal window #1
Open Subscribe Modal
Subscribe
Get the latest updates from Front.
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#subscribeModal"
data-modal-target="#subscribeModal">
Open Subscribe Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Subscribe Modal Window -->
<div id="subscribeModal" class="js-modal-window svg-preloader u-modal-window position-relative" style="width: 600px;">
<!-- Modal Close Button -->
<button type="button" class="close close-light position-absolute top-0 right-0 z-index-2 p-2" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
<!-- End Modal Close Button -->
<div class="card border-0 bg-primary text-white text-center py-5 px-md-5">
<div class="card-body">
<!-- Title -->
<div class="mb-4">
<h4 class="h1 font-weight-semi-bold mb-1">Subscribe</h4>
<p class="text-white-70 mb-0">Get the latest updates from Front.</p>
</div>
<!-- End Title -->
<!-- SVG Icon -->
<figure class="w-80 mx-auto mb-1 ie-subscribe-2-flat-icons">
<img class="js-svg-injector" src="../../assets/svg/flat-icons/subscribe-2.svg" alt="Image Description"
data-parent="#subscribeModal">
</figure>
<!-- End SVG Icon -->
<!-- Subscribe Form -->
<form class="js-validate js-form-message w-80 mx-auto">
<label class="sr-only" for="subscribeSrEmail">Enter your email address</label>
<div class="input-group input-group-borderless">
<input type="email" class="form-control" name="email" id="subscribeSrEmail" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeButton" required
data-msg="Please enter a valid email address.">
<div class="input-group-append">
<button type="button" class="btn btn-success" id="subscribeButton">Subscribe</button>
</div>
</div>
</form>
<!-- End Subscribe Form -->
</div>
<!-- SVG Background Shape -->
<div class="w-100 content-centered-y z-index-n1">
<figure class="ie-bg-elements-1">
<img class="js-svg-injector" src="../../assets/svg/components/bg-elements-1.svg" alt="Image Description"
data-parent="#subscribeModal">
</figure>
</div>
<!-- End SVG Background Shape -->
</div>
</div>
<!-- End Subscribe Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.svg-injector.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of svg injector module
$.HSCore.components.HSSVGIngector.init('.js-svg-injector');
});
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
autonomous: true
});
});
</script>
Account modal window #1
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#loginModal"
data-modal-target="#loginModal">
Open Account Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Account Modal Window -->
<div id="loginModal" class="js-modal-window u-modal-window" style="width: 400px;">
<div class="card">
<form class="js-validate">
<!-- Login -->
<div id="login" data-target-group="idForm">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Welcome Back!</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body p-5">
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signinSrEmail">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signinEmail">
<span class="fas fa-user"></span>
</span>
</div>
<input type="email" class="form-control" name="email" id="signinSrEmail" placeholder="Email" aria-label="Email" aria-describedby="signinEmail" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signinSrPassword">Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signinPassword">
<span class="fas fa-lock"></span>
</span>
</div>
<input type="password" class="form-control" name="password" id="signinSrPassword" placeholder="Password" aria-label="Password" aria-describedby="signinPassword" required
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Form Group -->
<div class="d-flex justify-content-end mb-4">
<a class="js-animation-link small link-muted" href="javascript:;"
data-target="#forgotPassword"
data-link-group="idForm"
data-animation-in="fadeIn">Forgot Password?</a>
</div>
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Login</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#signup"
data-link-group="idForm"
data-animation-in="fadeIn">Signup
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<!-- Login Buttons -->
<div class="d-flex">
<a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
<!-- End Login Buttons -->
</div>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Welcome to Front.</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body p-5">
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signupSrEmail">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signupEmail">
<span class="fas fa-user"></span>
</span>
</div>
<input type="email" class="form-control" name="email" id="signupSrEmail" placeholder="Email" aria-label="Email" aria-describedby="signupEmail" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signupSrPassword">Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signupPassword">
<span class="fas fa-lock"></span>
</span>
</div>
<input type="password" class="form-control" name="password" id="signupSrPassword" placeholder="Password" aria-label="Password" aria-describedby="signupPassword" required
data-msg="Your password is invalid. Please try again."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="signupSrConfirmPassword">Confirm Password</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="signupConfirmPassword">
<span class="fas fa-key"></span>
</span>
</div>
<input type="password" class="form-control" name="confirmPassword" id="signupSrConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" aria-describedby="signupConfirmPassword" required
data-msg="Password does not match the confirm password."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input -->
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Get Started</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
<div class="text-center">
<span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
</div>
<!-- Login Buttons -->
<div class="d-flex">
<a class="btn btn-block btn-sm btn-soft-facebook transition-3d-hover mr-1" href="#">
<span class="fab fa-facebook-square mr-1"></span>
Facebook
</a>
<a class="btn btn-block btn-sm btn-soft-google transition-3d-hover ml-1 mt-0" href="#">
<span class="fab fa-google mr-1"></span>
Google
</a>
</div>
<!-- End Login Buttons -->
</div>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Recover Password.</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body p-5">
<!-- Form Group -->
<div class="form-group">
<div class="js-form-message js-focus-state">
<label class="sr-only" for="recoverSrEmail">Your email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="recoverEmail">
<span class="fas fa-user"></span>
</span>
</div>
<input type="email" class="form-control" name="email" id="recoverSrEmail" placeholder="Your email" aria-label="Your email" aria-describedby="recoverEmail" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Form Group -->
<div class="mb-2">
<button type="submit" class="btn btn-block btn-primary transition-3d-hover">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small" href="javascript:;"
data-target="#login"
data-link-group="idForm"
data-animation-in="fadeIn">Login
</a>
</div>
</div>
</div>
<!-- End Forgot Password -->
</form>
</div>
</div>
<!-- End Account Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.focus-state.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-modal-window', {
autonomous: true
});
// initialization of forms
$.HSCore.components.HSFocusState.init();
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate', {
rules: {
confirmPassword: {
equalTo: '#signupPassword'
}
}
});
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
});
</script>
Empty shopping cart modal window #1
Open Empty Shopping Cart Modal
Your Shopping Cart
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#emptyShoppingCartModal"
data-modal-target="#emptyShoppingCartModal">
Open Shopping Empty Cart Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Shopping Cart Modal Window -->
<div id="emptyShoppingCartModal" class="js-modal-window u-modal-window" style="width: 370px;">
<div class="card">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Your Shopping Cart</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<!-- Body -->
<div class="card-body text-center p-5">
<span class="btn btn-icon btn-soft-primary rounded-circle">
<span class="fas fa-shopping-basket btn-icon__inner"></span>
</span>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer text-center p-5">
<div class="mb-3">
<span class="d-block font-weight-semi-bold">Order Total</span>
<span class="d-block">$56.99</span>
</div>
<div class="mb-2">
<a class="btn btn-sm btn-soft-primary disabled transition-3d-hover" href="#">Review Bag and Checkout</a>
</div>
<p class="small mb-0"><a class="link-muted" href="javascript:;">Start Shopping</a></p>
</div>
<!-- End Footer -->
</div>
</div>
<!-- End Shopping Cart Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
autonomous: true
});
});
</script>
Shopping cart with items modal window #1
Open Shopping Cart with Items Modal
Your Shopping Cart
Nike
Flex 2017 RN Lightweight Casual Hoodie - Men's
$56.99
Color: Red
Size: 8 Medium
Quantity: 1
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#shoppingCartWithItemsModal"
data-modal-target="#shoppingCartWithItemsModal">
Open Shopping Cart with Items Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Shopping Cart Modal Window -->
<div id="shoppingCartWithItemsModal" class="js-modal-window u-modal-window" style="width: 370px;">
<div class="card">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Your Shopping Cart</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<!-- Body -->
<div class="card-body p-5">
<div class="media">
<div class="u-avatar mr-3">
<img class="img-fluid rounded" src="../assets/img/100x100/img14.jpg" alt="Image Description">
</div>
<div class="media-body">
<div class="d-flex justify-content-between align-items-center">
<span class="d-block font-weight-semi-bold">Nike</span>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
<span class="d-block font-size-1">Flex 2017 RN Lightweight Casual Hoodie - Men's</span>
<span class="d-block text-primary font-weight-semi-bold">$56.99</span>
<small class="d-block text-muted">Color: Red</small>
<small class="d-block text-muted">Size: 8 Medium</small>
<small class="d-block text-muted">Quantity: 1</small>
</div>
</div>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer text-center p-5">
<div class="mb-3">
<span class="d-block font-weight-semi-bold">Order Total</span>
<span class="d-block">$56.99</span>
</div>
<div class="mb-2">
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="../shop/shop-checkout.html">Review Bag and Checkout</a>
</div>
<p class="small mb-0"><a class="link-muted" href="javascript:;">Continue Shopping</a></p>
</div>
<!-- End Footer -->
</div>
</div>
<!-- End Shopping Cart Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-modal-window', {
autonomous: true
});
});
</script>
Request payment modal window #1
Open Request a Payment Modal
Request a payment
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#requestPaymentModal"
data-modal-target="#requestPaymentModal">
Open Request a Payment Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Request Payment Modal Window -->
<div id="requestPaymentModal" class="js-modal-window u-modal-window" style="width: 600px;">
<div class="card mb-9">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Request a payment</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<div class="card-body bg-white">
<!-- Request Payment Form -->
<form class="js-validate js-step-form"
data-progress-id="#progressStepForm"
data-steps-id="#contentStepForm"
novalidate="novalidate">
<!-- Progress Step Form -->
<nav id="progressStepForm" class="js-step-progress nav nav-icon nav-justified text-center p-5">
<a class="nav-item" href="javascript:;">
<span class="nav-icon-action">
<span class="fas fa-user-circle nav-icon-action-inner"></span>
</span>
<span class="d-none d-sm-block">Select payer</span>
</a>
<a class="nav-item" href="javascript:;">
<span class="nav-icon-action">
<span class="fas fa-file-invoice-dollar nav-icon-action-inner"></span>
</span>
<span class="d-none d-sm-block">Payment details</span>
</a>
<a class="nav-item" href="javascript:;">
<span class="nav-icon-action">
<span class="fas fa-paperclip nav-icon-action-inner"></span>
</span>
<span class="d-none d-sm-block">Attachment</span>
</a>
</nav>
<!-- End Progress Step Form -->
<hr class="my-0">
<!-- Content Step Form -->
<div id="contentStepForm" class="p-5">
<div id="selectPlayerStep" class="active">
<!-- Recent Payers List -->
<div id="recentPayersList" data-target-group="idAddNewPayer">
<!-- Link -->
<div class="d-flex justify-content-end mb-3">
<a class="js-animation-link d-inline-block small link-muted" href="javascript:;"
data-target="#addNewPayer"
data-link-group="idAddNewPayer">
<span class="fas fa-plus mr-1"></span>
Add new payer
</a>
</div>
<!-- End Link -->
<!-- Add Members -->
<div class="mb-4">
<input class="form-control" type="email" placeholder="Enter email, name, or company" aria-label="Enter email, name, or company">
</div>
<!-- End Add Members -->
<!-- Most Recent Payers List -->
<div class="mb-4">
<!-- Payers List -->
<a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
<div class="card-body align-items-sm-center p-2">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Sebastian Diaz</h4>
<small class="d-block text-secondary">sebastiandiaz@gmail.com</small>
</div>
</div>
</div>
</a>
<!-- End Payers List -->
<!-- Payers List -->
<a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
<div class="card-body align-items-sm-center p-2">
<div class="media align-items-center">
<span class="btn btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">CL</span>
</span>
<div class="media-body">
<h4 class="h6 mb-0">Cler Lockhart</h4>
<small class="d-block text-secondary">clerlockhart@gmail.com</small>
</div>
</div>
</div>
</a>
<!-- End Payers List -->
<!-- Payers List -->
<a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
<div class="card-body align-items-sm-center p-2">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Joseph Mack</h4>
<small class="d-block text-secondary">josephmack@gmail.com</small>
</div>
</div>
</div>
</a>
<!-- End Payers List -->
<!-- Payers List -->
<a class="card card-frame mb-2" href="javascript:;" data-next-step="#paymentDetailsStep">
<div class="card-body align-items-sm-center p-2">
<div class="media align-items-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
</div>
<div class="media-body">
<h4 class="h6 mb-0">Eliza Donovan</h4>
<small class="d-block text-secondary">eliz@gmail.com</small>
</div>
</div>
</div>
</a>
<!-- End Payers List -->
</div>
<!-- End Most Recent Payers List -->
</div>
<!-- End Recent Payers List -->
<!-- Add New Payer -->
<div id="addNewPayer" data-target-group="idAddNewPayer" style="display: none;">
<!-- Button Group -->
<div class="btn-group btn-group-toggle d-flex mb-5">
<a class="js-animation-link btn btn-sm btn-soft-secondary flex-fill active" href="javascript:;"
data-target="#companyType"
data-link-group="idPayerType">
Company
</a>
<a class="js-animation-link btn btn-sm btn-soft-secondary flex-fill" href="javascript:;"
data-target="#individualType"
data-link-group="idPayerType">
Individual
</a>
</div>
<!-- End Button Group -->
<!-- Company Type Payer -->
<div id="companyType" data-target-group="idPayerType">
<div class="row">
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="companyNameLabel" class="h6 small d-block text-uppercase">Company name</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="companyName" placeholder="Pixeel" aria-label="Pixeel" required
data-msg="Please enter a valid name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="websiteURLLabel" class="h6 small d-block text-uppercase">Website URL</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="URL" class="form-control" name="websiteURL" placeholder="example.com" aria-label="example.com" required
data-msg="Please enter a valid website URL."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="contactFirstNameLabel" class="h6 small d-block text-uppercase">Contact first name</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="contactFirstNameCompany" placeholder="Brian" aria-label="Brian" required
data-msg="Please enter a valid name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="contactLastNameLabel" class="h6 small d-block text-uppercase">Contact last name</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="contactLastNameCompany" placeholder="Williams" aria-label="Williams" required
data-msg="Please enter a valid name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="emailLabel" class="h6 small d-block text-uppercase">Email</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="email" class="form-control" name="emailCompany" required placeholder="example@gmail.com" aria-label="example@gmail.com"
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label class="form-label">Country</label>
<div class="js-form-message">
<div class="input-group">
<select class="custom-select custom-select-sm">
<option selected>Select country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
</div>
<!-- End Input Group -->
</div>
</div>
<!-- End Company Type Payer -->
<!-- Individual Type Payer -->
<div id="individualType" data-target-group="idPayerType" style="display: none;">
<div class="row">
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="IndivContactFirstNameLabel" class="h6 small d-block text-uppercase">Contact first name</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="contactFirstNameIndividual" placeholder="Brian" aria-label="Brian" required
data-msg="Please enter a valid name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="indivContactLastNameLabel" class="h6 small d-block text-uppercase">Contact last name</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="text" class="form-control" name="contactLasttNameIndividual" placeholder="Williams" aria-label="Williams" required
data-msg="Please enter a valid name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="IndivemailLabel" class="h6 small d-block text-uppercase">Email</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="email" class="form-control" name="emailIndividual" placeholder="example@gmail.com" aria-label="example@gmail.com" required
data-msg="Please enter a valid email address."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label class="form-label">Country</label>
<div class="js-form-message">
<div class="input-group">
<select class="custom-select custom-select-sm">
<option selected>Select country</option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
</div>
<!-- End Input Group -->
</div>
</div>
<!-- End Individual Type Payer -->
</div>
<!-- End Add New Payer -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1" data-next-step="#paymentDetailsStep">Next</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</div>
<div id="paymentDetailsStep" style="display: none;">
<div class="row">
<!-- Input Group -->
<div class="col-sm-6 mb-4">
<label id="amountLabel" class="h6 small d-block text-uppercase">Amount</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<input type="number" class="form-control" name="amount" placeholder="Pixeel" aria-label="Pixeel" aria-describedby="amountLabel" required
data-msg="Please enter a valid name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Select -->
<div class="col-sm-6 mb-4">
<label class="form-label">Currency</label>
<div class="input-group">
<select class="custom-select custom-select-sm">
<option value="usd">USD</option>
<option value="euro">Euro</option>
<option value="gbp">GBP</option>
</select>
</div>
</div>
<!-- End Select -->
</div>
<!-- Input -->
<div class="mb-4">
<label id="descriptionLabel" class="h6 small d-block text-uppercase">Description</label>
<div class="js-form-message">
<div class="input-group input-group-sm">
<textarea class="form-control" rows="2" name="description" placeholder="Your payer will see this description on the payment request" aria-label="Your payer will see this description on the payment request" aria-describedby="descriptionLabel" required
data-msg="Please enter a valid reason."
data-error-class="u-has-error"
data-success-class="u-has-success"></textarea>
</div>
</div>
</div>
<!-- End Input -->
<!-- Datepicker -->
<div class="mb-4">
<label id="paymentDueByLabel" class="form-label">Payment due by</label>
<div id="datepickerWrapper" class="js-focus-state u-datepicker u-datepicker--top input-group input-group-sm">
<input class="js-range-datepicker form-control bg-transparent" type="text" placeholder="Due date" aria-label="Due date" aria-describedby="paymentDueByLabel" required
data-rp-wrapper="#datepickerWrapper"
data-rp-date-format="d/m/Y">
<div class="input-group-append">
<span class="input-group-text rounded-right">
<span class="far fa-calendar-alt"></span>
</span>
</div>
</div>
</div>
<!-- End Datepicker -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1" data-next-step="#attachDocumentsStep">Next</button>
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;" data-previous-step="#selectPlayerStep">Back</a>
</div>
<!-- End Buttons -->
</div>
<div id="attachDocumentsStep" style="display: none;">
<div class="mb-4">
<p>Attach up to 3 documents (like your invoice or work contact) to your payment request.</p>
<p>Do not have an invoice? <a href="#">Create a professional invoice for free and upload below.</a></p>
</div>
<!-- File Attachment Input -->
<label class="file-attachment-input mb-4" for="fileAttachmentInput">
Browse your device and upload documents
<small class="d-block text-muted">Maximum file size 10MB</small>
<input id="fileAttachmentInput" name="file-attachment" type="file" class="file-attachment-input__label">
</label>
<!-- End File Attachment Input -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Request Payment</button>
<a class="btn btn-sm btn-soft-secondary transition-3d-hover mr-1" href="javascript:;" data-previous-step="#paymentDetailsStep">Back</a>
</div>
<!-- End Buttons -->
</div>
</div>
<!-- End Content Step Form -->
</form>
<!-- End Request Payment Form -->
</div>
</div>
</div>
<!-- End Request Payment Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.validation.js"></script>
<script src="../../assets/js/components/hs.step-form.js"></script>
<script src="../../assets/js/components/hs.show-animation.js"></script>
<script src="../../assets/js/components/hs.range-datepicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of form validation
$.HSCore.components.HSValidation.init('.js-validate');
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-modal-window', {
autonomous: true
});
// initialization of step form
$.HSCore.components.HSStepForm.init('.js-step-form');
// initialization of show animations
$.HSCore.components.HSShowAnimation.init('.js-animation-link');
// initialization of range datepicker
$.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
});
</script>
Create project modal window #1
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#addProjectModal"
data-modal-target="#addProjectModal">
Open Create Project Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Create Project Modal Window -->
<div id="addProjectModal" class="js-modal-window u-modal-window" style="width: 680px;">
<form class="card mb-9">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-3">
<a class="small text-secondary" href="#">
<span class="fas fa-bookmark text-primary mr-1"></span>
FR-53
</a>
</div>
<div class="col-9 text-right">
<!-- Icons -->
<ul class="list-inline mb-0">
<li class="list-inline-item mr-0">
<a class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Give feedback">
<span class="fas fa-bullhorn btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Unwatch">
<span class="fas fa-eye-slash btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<!-- Settings Dropdown -->
<div class="position-relative">
<a id="createProjectSettingsDropdown1Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
aria-controls="createProjectSettingsDropdown1"
aria-haspopup="true"
aria-expanded="false"
data-unfold-event="click"
data-unfold-target="#createProjectSettingsDropdown1"
data-unfold-type="css-animation"
data-unfold-duration="300"
data-unfold-delay="300"
data-unfold-hide-on-scroll="true"
data-unfold-animation-in="slideInUp"
data-unfold-animation-out="fadeOut">
<span class="fas fa-ellipsis-h btn-icon__inner"></span>
</a>
<div id="createProjectSettingsDropdown1" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="createProjectSettingsDropdown1Invoker" style="min-width: 160px;">
<a class="dropdown-item" href="#">Log time</a>
<a class="dropdown-item" href="#">Add flag</a>
<a class="dropdown-item" href="#">Move</a>
<a class="dropdown-item" href="#">Clone</a>
</div>
</div>
<!-- End Settings Dropdown -->
</li>
<li class="list-inline-item mr-0">
<a class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" onclick="Custombox.modal.close();">
<span class="fas fa-times btn-icon__inner"></span>
</a>
</li>
</ul>
<!-- End Icons -->
</div>
</div>
</header>
<!-- End Header -->
<div class="card-body pt-3 pb-5 px-5">
<!-- Project Title -->
<div class="d-sm-flex justify-content-sm-between align-items-sm-center no-gutters mb-3">
<div class="mb-1 mb-sm-0 mr-3">
<div class="input-group input-group-borderless">
<input class="form-control pl-0" type="text" placeholder="Enter project title" aria-label="Enter project title">
</div>
</div>
<ul class="list-inline text-sm-right mb-0">
<li class="list-inline-item mr-0">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#" data-toggle="tooltip" data-placement="top" title="Add attach">
<span class="fas fa-paperclip btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#" data-toggle="tooltip" data-placement="top" title="Create subtask">
<span class="fas fa-clone btn-icon__inner"></span>
</a>
</li>
<li class="list-inline-item mr-0">
<a class="btn btn-sm btn-icon btn-soft-secondary" href="#" data-toggle="tooltip" data-placement="top" title="Link issue">
<span class="fas fa-link btn-icon__inner"></span>
</a>
</li>
</ul>
</div>
<!-- End Project Title -->
<!-- Status -->
<div class="row mx-gutters-2 mb-3">
<div class="col-sm-3 mb-3 mb-sm-0">
<label class="form-label">Status</label>
<!-- Select -->
<select class="js-select selectpicker dropdown-select" data-width="100%" data-style="btn-soft-primary btn-sm">
<option value="toDo">To Do</option>
<option value="inProgress">In Progress</option>
<option value="done">Done</option>
</select>
<!-- End Select -->
</div>
<div class="col-6 col-sm">
<label class="form-label">Assignee</label>
<!-- Select -->
<select class="js-select selectpicker dropdown-select" title="Add assignee"
data-width="100%"
data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="assignee1" data-tokens="user1" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description">
</span>
<span>Sebastian Diaz</span>
</span>'>
Sebastian Diaz
</option>
<option value="assignee2" data-tokens="user2" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img7.jpg" alt="Image Description">
</span>
<span>Eliza Donovan</span>
</span>'>
Eliza Donovan
</option>
<option value="assignee3" data-tokens="user3" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img6.jpg" alt="Image Description">
</span>
<span>Cameron Brown</span>
</span>'>
Cameron Brown
</option>
</select>
<!-- End Select -->
</div>
<div class="col-6 col-sm">
<label class="form-label">Choose project</label>
<!-- Select -->
<select class="js-select selectpicker dropdown-select dropdown-select--right" title="Choose project"
data-width="100%"
data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
data-live-search="true"
data-searchbox-classes="input-group-sm">
<option value="project1" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img11.jpg" alt="Image Description">
</span>
<span>Slack</span>
</span>'>
Slack
</option>
<option value="project2" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img12.jpg" alt="Image Description">
</span>
<span>DropBox</span>
</span>'>
DropBox
</option>
<option value="project3" data-content='
<span class="d-flex align-items-center">
<span class="u-xs-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img13.jpg" alt="Image Description">
</span>
<span>Spotify</span>
</span>'>
Spotify
</option>
</select>
<!-- End Select -->
</div>
</div>
<!-- End Status -->
<!-- Input -->
<textarea class="form-control" rows="3" placeholder="Add a description" aria-label="Add a description"></textarea>
<!-- End Input -->
<hr class="my-4">
<!-- Assignee -->
<div class="row">
<div class="col-sm-5 mb-4 mb-sm-0">
<label class="form-label">Reporter</label>
<div class="media align-items-center">
<div class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<h5 class="h6 font-weight-normal mb-0">Natalie Curtis</h5>
</div>
</div>
</div>
<div class="col-sm-7">
<label class="form-label">Followers</label>
<!-- Avatars -->
<ul class="list-inline mb-0">
<li class="list-inline-item mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Patrick Garner rounded-circle">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Amanta Owens">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img6.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="James Collins">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img7.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Josephina Mack rounded-circle">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img8.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a href="#">
<div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
<img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sebastian Diaz rounded-circle">
</div>
</a>
</li>
<li class="list-inline-item ml-n3 mb-1 mr-0">
<a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
<span class="btn-icon__inner">+3</span>
</a>
</li>
</ul>
<!-- End Avatars -->
</div>
</div>
<!-- End Assignee -->
<hr class="my-4">
<!-- Details -->
<div class="row justify-content-between">
<div class="col-6 col-sm-4 mb-4 mb-sm-0">
<label class="form-label">Due date</label>
<!-- Datepicker -->
<div id="datepickerWrapperExample1" class="u-datepicker input-group input-group-sm input-group-borderless">
<div class="input-group-prepend">
<span class="input-group-text p-0 mr-2">
<span class="fas fa-calendar" id="dueDate"></span>
</span>
</div>
<input class="js-range-datepicker form-control bg-transparent px-1" type="text" placeholder="Due date" aria-label="Due date" aria-describedby="dueDate"
data-rp-wrapper="#datepickerWrapperExample1"
data-rp-date-format="d/m/Y">
</div>
<!-- End Datepicker -->
</div>
<div class="col-6 col-sm-4 mb-4 mb-sm-0">
<label class="form-label">Priority</label>
<!-- Select -->
<select class="js-select selectpicker dropdown-select w-100" data-style="btn-sm bg-transparent font-weight-normal px-0">
<option value="priorityHighest" data-icon="fas fa-arrow-up text-danger small mr-2">Highest</option>
<option value="priorityHigh" data-icon="fas fa-arrow-up text-danger small mr-2">High</option>
<option value="priorityMedium" data-icon="fas fa-arrow-up text-warning small mr-2" selected>Medium</option>
<option value="priorityLow" data-icon="fas fa-arrow-down text-success small mr-2">Low</option>
<option value="priorityLowest" data-icon="fas fa-arrow-down text-success small mr-2">Lowest</option>
</select>
<!-- End Select -->
</div>
<div class="col-sm-4">
<label class="form-label">Budget</label>
<div class="input-group input-group-sm input-group-borderless">
<input class="form-control p-0" type="text" placeholder="Project budget" aria-label="Project budget">
</div>
</div>
</div>
<!-- End Details -->
<hr class="my-4">
<!-- Label Input -->
<label class="form-label">Labels</label>
<div class="u-tagsinput">
<input type="text" value="HTML5, CSS3" data-role="tagsinput">
</div>
<!-- End Label Input -->
<hr class="my-4">
<!-- Comments -->
<div class="mb-3">
<label class="form-label">Comments</label>
<div class="media">
<div class="u-sm-avatar mr-2">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
</div>
<div class="media-body">
<textarea class="form-control" rows="2" placeholder="Add a comment" aria-label="Add a comment"></textarea>
</div>
</div>
</div>
<!-- End Comments -->
<!-- Buttons -->
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
<!-- End Buttons -->
</div>
</form>
</div>
<!-- End Create Project Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="../../assets/vendor/bootstrap-tagsinput/css/bootstrap-tagsinput.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>
<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="../../assets/vendor/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.unfold.js"></script>
<script src="../../assets/js/components/hs.selectpicker.js"></script>
<script src="../../assets/js/components/hs.range-datepicker.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of unfold component
$.HSCore.components.HSUnfold.init($('[data-unfold-target]'));
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-modal-window', {
autonomous: true
});
// initialization of select picker
$.HSCore.components.HSSelectPicker.init('.js-select');
// initialization of range datepicker
$.HSCore.components.HSRangeDatepicker.init('.js-range-datepicker');
});
</script>
Add members modal window #1
Open Add Members Modal
Add members
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#addMembersModal"
data-modal-target="#addMembersModal">
Open Add Members Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Add Members Modal Window -->
<div id="addMembersModal" class="js-modal-window u-modal-window" style="width: 540px;">
<div class="card mb-9">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="row justify-content-between align-items-center no-gutters">
<h3 class="h6 mb-0">Add members</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<form>
<!-- Body -->
<div class="card-body pt-5 px-5">
<!-- Add Members -->
<div class="input-group mb-4">
<input type="email" class="form-control" placeholder="Enter email or username" aria-label="Enter email or username" aria-describedby="addMemberButton">
<div class="input-group-append">
<button type="button" class="btn btn-primary" id="addMemberButton">Invite</button>
</div>
</div>
<!-- End Add Members -->
<!-- Card -->
<div class="card card-frame mb-2">
<div class="card-body">
<div class="media d-block d-sm-flex justify-content-sm-between align-items-sm-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle mb-2 mb-sm-0" src="../../assets/img/100x100/img9.jpg" alt="Image Description">
</div>
<div class="media-body mb-2 mb-sm-0">
<h4 class="h6 mb-0">Patrick Garner</h4>
<small class="d-block text-secondary">patrickgarner@gmail.com</small>
</div>
<div class="media-body text-sm-right">
<span class="u-label u-label--sm u-label--success u-label--rounded">Admin</span>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-2">
<div class="card-body">
<div class="media d-block d-sm-flex justify-content-sm-between align-items-sm-center">
<span class="btn btn-icon btn-soft-danger rounded-circle mr-3">
<span class="btn-icon__inner">AO</span>
</span>
<div class="media-body mb-2 mb-sm-0">
<h4 class="h6 mb-0">Amanta Owens</h4>
<small class="d-block text-secondary">amantaowens@gmail.com</small>
</div>
<div class="media-body text-sm-right">
<button type="button" class="btn btn-xs btn-soft-primary transition-3d-hover">Add</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-2">
<div class="card-body">
<div class="media d-block d-sm-flex justify-content-sm-between align-items-sm-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img8.jpg" alt="Image Description">
</div>
<div class="media-body mb-2 mb-sm-0">
<h4 class="h6 mb-0">Sebastian Diaz</h4>
<small class="d-block text-secondary">sebastiandiaz@gmail.com</small>
</div>
<div class="media-body text-sm-right">
<button type="button" class="btn btn-xs btn-soft-primary transition-3d-hover">Add</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-2">
<div class="card-body">
<div class="media d-block d-sm-flex justify-content-sm-between align-items-sm-center">
<span class="btn btn-icon btn-soft-success rounded-circle mr-3">
<span class="btn-icon__inner">CL</span>
</span>
<div class="media-body mb-2 mb-sm-0">
<h4 class="h6 mb-0">Cler Lockhart</h4>
<small class="d-block text-secondary">clerlockhart@gmail.com</small>
</div>
<div class="media-body text-sm-right">
<button type="button" class="btn btn-xs btn-soft-primary transition-3d-hover">Add</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-2">
<div class="card-body">
<div class="media d-block d-sm-flex justify-content-sm-between align-items-sm-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
</div>
<div class="media-body mb-2 mb-sm-0">
<h4 class="h6 mb-0">Joseph Mack</h4>
<small class="d-block text-secondary">josephmack@gmail.com</small>
</div>
<div class="media-body text-sm-right">
<button type="button" class="btn btn-xs btn-soft-primary transition-3d-hover">Add</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="card card-frame mb-2">
<div class="card-body">
<div class="media d-block d-sm-flex justify-content-sm-between align-items-sm-center">
<div class="u-avatar mr-3">
<img class="img-fluid rounded-circle" src="../../assets/img/100x100/img10.jpg" alt="Image Description">
</div>
<div class="media-body mb-2 mb-sm-0">
<h4 class="h6 mb-0">Eliza Donovan</h4>
<small class="d-block text-secondary">eliz@gmail.com</small>
</div>
<div class="media-body text-sm-right">
<button type="button" class="btn btn-xs btn-soft-primary transition-3d-hover">Add</button>
</div>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer pb-5 px-0 mx-5">
<div class="row align-items-sm-center">
<div class="col-sm-5 mb-2 mb-sm-0">
<small class="text-muted">Copy link to this project</small>
</div>
<div class="col-sm-7">
<div class="js-focus-state">
<div class="input-group input-group-sm">
<input id="referralLink" type="text" class="form-control" value="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
<div class="input-group-append">
<a class="js-clipboard input-group-text" href="javascript:;"
data-content-target="#referralLink"
data-class-change-target="#linkIcon"
data-default-class="fas fa-clone"
data-success-class="fas fa-check">
<span id="linkIcon" class="fas fa-clone"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Footer -->
</form>
</div>
</div>
<!-- End Add Members Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<script src="../../assets/vendor/clipboard/dist/clipboard.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<script src="../../assets/js/components/hs.clipboard.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-modal-window', {
autonomous: true
});
// initialization of clipboard
$.HSCore.components.HSClipboard.init('.js-clipboard');
});
</script>
Change password modal window #1
Open Add Members Modal
Verify phone number
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#twoStepVerificationModal"
data-modal-target="#twoStepVerificationModal">
Open Add Members Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Two-Step Verification Modal Window -->
<div id="twoStepVerificationModal" class="js-modal-window u-modal-window u-modal-window--payment rounded">
<div class="card border-0">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-6">
<h4 class="h6 mb-0">Verify phone number</h4>
</div>
<div class="col-6 text-right">
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</header>
<!-- End Header -->
<form class="js-validate">
<div class="card-body p-5">
<!-- Input Group -->
<div class="mb-4">
<label class="h6 small d-block text-uppercase mb-2">
Choose country
</label>
<div class="js-form-message">
<div class="input-group">
<select class="custom-select">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CX">Christmas Island</option>
<option value="CC">Cocos (Keeling) Islands</option>
<option value="CO">Colombia</option>
<option value="KM">Comoros</option>
<option value="CG">Congo</option>
<option value="CD">Congo, the Democratic Republic of the</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CI">Côte d'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CW">Curaçao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
<option value="EC">Ecuador</option>
<option value="EG">Egypt</option>
<option value="SV">El Salvador</option>
<option value="GQ">Equatorial Guinea</option>
<option value="ER">Eritrea</option>
<option value="EE">Estonia</option>
<option value="ET">Ethiopia</option>
<option value="FK">Falkland Islands (Malvinas)</option>
<option value="FO">Faroe Islands</option>
<option value="FJ">Fiji</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GF">French Guiana</option>
<option value="PF">French Polynesia</option>
<option value="TF">French Southern Territories</option>
<option value="GA">Gabon</option>
<option value="GM">Gambia</option>
<option value="GE">Georgia</option>
<option value="DE">Germany</option>
<option value="GH">Ghana</option>
<option value="GI">Gibraltar</option>
<option value="GR">Greece</option>
<option value="GL">Greenland</option>
<option value="GD">Grenada</option>
<option value="GP">Guadeloupe</option>
<option value="GU">Guam</option>
<option value="GT">Guatemala</option>
<option value="GG">Guernsey</option>
<option value="GN">Guinea</option>
<option value="GW">Guinea-Bissau</option>
<option value="GY">Guyana</option>
<option value="HT">Haiti</option>
<option value="HM">Heard Island and McDonald Islands</option>
<option value="VA">Holy See (Vatican City State)</option>
<option value="HN">Honduras</option>
<option value="HK">Hong Kong</option>
<option value="HU">Hungary</option>
<option value="IS">Iceland</option>
<option value="IN">India</option>
<option value="ID">Indonesia</option>
<option value="IR">Iran, Islamic Republic of</option>
<option value="IQ">Iraq</option>
<option value="IE">Ireland</option>
<option value="IM">Isle of Man</option>
<option value="IL">Israel</option>
<option value="IT">Italy</option>
<option value="JM">Jamaica</option>
<option value="JP">Japan</option>
<option value="JE">Jersey</option>
<option value="JO">Jordan</option>
<option value="KZ">Kazakhstan</option>
<option value="KE">Kenya</option>
<option value="KI">Kiribati</option>
<option value="KP">Korea, Democratic People's Republic of</option>
<option value="KR">Korea, Republic of</option>
<option value="KW">Kuwait</option>
<option value="KG">Kyrgyzstan</option>
<option value="LA">Lao People's Democratic Republic</option>
<option value="LV">Latvia</option>
<option value="LB">Lebanon</option>
<option value="LS">Lesotho</option>
<option value="LR">Liberia</option>
<option value="LY">Libya</option>
<option value="LI">Liechtenstein</option>
<option value="LT">Lithuania</option>
<option value="LU">Luxembourg</option>
<option value="MO">Macao</option>
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
<option value="MG">Madagascar</option>
<option value="MW">Malawi</option>
<option value="MY">Malaysia</option>
<option value="MV">Maldives</option>
<option value="ML">Mali</option>
<option value="MT">Malta</option>
<option value="MH">Marshall Islands</option>
<option value="MQ">Martinique</option>
<option value="MR">Mauritania</option>
<option value="MU">Mauritius</option>
<option value="YT">Mayotte</option>
<option value="MX">Mexico</option>
<option value="FM">Micronesia, Federated States of</option>
<option value="MD">Moldova, Republic of</option>
<option value="MC">Monaco</option>
<option value="MN">Mongolia</option>
<option value="ME">Montenegro</option>
<option value="MS">Montserrat</option>
<option value="MA">Morocco</option>
<option value="MZ">Mozambique</option>
<option value="MM">Myanmar</option>
<option value="NA">Namibia</option>
<option value="NR">Nauru</option>
<option value="NP">Nepal</option>
<option value="NL">Netherlands</option>
<option value="NC">New Caledonia</option>
<option value="NZ">New Zealand</option>
<option value="NI">Nicaragua</option>
<option value="NE">Niger</option>
<option value="NG">Nigeria</option>
<option value="NU">Niue</option>
<option value="NF">Norfolk Island</option>
<option value="MP">Northern Mariana Islands</option>
<option value="NO">Norway</option>
<option value="OM">Oman</option>
<option value="PK">Pakistan</option>
<option value="PW">Palau</option>
<option value="PS">Palestinian Territory, Occupied</option>
<option value="PA">Panama</option>
<option value="PG">Papua New Guinea</option>
<option value="PY">Paraguay</option>
<option value="PE">Peru</option>
<option value="PH">Philippines</option>
<option value="PN">Pitcairn</option>
<option value="PL">Poland</option>
<option value="PT">Portugal</option>
<option value="PR">Puerto Rico</option>
<option value="QA">Qatar</option>
<option value="RE">Réunion</option>
<option value="RO">Romania</option>
<option value="RU">Russian Federation</option>
<option value="RW">Rwanda</option>
<option value="BL">Saint Barthélemy</option>
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
<option value="KN">Saint Kitts and Nevis</option>
<option value="LC">Saint Lucia</option>
<option value="MF">Saint Martin (French part)</option>
<option value="PM">Saint Pierre and Miquelon</option>
<option value="VC">Saint Vincent and the Grenadines</option>
<option value="WS">Samoa</option>
<option value="SM">San Marino</option>
<option value="ST">Sao Tome and Principe</option>
<option value="SA">Saudi Arabia</option>
<option value="SN">Senegal</option>
<option value="RS">Serbia</option>
<option value="SC">Seychelles</option>
<option value="SL">Sierra Leone</option>
<option value="SG">Singapore</option>
<option value="SX">Sint Maarten (Dutch part)</option>
<option value="SK">Slovakia</option>
<option value="SI">Slovenia</option>
<option value="SB">Solomon Islands</option>
<option value="SO">Somalia</option>
<option value="ZA">South Africa</option>
<option value="GS">South Georgia and the South Sandwich Islands</option>
<option value="SS">South Sudan</option>
<option value="ES">Spain</option>
<option value="LK">Sri Lanka</option>
<option value="SD">Sudan</option>
<option value="SR">Suriname</option>
<option value="SJ">Svalbard and Jan Mayen</option>
<option value="SZ">Swaziland</option>
<option value="SE">Sweden</option>
<option value="CH">Switzerland</option>
<option value="SY">Syrian Arab Republic</option>
<option value="TW">Taiwan, Province of China</option>
<option value="TJ">Tajikistan</option>
<option value="TZ">Tanzania, United Republic of</option>
<option value="TH">Thailand</option>
<option value="TL">Timor-Leste</option>
<option value="TG">Togo</option>
<option value="TK">Tokelau</option>
<option value="TO">Tonga</option>
<option value="TT">Trinidad and Tobago</option>
<option value="TN">Tunisia</option>
<option value="TR">Turkey</option>
<option value="TM">Turkmenistan</option>
<option value="TC">Turks and Caicos Islands</option>
<option value="TV">Tuvalu</option>
<option value="UG">Uganda</option>
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option value="US" selected>United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option>
<option value="UZ">Uzbekistan</option>
<option value="VU">Vanuatu</option>
<option value="VE">Venezuela, Bolivarian Republic of</option>
<option value="VN">Viet Nam</option>
<option value="VG">Virgin Islands, British</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="WF">Wallis and Futuna</option>
<option value="EH">Western Sahara</option>
<option value="YE">Yemen</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<label class="h6 small d-block text-uppercase mb-2">
Phone number
</label>
<div class="js-form-message js-focus-state">
<div class="input-group">
<div class="input-group-prepend" id="phoneNumber">
<span class="input-group-text">+01</span>
</div>
<input type="text" class="form-control" name="name" placeholder="Phone number" aria-label="Phone number" aria-describedby="phoneNumber" required
data-msg="Please enter a valid phone number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
<!-- End Input Group -->
</div>
<!-- Card Footer -->
<div class="card-footer py-3 px-5">
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Next</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
</div>
<!-- End Card Footer -->
</form>
</div>
</div>
<!-- End Two-Step Verification Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-subscribe-window', {
autonomous: true
});
});
</script>
Add payment modal window #1
Open Add Members Modal
Create a new payment
<!-- Modal Window Trigger -->
<a class="btn btn-sm btn-primary transition-3d-hover" href="#addPaymentModal"
data-modal-target="#addPaymentModal">
Open Add Members Modal
</a>
<!-- End Modal Window Trigger -->
<!-- Account Modal Window -->
<div id="addPaymentModal" class="js-modal-window u-modal-window" style="width: 480px;">
<div class="card border-0">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-6">
<h4 class="h6 mb-0">Create a new payment</h4>
</div>
<div class="col-6 text-right">
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</header>
<!-- End Header -->
<form class="js-validate">
<div class="card-body p-5">
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label class="h6 small d-block text-uppercase mb-0">
Currency
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<select class="custom-select custom-select-sm">
<option value="currencySelectUSD">USD - US Dollar</option>
<option value="currencySelectAED">AED - United Arab Emirates Dirham</option>
<option value="currencySelectAFN">AFN - Afghan Afghani</option>
<option value="currencySelectALL">ALL - Albanian Lek</option>
<option value="currencySelectAMD">AMD - Armenian Dram</option>
<option value="currencySelectANG">ANG - Netherlands Antillean Guilder</option>
<option value="currencySelectAOA">AOA - Angolan Kwanza</option>
<option value="currencySelectARS">ARS - Argentine Peso</option>
<option value="currencySelectAUD">AUD - Australian Dollar</option>
<option value="currencySelectAWG">AWG - Aruban Florin</option>
<option value="currencySelectAZN">AZN - Azerbaijani Manat</option>
<option value="currencySelectBAM">BAM - Bosnia-Herzegovina Convertible Mark</option>
<option value="currencySelectBBD">BBD - Barbadian Dollar</option>
<option value="currencySelectBDT">BDT - Bangladeshi Taka</option>
<option value="currencySelectBGN">BGN - Bulgarian Lev</option>
<option value="currencySelectBIF">BIF - Burundian Franc</option>
<option value="currencySelectBMD">BMD - Bermudan Dollar</option>
<option value="currencySelectBND">BND - Brunei Dollar</option>
<option value="currencySelectBOB">BOB - Bolivian Boliviano</option>
<option value="currencySelectBRL">BRL - Brazilian Real</option>
<option value="currencySelectBSD">BSD - Bahamian Dollar</option>
<option value="currencySelectBWP">BWP - Botswanan Pula</option>
<option value="currencySelectBZD">BZD - Belize Dollar</option>
<option value="currencySelectCAD">CAD - Canadian Dollar</option>
<option value="currencySelectCDF">CDF - Congolese Franc</option>
<option value="currencySelectCHF">CHF - Swiss Franc</option>
<option value="currencySelectCLP">CLP - Chilean Peso</option>
<option value="currencySelectCNY">CNY - Chinese Yuan</option>
<option value="currencySelectCOP">COP - Colombian Peso</option>
<option value="currencySelectCRC">CRC - Costa Rican Colón</option>
<option value="currencySelectCVE">CVE - Cape Verdean Escudo</option>
<option value="currencySelectCZK">CZK - Czech Koruna</option>
<option value="currencySelectDJF">DJF - Djiboutian Franc</option>
<option value="currencySelectDKK">DKK - Danish Krone</option>
<option value="currencySelectDOP">DOP - Dominican Peso</option>
<option value="currencySelectDZD">DZD - Algerian Dinar</option>
<option value="currencySelectEGP">EGP - Egyptian Pound</option>
<option value="currencySelectETB">ETB - Ethiopian Birr</option>
<option value="currencySelectEUR">EUR - Euro</option>
<option value="currencySelectFJD">FJD - Fijian Dollar</option>
<option value="currencySelectFKP">FKP - Falkland Islands Pound</option>
<option value="currencySelectGBP">GBP - British Pound</option>
<option value="currencySelectGEL">GEL - Georgian Lari</option>
<option value="currencySelectGIP">GIP - Gibraltar Pound</option>
<option value="currencySelectGMD">GMD - Gambian Dalasi</option>
<option value="currencySelectGNF">GNF - Guinean Franc</option>
<option value="currencySelectGTQ">GTQ - Guatemalan Quetzal</option>
<option value="currencySelectGYD">GYD - Guyanaese Dollar</option>
<option value="currencySelectHKD">HKD - Hong Kong Dollar</option>
<option value="currencySelectHNL">HNL - Honduran Lempira</option>
<option value="currencySelectHRK">HRK - Croatian Kuna</option>
<option value="currencySelectHTG">HTG - Haitian Gourde</option>
<option value="currencySelectHUF">HUF - Hungarian Forint</option>
<option value="currencySelectIDR">IDR - Indonesian Rupiah</option>
<option value="currencySelectILS">ILS - Israeli New Shekel</option>
<option value="currencySelectINR">INR - Indian Rupee</option>
<option value="currencySelectISK">ISK - Icelandic Króna</option>
<option value="currencySelectJMD">JMD - Jamaican Dollar</option>
<option value="currencySelectJPY">JPY - Japanese Yen</option>
<option value="currencySelectKES">KES - Kenyan Shilling</option>
<option value="currencySelectKGS">KGS - Kyrgystani Som</option>
<option value="currencySelectKHR">KHR - Cambodian Riel</option>
<option value="currencySelectKMF">KMF - Comorian Franc</option>
<option value="currencySelectKRW">KRW - South Korean Won</option>
<option value="currencySelectKYD">KYD - Cayman Islands Dollar</option>
<option value="currencySelectKZT">KZT - Kazakhstani Tenge</option>
<option value="currencySelectLAK">LAK - Laotian Kip</option>
<option value="currencySelectLBP">LBP - Lebanese Pound</option>
<option value="currencySelectLKR">LKR - Sri Lankan Rupee</option>
<option value="currencySelectLRD">LRD - Liberian Dollar</option>
<option value="currencySelectLSL">LSL - Lesotho Loti</option>
<option value="currencySelectMAD">MAD - Moroccan Dirham</option>
<option value="currencySelectMDL">MDL - Moldovan Leu</option>
<option value="currencySelectMGA">MGA - Malagasy Ariary</option>
<option value="currencySelectMKD">MKD - Macedonian Denar</option>
<option value="currencySelectMMK">MMK - Myanmar Kyat</option>
<option value="currencySelectMNT">MNT - Mongolian Tugrik</option>
<option value="currencySelectMOP">MOP - Macanese Pataca</option>
<option value="currencySelectMRO">MRO - Mauritanian Ouguiya</option>
<option value="currencySelectMUR">MUR - Mauritian Rupee</option>
<option value="currencySelectMVR">MVR - Maldivian Rufiyaa</option>
<option value="currencySelectMWK">MWK - Malawian Kwacha</option>
<option value="currencySelectMXN">MXN - Mexican Peso</option>
<option value="currencySelectMYR">MYR - Malaysian Ringgit</option>
<option value="currencySelectMZN">MZN - Mozambican Metical</option>
<option value="currencySelectNAD">NAD - Namibian Dollar</option>
<option value="currencySelectNGN">NGN - Nigerian Naira</option>
<option value="currencySelectNIO">NIO - Nicaraguan Córdoba</option>
<option value="currencySelectNOK">NOK - Norwegian Krone</option>
<option value="currencySelectNPR">NPR - Nepalese Rupee</option>
<option value="currencySelectNZD">NZD - New Zealand Dollar</option>
<option value="currencySelectPAB">PAB - Panamanian Balboa</option>
<option value="currencySelectPEN">PEN - Peruvian Sol</option>
<option value="currencySelectPGK">PGK - Papua New Guinean Kina</option>
<option value="currencySelectPHP">PHP - Philippine Peso</option>
<option value="currencySelectPKR">PKR - Pakistani Rupee</option>
<option value="currencySelectPLN">PLN - Polish Zloty</option>
<option value="currencySelectPYG">PYG - Paraguayan Guarani</option>
<option value="currencySelectQAR">QAR - Qatari Rial</option>
<option value="currencySelectRON">RON - Romanian Leu</option>
<option value="currencySelectRSD">RSD - Serbian Dinar</option>
<option value="currencySelectRUB">RUB - Russian Ruble</option>
<option value="currencySelectRWF">RWF - Rwandan Franc</option>
<option value="currencySelectSAR">SAR - Saudi Riyal</option>
<option value="currencySelectSBD">SBD - Solomon Islands Dollar</option>
<option value="currencySelectSCR">SCR - Seychellois Rupee</option>
<option value="currencySelectSEK">SEK - Swedish Krona</option>
<option value="currencySelectSGD">SGD - Singapore Dollar</option>
<option value="currencySelectSHP">SHP - St. Helena Pound</option>
<option value="currencySelectSLL">SLL - Sierra Leonean Leone</option>
<option value="currencySelectSOS">SOS - Somali Shilling</option>
<option value="currencySelectSRD">SRD - Surinamese Dollar</option>
<option value="currencySelectSTD">STD - São Tomé & Príncipe Dobra</option>
<option value="currencySelectSVC">SVC - Salvadoran Colón</option>
<option value="currencySelectSZL">SZL - Swazi Lilangeni</option>
<option value="currencySelectTHB">THB - Thai Baht</option>
<option value="currencySelectTJS">TJS - Tajikistani Somoni</option>
<option value="currencySelectTOP">TOP - Tongan Paʻanga</option>
<option value="currencySelectTRY">TRY - Turkish Lira</option>
<option value="currencySelectTTD">TTD - Trinidad & Tobago Dollar</option>
<option value="currencySelectTWD">TWD - New Taiwan Dollar</option>
<option value="currencySelectTZS">TZS - Tanzanian Shilling</option>
<option value="currencySelectUAH">UAH - Ukrainian Hryvnia</option>
<option value="currencySelectUGX">UGX - Ugandan Shilling</option>
<option value="currencySelectUYU">UYU - Uruguayan Peso</option>
<option value="currencySelectUZS">UZS - Uzbekistani Som</option>
<option value="currencySelectVND">VND - Vietnamese Dong</option>
<option value="currencySelectVUV">VUV - Vanuatu Vatu</option>
<option value="currencySelectWST">WST - Samoan Tala</option>
<option value="currencySelectXAF">XAF - Central African CFA Franc</option>
<option value="currencySelectXCD">XCD - East Caribbean Dollar</option>
<option value="currencySelectXOF">XOF - West African CFA Franc</option>
<option value="currencySelectXPF">XPF - CFP Franc</option>
<option value="currencySelectYER">YER - Yemeni Rial</option>
<option value="currencySelectZAR">ZAR - South African Rand</option>
<option value="currencySelectZMW">ZMW - Zambian Kwacha</option>
</select>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label id="amountLabelExample1" class="h6 small d-block text-uppercase mb-0">
Amount
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="input-group input-group-sm">
<input class="form-control" type="text" name="amount" required placeholder="$ 0.00" aria-label="$ 0.00" aria-describedby="amountLabelExample1"
data-msg="Please enter a valid amount."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label id="cardNumberLabel" class="h6 small d-block text-uppercase mb-0">
Card number
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="input-group input-group-sm">
<input class="form-control" type="number" name="cardNumber" required placeholder="Card number" aria-label="Card number" aria-describedby="cardNumberLabel"
data-msg="Please enter a valid card number."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label id="cardholderNameLabel" class="h6 small d-block text-uppercase mb-0">
Cardholder name
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="input-group input-group-sm">
<input class="form-control" type="text" name="cardholderName" required placeholder="Cardholder name" aria-label="Cardholder name" aria-describedby="cardholderNameLabel"
data-msg="Please enter a valid cardholder name."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-3">
<div class="col-4 text-right">
<label id="expiresLabel" class="h6 small d-block text-uppercase mb-0">
Expires
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="input-group input-group-sm">
<input class="form-control" type="number" name="expires" required placeholder="MM/YY" aria-label="MM/YY" aria-describedby="expiresLabel"
data-msg="Please enter a valid date."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="form-row align-items-center mb-0">
<div class="col-4 text-right">
<label id="cvcLabel" class="h6 small d-block text-uppercase mb-0">
<span class="fas fa-info-circle" data-toggle="tooltip" data-placement="left" title="If you have a Visa or Mastercard branded credit or debit card, it'll be a 3 digit number located on the back of your card."></span>
CVC
</label>
</div>
<div class="col-8">
<div class="js-form-message">
<div class="input-group input-group-sm">
<input class="form-control" type="number" name="cvc" required placeholder="***" aria-label="***" aria-describedby="cvcLabel"
data-msg="Please enter a valid code."
data-error-class="u-has-error"
data-success-class="u-has-success">
</div>
</div>
</div>
</div>
<!-- End Input Group -->
</div>
<!-- Buttons -->
<div class="card-footer py-3 px-5">
<div class="d-flex justify-content-end">
<button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Create Payment</button>
<button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
</div>
</div>
<!-- End Buttons -->
</form>
</div>
</div>
<!-- End Account Modal Window -->
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css/animate.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
<!-- JS Front -->
<script src="../../assets/js/components/hs.modal-window.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('load', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', .js-subscribe-window', {
autonomous: true
});
});
</script>