Как создать полнофункциональную контактную форму в форме HTML

Question

У меня маленькая HTML форма. По сути, моя цель состоит в том, чтобы на первой вкладке отображалась контактная форма, которая разблокирует оставшуюся часть формы и даст пользователю возможность редактировать контактную форму после отправки (в случае ошибки) без обновления страницы и удаления значений формы. это отображение в форме. После отправки контактной части введенные значения будут отображаться по всей форме.

https://jsfiddle.net/yq7hon4u/

// Contact Form
function submitButton() {
  document.getElementById('submitButton').style.display = "none";
  document.getElementById('contactBar').style.display = "block";

  return false;
}

function contact() {
  var firstName = document.getElementById("firstName").value;
  var lastName = document.getElementById("lastName").value;
  var email = document.getElementById("email").value;
  document.getElementById("firstName1").textContent = firstName;
  document.getElementById("lastName1").textContent = lastName;
  document.getElementById("email1").textContent = email;
}

//Form Tabs
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";


  if (n == 0) {
    document.getElementById("prevBtnBottom").style.display = "none";
    document.getElementById("prevBtnTop").style.display = "none";
  } else {
    document.getElementById("prevBtnBottom").style.display = "inline";
    document.getElementById("prevBtnTop").style.display = "inline";
  }
  //Form 5 displays only Previous button, Next button is disabled.
  if (n == 3) {
    document.getElementById("nextBtnBottom").style.display = "none";
    document.getElementById("nextBtnTop").style.display = "none";
  } else {
    document.getElementById("nextBtnBottom").style.display = "inline";
    document.getElementById("nextBtnTop").style.display = "inline";
  }
  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";
}

/* Style the form */

#regForm {
  margin: 20px auto;
  width: 70%;
  min-width: 300px;
}


/* Style for Select */

select.select {
  font-size: 15px;
  width: 55%;
  Border: none;
  background-color: #e9e9e9;
}


/* Style for buttons */

button {
  background-color: #faa51a;
  font-size: 16px;
}


/* Hidden */

.hide {
  display: none;
}


/* Hide all steps by default: */

.tab {
  display: none;
}


/* Make circles that indicate the steps of the form: */

.step {
  height: 24px;
  width: 20px;
  margin: 0 2px;
  background-color: #b8cce4;
  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: #b8cce4;
}


/* Used for blue background headings */

tr.blueHead {
  background-color: #b8cce4;
}


/* Resposive table */

table {
  border-collapse: collapse;
  box-shadow: 0px 0px 25px 15px rgba(0, 0, 0, 0.20);
  background-color: #e9e9e9;
}

table.center {
  margin-left: auto;
  margin-right: auto;
}

table.summary {
  background-color: e9e9e9 border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}


/* Sets padding around the table cells */

th,
td {
  padding: 3px;
  /*  text-align: left;*/
}


/* Subtotal */

td.subtotal {
  text-align: right;
  font-weight: bold;
}


/* Indents table cells */

td.indent {
  text-indent: 2%;
}

img.center {
  text-align: center;
  display: block;
  margin: 0 auto;
}

td,
th {
  border: 1px solid #ddd;
}

.center {
  text-align: center;
}

<!-- Start of RegForm -->
<div id="tab">
  <div id="regForm">
    <br>
    <div style="float:right;">
      <button type="button" id="prevBtnTop" onclick="nextPrev(-1)">?</button>
      <button type="button" id="nextBtnTop" onclick="nextPrev(1)">?</button>
    </div>
    <br>
    <br>
    </head>

    <body>

      <div class="tab">
        <center>
        </center>
        <h4><u>Fill out the folowing required fields</u></h4>
        <center>
          <form action="" onsubmit="return submitButton()">
            <div id="submitButton" style="margin-bottom: -20px">
              <input id="firstName" type="text" class="feedback-input" placeholder="First Name" required/>
              <input id="lastName" type="text" class="feedback-input" placeholder="Last Name" required/>
              <input id="email" type="text" class="feedback-input" placeholder="Email" required/>
              <button onclick="contact(); nextPrev(1);" value="submit">Submit</button>
              <br>
        </center>
        </div>

        <div id="contactBar" style="display:none; margin-bottom: -30px">
          <table id="contact" class="noDecor">
            <tr class="noDecor">
              <td class="noDecor"><b><span id="firstName1"></span></b></td>
              <td class="noDecor"><b><span id="lastName1"></span></b></td>
              <td class="noDecor"><b><span id="email1"></span></b></td>
            </tr>
          </table>
        </div>
        <br><br>
        </form>

        <!-- A.-->

        <div class="tab">
          <table id="sectionA">
            <tr class="blueHead">
              <th colspan="3"><b>Section A </b></th>
            </tr>
            <tr>
              <td></td>
            </tr>
          </table>
          <table id="table1">
            <tr>
              <td>Question 1:</td>
              <td>
                <select>
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Question 2:</td>
              <td>
                <select>
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>
              </td>
            </tr>
          </table>
          <br>
        </div>

        <!-- B. -->

        <div class="tab">
          <table id="sectionB">
            <tr class="blueHead">
              <th colspan="3"><b>Section B </b></th>
            </tr>
          </table>
          <table id="table2">
            <tr>
              <td>Question 3:</td>
              <td>
                <select>
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Question 4:</td>
              <td>
                <select>
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>
              </td>
            </tr>
          </table>
          <br>
        </div>

        <!-- C. -->

        <div class="tab">
          <table id="sectionC">
            <tr class="blueHead">
              <th colspan="3"><b>Section C </b></th>
            </tr>
          </table>
          <table id="table3">
            <tr>
              <td>Question 5:</td>
              <td>
                <select>
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>
              </td>
            </tr>
            <tr>
              <td>Question 6:</td>
              <td>
                <select>
                  <option value="0">0</option>
                  <option value="1">1</option>
                </select>
              </td>
            </tr>
          </table>
          <br>
        </div>


        <!-- Next and Previous buttons -->
        <div style="float:right;">
          <button type="button" id="prevBtnBottom" onclick="nextPrev(-1)">?</button>
          <button type="button" id="nextBtnBottom" onclick="nextPrev(1)">?</button>
        </div>
      </div>

      <div style="text-align:center;margin-top:40px;">
        <span class="step"><b>S</a></span>
        <span class="step">A</span>
        <span class="step">B</span>
        <span class="step">C</span>
        </span>
      </div>
      <br>
  </div>
</div>