





<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Client Intake Form | Darin Froese</title>
<style>
  :root {
    --dark-green: #14342a;
    --accent-green: #1f5c45;
    --black: #111111;
    --white: #ffffff;
    --off-white: #f4f6f5;
    --gray: #6b7570;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background: var(--off-white);
    color: var(--black);
  }

  header {
    background: var(--dark-green);
    color: var(--white);
    padding: 40px 20px 32px;
    text-align: center;
  }

  header h1 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  header p {
    margin: 0;
    color: #cfe0d7;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .wrap {
    max-width: 620px;
    margin: -24px auto 60px;
    padding: 0 20px;
  }

  .card {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    padding: 36px 32px 32px;
    border-top: 5px solid var(--dark-green);
  }

  .intro {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.6;
    margin-bottom: 28px;
    border-bottom: 1px solid #e3e7e5;
    padding-bottom: 20px;
  }

  .section-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dark-green);
    margin: 26px 0 14px;
  }

  .section-label:first-of-type { margin-top: 0; }

  .row {
    display: flex;
    gap: 16px;
  }

  .row .field { flex: 1; }

  .field {
    margin-bottom: 18px;
  }

  label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 6px;
  }

  label .req { color: var(--accent-green); }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="file"],
  select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d3d9d6;
    border-radius: 5px;
    font-size: 15px;
    font-family: inherit;
    background: var(--white);
    color: var(--black);
  }

  input:focus, select:focus {
    outline: none;
    border-color: var(--dark-green);
    box-shadow: 0 0 0 3px rgba(20,52,42,0.12);
  }

  select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8'><path d='M0 0l7 8 7-8z' fill='%2314342a'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
  }

  button[type="submit"] {
    width: 100%;
    background: var(--dark-green);
    color: var(--white);
    border: none;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.15s ease;
  }

  button[type="submit"]:hover {
    background: var(--black);
  }

  .person-block + .person-block {
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px dashed #d3d9d6;
  }

  .add-person-row {
    margin: 6px 0 8px;
  }

  #add-person-btn {
    width: 100%;
    background: var(--white);
    color: var(--dark-green);
    border: 1.5px dashed var(--accent-green);
    padding: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  #add-person-btn:hover {
    background: var(--off-white);
  }

  .remove-person-row {
    text-align: right;
    margin-top: -6px;
  }

  .remove-person-btn {
    background: none;
    border: none;
    color: var(--gray);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
  }

  .remove-person-btn:hover {
    color: var(--black);
  }

  .disclaimer {
    font-size: 11.5px;
    color: var(--gray);
    line-height: 1.5;
    margin-top: 16px;
    text-align: center;
  }

  footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: var(--gray);
  }

  .honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
  }

  .file-hint {
    font-size: 12px;
    color: var(--gray);
    margin-top: 5px;
  }

  .reveal-section {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease;
  }

  .reveal-section.visible {
    max-height: 300px;
    opacity: 1;
  }

  .checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .checkbox-field input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--dark-green);
  }

  .checkbox-field label {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
  }
</style>
</head>
<body>

<header>
  <h1>Darin Froese</h1>
  <p>Grassroots Realty Group &mdash; Client Intake Form</p>
</header>

<div class="wrap">
  <div class="card">
    <div class="intro">
      Please complete the form below. Fields marked <span style="color:var(--accent-green); font-weight:700;">*</span> are required. Once submitted, your information will be sent securely to Darin Froese's office for processing.
    </div>

    <form id="intake-form" action="https://formsubmit.co/darin@darinfroese.ca" method="POST" enctype="multipart/form-data">

      <!-- FormSubmit configuration -->
      <input type="hidden" name="_cc" value="admin@darinfroese.ca">
      <input type="hidden" name="_subject" value="New Client Intake Form Submission">
      <input type="hidden" name="_template" value="table">
      <input type="hidden" name="_captcha" value="false">
      <input type="hidden" name="_next" value="thanks.html">
      <input type="text" name="_honey" class="honeypot" tabindex="-1" autocomplete="off">
      <input type="hidden" name="Deal Completion Form Link" id="deal-link-field" value="">

      <div class="field">
        <label>Buyer, Seller, or Both <span class="req">*</span></label>
        <select name="Client Type" id="client-type-select" required onchange="document.getElementById('direct-deposit-section').classList.toggle('visible', this.value === 'Buyer' || this.value === 'Both');">
          <option value="" disabled selected>Select one&hellip;</option>
          <option value="Buyer">Buyer</option>
          <option value="Seller">Seller</option>
          <option value="Both">Both</option>
        </select>
      </div>

      <div class="person-block" id="person-1">
        <div class="section-label" data-base-label="Personal Information">Personal Information</div>

        <div class="row">
          <div class="field">
            <label>Legal First Name <span class="req">*</span></label>
            <input type="text" name="Legal First Name" required>
          </div>
          <div class="field">
            <label>Last Name <span class="req">*</span></label>
            <input type="text" name="Last Name" required>
          </div>
        </div>

        <div class="row">
          <div class="field">
            <label>Phone Number <span class="req">*</span></label>
            <input type="tel" name="Phone Number" required>
          </div>
          <div class="field">
            <label>Email <span class="req">*</span></label>
            <input type="email" name="Email" required>
          </div>
        </div>

        <div class="section-label" data-base-label="Physical Location">Physical Location</div>

        <div class="field">
          <label>Street Address <span class="req">*</span></label>
          <input type="text" name="Street Address" required>
          <div class="file-hint">No P.O. box numbers, please.</div>
        </div>

        <div class="row">
          <div class="field">
            <label>City <span class="req">*</span></label>
            <input type="text" name="City" required>
          </div>
          <div class="field">
            <label>Province <span class="req">*</span></label>
            <input type="text" name="Province" required>
          </div>
        </div>

        <div class="field">
          <label>Postal Code <span class="req">*</span></label>
          <input type="text" name="Postal Code" required>
        </div>

        <div class="section-label" data-base-label="Identification">Identification</div>

        <div class="field">
          <label>Upload Valid Driver's License or Passport <span class="req">*</span></label>
          <input type="file" name="Driver's License or Passport" accept="application/pdf,image/*" required>
          <div class="file-hint">Accepted formats: PDF, JPG, or PNG.</div>
        </div>

        <div class="section-label" data-base-label="Employment">Employment</div>

        <div class="field">
          <label>Place of Work <span class="req">*</span></label>
          <input type="text" name="Place of Work" required>
        </div>

        <div class="field">
          <label>Job Description <span class="req">*</span></label>
          <input type="text" name="Job Description" required>
        </div>
      </div>

      <div id="additional-persons"></div>

      <div class="add-person-row">
        <button type="button" id="add-person-btn" onclick="addPerson()">+ Add Another Person</button>
      </div>

      <div class="section-label">Identification &amp; Legal</div>

      <div class="field">
        <label>Preferred Lawyer <span class="req">*</span></label>
        <select name="Preferred Lawyer" id="lawyer-select" required onchange="document.getElementById('other-lawyer-field').style.display = this.value === 'Other' ? 'block' : 'none';">
          <option value="" disabled selected>Select a lawyer&hellip;</option>
          <option value="Mathieu Hryniuk">Mathieu Hryniuk</option>
          <option value="KMSC Law">KMSC Law</option>
          <option value="Murphy Law">Murphy Law</option>
          <option value="Other">Other</option>
        </select>
      </div>

      <div class="field" id="other-lawyer-field" style="display:none;">
        <label>Please Specify Lawyer</label>
        <input type="text" name="Other Lawyer">
      </div>

      <div id="direct-deposit-section" class="reveal-section">
        <div class="section-label">Deposit Information:</div>
        <div class="field checkbox-field">
          <input type="checkbox" name="Deposit Consent" value="Yes" id="deposit-consent">
          <label for="deposit-consent">I consent to providing the deposit as required for this transaction.</label>
        </div>
        <div class="field">
          <label>Upload Direct Deposit Form or Void Cheque</label>
          <input type="file" name="Direct Deposit Form / Void Cheque" accept="application/pdf,image/*">
          <div class="file-hint">Accepted formats: PDF, JPG, or PNG.</div>
        </div>
      </div>

      <button type="submit">Submit Intake Form</button>

      <div class="disclaimer">
        By submitting, you consent to Darin Froese and Grassroots Realty Group collecting and storing this information to process your transaction.
      </div>
    </form>
  </div>
</div>

<footer>
  &copy; 2026 Darin Froese &mdash; Grassroots Realty Group Ltd. &middot; 780-841-8860
</footer>

<script>
  let personCount = 1;

  function addPerson() {
    personCount++;
    const template = document.getElementById('person-1');
    const clone = template.cloneNode(true);
    clone.id = 'person-' + personCount;

    clone.querySelectorAll('input').forEach(function (input) {
      input.name = 'Person ' + personCount + ' - ' + input.name;
      input.value = '';
    });

    clone.querySelectorAll('.section-label').forEach(function (label) {
      label.textContent = 'Person ' + personCount + ' — ' + label.getAttribute('data-base-label');
    });

    const removeRow = document.createElement('div');
    removeRow.className = 'remove-person-row';
    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'remove-person-btn';
    removeBtn.textContent = '− Remove This Person';
    removeBtn.onclick = function () { clone.remove(); };
    removeRow.appendChild(removeBtn);
    clone.appendChild(removeRow);

    document.getElementById('additional-persons').appendChild(clone);
  }

  document.getElementById('intake-form').addEventListener('submit', function () {
    const params = new URLSearchParams();
    const get = function (name) {
      const el = document.querySelector('#person-1 [name="' + name + '"]');
      return el ? el.value : '';
    };

    params.set('Client First Name', get('Legal First Name'));
    params.set('Client Last Name', get('Last Name'));
    params.set('Client Email', get('Email'));
    params.set('Client Phone', get('Phone Number'));

    const clientType = document.getElementById('client-type-select').value;
    if (clientType) {
      params.set('Client Type', clientType);
    }

    const dealLink = 'https://darinfroese.ca/agent-completion-form.html?' + params.toString();
    document.getElementById('deal-link-field').value = dealLink;
  });
</script>

</body>
</html>