JSFiddle - React, Tailwind, and code Playground

HTML

<form id="c_form" onsubmit="return false;">
  <div id="Page1">
    <h2 class="property">Property information</h2>
    <fieldset>
      <figure class="property_information">
        <figure class="fig">
          <label>
            <div class="order">A</div>
            <p>Proposed Cable Route<span class="asterisk">&#42;</span></p>
          </label>
          <br>
          <select name="proposed_cable_route" id="cf_proposed_cable_route">
            <option value="" disabled selected>-Select your answer-</option>
            <option value="External">External</option>
            <option value="Internal">Internal</option>
            <option value="Combination">PIA</option>
          </select>
        </figure>

        <figure class="fig" id="cf_building_post_2000">
          <label>
            <div class="order">B</div>
            <p>Is the building post 2000?
              <span class="asterisk">&#42;</span>
            </p>
          </label>
          <br>
          <input name="building_post_2000" type="radio" value="Yes" selected>Yes
          <input name="building_post_2000" type="radio" value="No">No
          <br>
        </figure>

        <figure class="fig" id="cfasbestos">
          <label>
            <div class="order">C</div>
            <p>Do you have asbestos report?
              <span class="asterisk">&#42;</span>
            </p>
          </label>
          <br>
          <input name="asbestos_report" type="radio" value="Yes" selected>Yes
          <input name="asbestos_report" type="radio" value="No">No
          <br>
          <h3 class="alert">Please contact your team leader for advice!</h3>
        </figure>
      </figure>

      <figure class="fig">
        <label>
          <div class="order">9</div>
          <p>Surveyor<span class="asterisk">&#42;</span></p>
        </label>
        <br>
        <input type="text" name="surveyor" placeholder="Surveyor's name">
        <input type="email" name="surveyor_email"...

JavaScript

document.getElementById("cfsubmit").addEventListener("click", function() {
  var check = document.getElementById("opemail"); // Get checkbox element
  var formEl = document.forms.c_form; // Get the form
  var formData = new FormData(formEl); // Creates form object
  
  // Get all form data values
  var cableRoute = formData.get('proposed_cable_route');
  var buildingPost = formData.get('building_post_2000');
  var asbestosReport = formData.get('asbestos_report');
  var surveyorName = formData.get('surveyor');
  var surveyorEmail = formData.get('surveyor_email');
  
  // This will create the subject of form
  var subject = "Submission from " + surveyorName;
  
  // This will create body with filled data
  var body = 'My name is ' + surveyorName + '\n' + 'My email is ' + surveyorEmail + '\n' + 'Proposed Cable Route: ' + cableRoute + '\n' + 'Is the building post 2000: ' + buildingPost + '\n' + 'Do you have asbestos report: ' + asbestosReport;
  
  // Making the mailto link with urlencoding
  var mailTo = "mailto:[email protected]?subject="+encodeURI(subject)+"&body="+encodeURI(body);
  
  if (check.checked == true) { // If checked then fire
    let link=document.createElement("a"); // Creates <a> element in DOM
    link.href = mailTo; // Adds mailto link to <a>
    link.click(); // Clicks the <a> and open default mail app
    link.remove();
  }
  
  //console.log("mailTo => ", mailTo)
  mainForm.submit(); // Submits the form
 });