Text + image

<p style="text-align:justify"><strong>Unlock Exclusive Rewards with Promo-Onyx Referrals!</strong></p>
<p style="text-align:justify"><strong>Welcome to the Promo-Onyx Referrals Program, where sharing brings rewards! Follow these simple steps to enjoy fantastic benefits:</strong></p>
<p style="text-align:justify"><strong>Step 1: Choose Your Role</strong> -Look below this message to find the referral form. Select "Referrer" if you're referring, or "Referee" if you've been referred. Don't worry if the form doesn't appear right away – just refresh the page and make your selection again. <strong>As the referrer, please fill in the referral form on behalf of the person you are signing on. This form helps us track your referrals accurately.</strong></p>
<p style="text-align:justify"><strong>Step 2: Referrers, Secure Your Unique Code</strong> -Referrers, before you fill the referral form below, please generate your exclusive code on the Promo-Onyx Referrals Program Page or simply click on the 'Promo-Onyx Referrals Program' label below. This code is your key to rewards! </p>
<p style="text-align:justify"><strong>Step 3: Complete the Form with Precision</strong> -Fill in accurate details, and don't forget to enter your unique code. Referrers, share your code for extra perks!</p>
<p style="text-align:justify"><strong>Step 4: Share Your Code</strong> -Referrers, make sure your referrals use your code. Same code, same rewards – it's that simple!</p>
<p style="text-align:justify"><strong>Step 5: Hit "Submit" and Send the Magic Email</strong> -After completing the form, simply click "Submit." An email window will automatically appear, with the admin's special email address already set as the recipient. To ensure the seamless processing of your commission, click "Send." This step is crucial – it guarantees your referral bonuses will be accurately credited to you.</p>
<p style="text-align:justify">Join Promo-Onyx Referrals now and pave the way to extraordinary rewards. Let's elevate education together!</p>

Embed

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Referral Form</title>

  <style>

    /* Styles... */

  </style>

</head>

<body>

<div class="container">

  <h1>Referral Form</h1>

  <form id="referral-form">

    <h2>Your Information</h2>

    <label for="status">Choose your status:</label>

    <select id="status" required>

      <option value="" disabled selected>Select an option</option>

      <option value="referrer">Referrer</option>

      <option value="referee">Referee</option>

    </select>

    

    

    <div id="referrer-section" style="display: none;">

      <label for="referrer-name">Your Name:</label>

      <input type="text" id="referrer-name">

      <label for="referrer-email">Your Email address:</label>

      <input type="email" id="referrer-email">

      <label for="referrer-phone">Your Phone number:</label>

      <input type="tel" id="referrer-phone">

      <label for="referrer-code">Your Referral Code:</label>

      <input type="text" id="referrer-code">

      

      <label for="referrer-date">Date:</label>

      <input type="date" id="referrer-date">

      

      <h3>Referred Person's Information</h3>

      <label for="referred-name">Name:</label>

      <input type="text" id="referred-name">

      <label for="referred-email">Email address:</label>

      <input type="email" id="referred-email">

      <label for="referred-phone">Phone number:</label>

      <input type="tel" id="referred-phone">

      <label for="referred-agree-enroll">Agree to Enroll:</label>

      <input type="checkbox" id="referred-agree-enroll">

      

      <div id="referred-list" style="display: none;">

        <h3>Referred List</h3>

        <ul id="referred-list-items"></ul>

        <button type="button" id="add-referred">Add Referred</button>

      </div>

      <button type="button" id="submit-referrer">Submit Referrer Form</button>

    </div>

    

    

    <div id="referee-section" style="display: none;">

      <label for="referee-name">Name:</label>

      <input type="text" id="referee-name">

      <label for="referee-email">Email address:</label>

      <input type="email" id="referee-email">

      <label for="referee-phone">Phone number:</label>

      <input type="tel" id="referee-phone">

      <label for="referee-referral-code">Referral code:</label>

      <input type="text" id="referee-referral-code" required>

      

      <label for="referee-date">Date:</label>

      <input type="date" id="referee-date">

      

      <label for="referee-visit-date">Preferred Visit Date:</label>

      <input type="date" id="referee-visit-date">

      <label for="referee-agree-enroll">Agree to Enroll:</label>

      <input type="checkbox" id="referee-agree-enroll">

      

      <label for="referee-referrer-name">Referrer's Name:</label>

      <input type="text" id="referee-referrer-name">

      <label for="referee-referrer-email">Referrer's Email address:</label>

      <input type="email" id="referee-referrer-email">

      <label for="referee-referrer-phone">Referrer's Phone number:</label>

      <input type="tel" id="referee-referrer-phone">

      <button type="button" id="submit-referee">Submit Referee Form</button>

    </div>

  </form>

</div>

<script>

  document.getElementById('status').addEventListener('change', function () {

    const referrerSection = document.getElementById('referrer-section');

    const refereeSection = document.getElementById('referee-section');

    

    if (this.value === 'referrer') {

      referrerSection.style.display = 'block';

      refereeSection.style.display = 'none';

    } else if (this.value === 'referee') {

      referrerSection.style.display = 'none';

      refereeSection.style.display = 'block';

    }

  });



  document.getElementById('submit-referrer').addEventListener('click', function () {

    const referrerName = document.getElementById('referrer-name').value;

    const referrerEmail = document.getElementById('referrer-email').value;

    const referrerPhone = document.getElementById('referrer-phone').value;

    const referrerCode = document.getElementById('referrer-code').value;

    const referrerDate = document.getElementById('referrer-date').value;

      

    const referredName = document.getElementById('referred-name').value;

    const referredEmail = document.getElementById('referred-email').value;

    const referredPhone = document.getElementById('referred-phone').value;

    const referredAgreeEnroll = document.getElementById('referred-agree-enroll').checked;

    

    if (referrerName || referrerEmail || referrerPhone || referrerCode || referrerDate || referredName || referredEmail || referredPhone) {

      submitReferrerForm(referrerName, referrerEmail, referrerPhone, referrerCode, referrerDate, referredName, referredEmail, referredPhone, referredAgreeEnroll);

      alert('Referrer information submitted successfully. Please make sure the referee provides your Referral Code during submission.');

    } else {

      alert('Please fill in all required fields for the Referrer and Referred Person information.');

    }

  });



  document.getElementById('submit-referee').addEventListener('click', function () {

    const refereeName = document.getElementById('referee-name').value;

    const refereeEmail = document.getElementById('referee-email').value;

    const refereePhone = document.getElementById('referee-phone').value;

    const refereeReferralCode = document.getElementById('referee-referral-code').value;

    const refereeDate = document.getElementById('referee-date').value;

    const refereeVisitDate = document.getElementById('referee-visit-date').value;

    const refereeAgreeEnroll = document.getElementById('referee-agree-enroll').checked;

      

    const refereeReferrerName = document.getElementById('referee-referrer-name').value;

    const refereeReferrerEmail = document.getElementById('referee-referrer-email').value;

    const refereeReferrerPhone = document.getElementById('referee-referrer-phone').value;

    

    if (refereeName || refereeEmail || refereePhone || refereeReferralCode || refereeDate || refereeVisitDate || refereeAgreeEnroll || refereeReferrerName || refereeReferrerEmail || refereeReferrerPhone) {

      submitRefereeForm(refereeName, refereeEmail, refereePhone, refereeReferralCode, refereeDate, refereeVisitDate, refereeAgreeEnroll, refereeReferrerName, refereeReferrerEmail, refereeReferrerPhone);

      alert('Referee information submitted successfully. Please ensure your Referrer provides their Referral Code and details.');

    } else {

      alert('Please fill in all required fields for the Referee and Referrer information.');

    }

  });



  document.getElementById('add-referred').addEventListener('click', function () {

    const referredList = document.getElementById('referred-list-items');

    const referredName = prompt('Enter the name of the referred person:');

    if (referredName) {

      const listItem = document.createElement('li');

      listItem.textContent = referredName;

      referredList.appendChild(listItem);

    }

  });

  

  function submitReferrerForm(name, email, phone, code, date, referredName, referredEmail, referredPhone, referredAgreeEnroll) {

    const schoolEmail = 'panakwa2@gmail.com';

    const subject = 'Referral Information';

    const emailBody = `

      Referrer Information:

      Name: ${name}

      Email address: ${email}

      Phone number: ${phone}

      Referral Code: ${code}

      Date: ${date}

      

      Referred Person Information:

      Name: ${referredName}

      Email address: ${referredEmail}

      Phone number: ${referredPhone}

      Agree to Enroll: ${referredAgreeEnroll ? 'Yes' : 'No'}

      

      Referred List:

      ${getReferredList()}

    `;

    

    const mailtoLink = `mailto:${schoolEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(emailBody)}`;

    window.location.href = mailtoLink;

  }

  

  function submitRefereeForm(name, email, phone, code, date, visitDate, agreeEnroll, referrerName, referrerEmail, referrerPhone) {

    const schoolEmail = 'panakwa2@gmail.com';

    const subject = 'Referral Information';

    const emailBody = `

      Referee Information:

      Name: ${name}

      Email address: ${email}

      Phone number: ${phone}

      Referral code: ${code}

      Date: ${date}

      Preferred Visit Date: ${visitDate}

      Agree to Enroll: ${agreeEnroll ? 'Yes' : 'No'}

      

      Referrer's Information:

      Name: ${referrerName}

      Email address: ${referrerEmail}

      Phone number: ${referrerPhone}

    `;

    

    const mailtoLink = `mailto:${schoolEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(emailBody)}`;

    window.location.href = mailtoLink;

  }

  

  function getReferredList() {

    const referredList = document.getElementById('referred-list-items').children;

    if (referredList.length === 0) {

      return 'None';

    } else {

      let referredListText = '';

      for (const item of referredList) {

        referredListText += `${item.textContent}\n`;

      }

      return referredListText;

    }

  }

</script>

</body>

</html>