Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Applicant Form | Praesto & Guarded</title>
    <style>
        :root {
            --praesto-navy: #0f172a;
            --praesto-blue: #2563eb;
            --praesto-slate: #64748b;
            --praesto-border: #e2e8f0;
        }

        body {
            background-color: #f8fafc;
            font-family: "Inter", -apple-system, sans-serif;
            color: var(--praesto-navy);
            padding: 20px;
        }

        #__vtigerWebForm_container {
            max-width: 800px;
            margin: 40px auto;
            background: #ffffff;
            border: 1px solid var(--praesto-border);
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        h2 {
            margin-top: 0;
            font-size: 1.75rem;
            text-align: center;
            color: var(--praesto-navy);
        }

        .form-intro {
            text-align: center;
            color: var(--praesto-slate);
            margin-bottom: 30px;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .form-group {
            flex: 1;
            min-width: 250px;
        }

        label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        input[type="text"],
        input[type="email"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 1.5px solid var(--praesto-border);
            border-radius: 6px;
            font-size: 1rem;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--praesto-blue);
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        }

        .file-upload-group {
            background: #f1f5f9;
            padding: 15px;
            border-radius: 8px;
            border: 1px dashed var(--praesto-slate);
        }

        .submit-btn {
            width: 100%;
            background-color: var(--praesto-navy);
            color: white;
            padding: 16px;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
            margin-top: 20px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .submit-btn:hover {
            background-color: var(--praesto-blue);
        }

        .submit-btn:disabled {
            background-color: var(--praesto-slate);
            cursor: not-allowed;
        }

        .loader {
            display: none;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top: 3px solid #ffffff;
            width: 18px;
            height: 18px;
            margin-left: 12px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .processing .loader {
            display: block;
        }

        .g-recaptcha {
            margin: 20px 0;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>

<div id="__vtigerWebForm_container">
    <h2>Join the Team</h2>
    <p class="form-intro">Please provide your details and documents to start your application.</p>

    <form id="__vtigerWebForm" name="Applicant with documents" action="https://guard.360vew.com/modules/Webforms/capture.php" method="post" accept-charset="utf-8" enctype="multipart/form-data">
        <input type="hidden" name="__vtrftk" value="sid:cbc62cfcf51b30b726c7cb632bf299b9a1aa7438,1753379382">
        <input type="hidden" name="publicid" value="6ac3e902ff04415d366ade1f1656d9f6">
        <input type="hidden" name="urlencodeenable" value="1">
        <input type="hidden" name="name" value="Applicant with documents">
        <input type="hidden" name="cf_2735" value="Applicant">

        <div class="form-row">
            <div class="form-group">
                <label>First Name*</label>
                <input type="text" name="firstname" required data-label="First Name">
            </div>
            <div class="form-group">
                <label>Last Name*</label>
                <input type="text" name="lastname" required data-label="Last Name">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>Primary Email*</label>
                <input type="email" name="email" required data-label="Email">
            </div>
            <div class="form-group">
                <label>Mobile Phone*</label>
                <input type="text" name="mobile" required data-label="Mobile Phone">
            </div>
        </div>

        <div class="form-group" style="margin-bottom: 20px;">
            <label>LinkedIn Profile*</label>
            <input type="text" name="cf_805" value="https://www.linkedin.com/in/" required data-label="LinkedIn Profile">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>Birth Date*</label>
                <input type="date" name="birthday" required data-label="Birth Date">
            </div>
            <div class="form-group">
                <label>Gender*</label>
                <select name="cf_1718" required data-label="Gender">
                    <option value="">Select</option>
                    <option value="Male" selected>Male</option>
                    <option value="Female">Female</option>
                    <option value="Unknown">Unknown</option>
                </select>
            </div>
        </div>

        <div class="form-group" style="margin-bottom: 20px;">
            <label>Street Address*</label>
            <textarea name="mailingstreet" rows="2" required data-label="Street"></textarea>
        </div>

        <div class="form-row">
            <div class="form-group">
                <label>City*</label>
                <input type="text" name="mailingcity" required data-label="City">
            </div>
            <div class="form-group">
                <label>State*</label>
                <input type="text" name="mailingstate" required data-label="State">
            </div>
            <div class="form-group">
                <label>Zip*</label>
                <input type="text" name="mailingzip" required data-label="Zip">
            </div>
        </div>

        <div class="form-row">
            <div class="form-group file-upload-group">
                <label>Government ID (.png, .jpg)*</label>
                <input type="file" name="file_20_1" accept=".png, .jpg, .jpeg">
            </div>
            <div class="form-group file-upload-group">
                <label>Headshot (.png, .jpg)*</label>
                <input type="file" name="file_20_2" accept=".png, .jpg, .jpeg">
            </div>
        </div>

        <div class="g-recaptcha" data-sitekey="6LcBq8YrAAAAAOEaUAexTvsJ6A7Z9RCVsv6TS3R1"></div>

        <button type="submit" class="submit-btn">
            <span class="btn-text">Submit Application</span>
            <div class="loader"></div>
        </button>
    </form>
</div>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
window.onload = function() {
    var form = document.getElementById("__vtigerWebForm");
    var submitBtn = document.querySelector('.submit-btn');
    var btnText = document.querySelector('.btn-text');
    
    form.onsubmit = function(e) {
        var inputs = form.elements;
        var requiredMissing = [];
        
        // 1. CAPTCHA Check
        var recaptchaResponse = grecaptcha.getResponse();
        if (recaptchaResponse.length === 0) {
            alert("Please complete the reCAPTCHA verification.");
            return false;
        }

        // 2. Validation Loop
        for (var i = 0; i < inputs.length; i++) {
            var input = inputs[i];
            var label = input.getAttribute("data-label") || input.name;
            
            if (input.hasAttribute("required") && input.value.trim() === "") {
                requiredMissing.push(label);
            }

            if (input.type === "email" && input.value !== "") {
                var emailFilter = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailFilter.test(input.value)) {
                    alert("Please enter a valid email address.");
                    return false;
                }
            }
        }

        if (requiredMissing.length > 0) {
            alert("Missing required fields: " + requiredMissing.join(", "));
            return false;
        }

        // 3. File Validation (Type and Size)
        var totalSize = 0;
        var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
        var files = form.querySelectorAll('input[type="file"]');
        
        for (var i = 0; i < files.length; i++) {
            var fileInput = files[i];
            var file = fileInput.files[0];
            
            if (file) {
                if (!allowedExtensions.exec(file.name)) {
                    var fieldLabel = fileInput.previousElementSibling.innerText;
                    alert("Invalid file type for " + fieldLabel + ". Only .png and .jpg files are permitted.");
                    fileInput.value = ''; // Clear the invalid file
                    return false;
                }
                totalSize += file.size;
            }
        }
        
        if (totalSize > 52428800) {
            alert("Total file size exceeds the 50MB limit.");
            return false;
        }

        // 4. Trigger UI Processing State
        submitBtn.classList.add('processing');
        submitBtn.disabled = true;
        btnText.innerText = "Processing...";

        return true;
    };
};
</script>

</body>
</html>

Toronto construction site at sunset with skyline view.

Praesto Network MSP

Praesto Network empowers small MSPs to boost profits, protect clients, and build value - one monthly bill at a time.
All-in-one support across the Four Pillars - from client operations and IT helpdesk to security and back-office admin.
Freedom to grow your way - our monthly subscription keeps you nimble and in control.
A community of peers and experts - backing you up at every step.