How to send form entries to my email adress

Question

I have written html form and I need the entries to be sent to my email address. I have written thee html code which I have included in this post, the css code had aslo been written, and the javascript code is also provided in the post. Kindly check it out and give your take. Once any user input their details I want it to be sent to my email address. I am a beginner and I will love to learn from you all.

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";
  // ... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Submit";
  } else {
    document.getElementById("nextBtn").innerHTML = "Next";
  }
  // ... and run a function that displays the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if (n == 1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) {
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false:
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class to the current step:
  x[n].className += " active";
}


document.getElementById("level-select").addEventListener("change", getLevels);
function getLevels() {
    var value = document.getElementById("level-select").value;

    if (value) {
        var courses = document.querySelector("#cour");
        var all_options = courses.querySelectorAll('optgroup');
        var show_courses = courses.querySelector('[label="' + value + '"]');

        all_options.forEach(function (element) {
            element.style.display = "none";
        });

        show_courses.style.display = "block";
    }

}

/* Style the form */
#regForm {
    background-color: #ffffff;
    margin: 100px auto;
    padding: 40px;
    width: 70%;
    min-width: 300px;
  }

  /* button */
  button {
    background-color: #4CAF50;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer;
  }
  
  button:hover {
    opacity: 0.8;
  }
  
  #prevBtn {
    background-color: #bbbbbb;
  }
  
  /* Style the input fields */
  input {
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
  }

  #cour{
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
    
    
  }
  #start-period{
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
    
    
  }

  #cour optgroup {
    display:none;
  }
 .label {
    display: block;
    margin-block-start: 1em;
    
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

  #level-select{
    padding: 10px;
    width: 100%;
    font-size: 17px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
  }
  
  /* Mark input boxes that gets an error on validation: */
  input.invalid {
    background-color: #ffdddd;
  }
  
  /* Hide all steps by default: */
  .tab {
    display: none;
  }
  
  /* Make circles that indicate the steps of the form: */
  .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
  }
  
  /* Mark the active step: */
  .step.active {
    opacity: 1;
  }
  
  /* Mark the steps that are finished and valid: */
  .step.finish {
    background-color: #4CAF50;
  }

<!<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <form id="regForm" action="" method="post" enctype="multipart/form-data">

            <h1>Online Application Form:</h1>
            
            <!-- One "tab" for each step in the form: -->
            <div class="tab">
              <div class="label">Level of study</div>
              <select id="level-select">
                  <option value="">--Please choose an option--</option>
                  <option value="Bachelors">Bachelors</option>
                  <option value="Postgraduates">Postgraduates</option>
                  <option value="PhD">PhD</option>
              </select>

              <div class="label">Choose course</div>
              <select id="cour">
                <option selected>--Choose Course--</option>
                <optgroup label="Bachelors">
                  <option>Microbiology</option>
                  <option>chemistry</option>
                  <option>physics</option>
                </optgroup>
                <optgroup label="Postgraduates">
                  <option>computer</option>
                  <option>biology</option>
                  <option>accounting</option>
                </optgroup>
                <optgroup label="PhD">
                  <option>business</option>
                  <option>fisheries</option>
                  <option>agric</option>
                </optgroup>
              </select>
              <div class="label">Select starting period</div>
              <select id="start-period">
                  <option value="">--Please choose an option--</option>
                  <option value="Fall">Fall</option>
                  <option value="Summer">Summer</option>
                  <option value="Spring">Spring</option>
              </select>
              <p>First name<input text="" oninput="this.className = ''"></p>
              <p>Last name<input text="" oninput="this.className = ''"></p>
              <p>Email<input text="" oninput="this.className = ''"></p>
              <p>Phone number<input text="" oninput="this.className = ''"></p>
            </div>
            
         
            
            <div class="tab">
              <p>Current level of education<input text="" oninput="this.className = ''"></p>
              <p>Year of graduation<input text="" oninput="this.className = ''"></p>
              
            </div>
            
            <div class="tab">
              <p>Date<input type="date" oninput="this.className = ''"></p>
              <p>Postal code<input text="" oninput="this.className = ''"></p>
              <p>Country<input text="" oninput="this.className = ''"></p>
            </div>
            
            <div style="overflow:auto;">
              <div style="float:right;">
                <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
              </div>
            </div>
            
            <!-- Circles which indicates the steps of the form: -->
            <div style="text-align:center;margin-top:40px;">
              <span class="step"></span>
              <span class="step"></span>
              <span class="step"></span>
              <span class="step"></span>
            </div>
            
            </form>
            
        
    </body>
</html>