this form works: <!DOCTYPE html>
<html lang="en">
<head>
  <title>Steel Construction Cost Estimate</title>
  <style>
    .form-container {
      max-width: 850px;
      height: 650px; /* Adjusted height */
      margin: auto;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
      font-family: Arial, sans-serif;
      overflow-y: auto; /* Add scrollbar if content exceeds container height */
    }

    label, input, button, select {
      display: block;
      margin: 1px 0;
    }

    .dropdown-group {
      margin-bottom: 5px;
    }

    .dropdown-group label {
      display: block; /* Makes the label appear on a new line */
    }

    .dropdown-container {
      display: flex;
      justify-content: space-between;
    }

    .dropdown-group {
      flex: 1;
      margin-right: 10px;
    }

    button {
      background-color: #ff6727; /* Updated button color */
      color: white;
      cursor: pointer;
    }

    label.required::after {
      content: "*";
      color: orangered;
      margin-left: 5px;
    }

    #estimatedCost {
      font-weight: bold;
      margin-top: 5px;
    }

    .radio-group label {
      display: inline-block;
      margin-right: 10px; /* Adjust the margin between radio buttons */
    }

    .radio-group input[type="radio"] {
      display: inline-block;
      margin-right: 5px; /* Adjust the margin between radio buttons */
    }
  </style>
</head>
<body>

<div class="form-container">
  <form id="fd88d2c" onsubmit="return calculateCost()">
    <div>
      <label for="name-764" class="required">Name:</label>
      [text* name-764 id:name-764 placeholder "Name*"]
       
      <label for="email-254" class="required">Email:</label>
      [email* email-254 id:email-254 placeholder "Email*"]
      
      <label for="tel-784" class="required">Telephone Number:</label>
      [tel* tel-784 id:tel-784 placeholder "Telephone Number*"]      
    </div>

    <div>
      <p>Standard Width: 10m</p>
    </div>

    <div class="dropdown-container">
      <div class="dropdown-group">
        <label for="lengthDropdown">Select Length (in meters):</label>
        <select id="lengthDropdown" name="length" onchange="checkFormValidity()">
          <option value="">Select Length</option>
          <option value="10">10m</option>
          <option value="15">15m</option>
          <option value="20">20m</option>
          <option value="25">25m</option>
          <option value="30">30m</option>
          <option value="35">35m</option>
          <option value="40">40m</option>
          <option value="45">45m</option>
          <option value="50">50m</option>
          <option value="55">55m</option>
          <option value="60">60m</option>
          <option value="65">65m</option>
          <option value="70">70m</option>
          <option value="75">75m</option>
          <option value="80">80m</option>
          <option value="85">85m</option>
          <option value="90">90m</option>
          <option value="95">95m</option>
          <option value="100">100m</option>
        </select>
      </div>

      <div class="dropdown-group">
        <label for="widthDropdown">Select Width (in meters):</label>
        <select id="widthDropdown" name="width" onchange="checkFormValidity()">
          <option value="">Select Width</option>
          <option value="10">10m</option>
        </select>
      </div>

      <div class="dropdown-group">
        <label for="sourceDropdown">Where did you hear about us?</label>
        <select id="sourceDropdown" name="source" onchange="checkFormValidity()">
          <option value="">Select Source</option>
          <option value="website">Website</option>
          <option value="freestock">Freestock</option>
          <option value="farmspace">Farmspace</option>
          <option value="referral">Referral from someone</option>
          <option value="onsite">Saw us on site</option>
          <option value="linkedin">LinkedIn</option>
          <option value="facebook">Facebook</option>
          <option value="instagram">Instagram</option>
          <option value="vehicle">Vehicle branding</option>
          <option value="other">Other</option>
        </select>
      </div>
    </div>

    <button type="submit" id="calculateButton" onclick="calculateCost()">Calculate Cost</button>
    <input type="hidden" id="hiddenCost" name="hiddenCost" value="">
  </form>

  <div id="estimatedCost"></div>
</div>

<script>
  function checkFormValidity() {
    var name = document.getElementById('name-764').value.trim();
    var email = document.getElementById('email-254').value.trim();
    var tel = document.getElementById('tel-784').value.trim();
    var lengthDropdown = document.getElementById('lengthDropdown').value;
    var widthDropdown = document.getElementById('widthDropdown').value;
    var sourceDropdown = document.getElementById('sourceDropdown').value;

    if (name === '') {
      document.getElementById('name-764').focus();
      document.getElementById('estimatedCost').innerHTML = "Please enter your name.";
      return false; 
    } else if (email === '') {
      document.getElementById('email-254').focus();
      document.getElementById('estimatedCost').innerHTML = "Please enter your email.";
      return false; 
    } else if (tel === '') {
      document.getElementById('tel-784').focus();
      document.getElementById('estimatedCost').innerHTML = "Please enter your telephone number.";
      return false; 
    } else if (lengthDropdown === '') {
      document.getElementById('lengthDropdown').focus();
      document.getElementById('estimatedCost').innerHTML = "Please select length.";
      return false; 
    } else if (widthDropdown === '') {
      document.getElementById('widthDropdown').focus();
      document.getElementById('estimatedCost').innerHTML = "Please select width.";
      return false; 
    } else if (sourceDropdown === '' || sourceDropdown === null) {
      document.getElementById('sourceDropdown').focus();
      document.getElementById('estimatedCost').innerHTML = "Please select source.";
      return false; 
    }

    document.getElementById('calculateButton').disabled = false;
    return true;
  }

  function calculateCost() {
    var name = document.getElementById('name-764').value;
    var email = document.getElementById('email-254').value;
    var tel = document.getElementById('tel-784').value;
    var lengthDropdown = document.getElementById('lengthDropdown').value;
    var width = document.getElementById('widthDropdown').value;
    var sourceDropdown = document.getElementById('sourceDropdown').value;

    if (name === '' || email === '' || tel === '') {
      document.getElementById('estimatedCost').innerHTML = "Please fill in your contact information (name, email, and telephone number).";
      return false;
    }

    if (lengthDropdown === "" || width === "" || sourceDropdown === "" || sourceDropdown === null) {
      document.getElementById("estimatedCost").innerHTML = "Please select length, select width, and choose source.";
      return false;
    }

    var totalCost = calculateLengthWidthCost(lengthDropdown, width);

    var formattedCost = totalCost.toLocaleString();

    document.getElementById('hiddenCost').value = formattedCost;

    document.getElementById("estimatedCost").innerHTML = "Estimated Total Cost: R " + formattedCost + " Excl. VAT";
     
    return false;
  }

  function calculateLengthWidthCost(lengthDropdown, width) {
    var totalLength = parseInt(lengthDropdown);
    var cost = 0;

    switch(totalLength) {
      case 10:
        cost = 52000;
        break;
      case 15:
        cost = 78000;
        break;
      case 20:
        cost = 104000;
        break;
      case 25:
        cost = 130000;
        break;
      case 30:
        cost = 156000;
        break;
      case 35:
        cost = 182000;
        break;
      case 40:
        cost = 208000;
        break;
      case 45:
        cost = 234000;
        break;
      case 50:
        cost = 260000;
        break;
      case 55:
        cost = 286000;
        break;
      case 60:
        cost = 312000;
        break;
      case 65:
        cost = 338000;
        break;
      case 70:
        cost = 364000;
        break;
      case 75:
        cost = 390000;
        break;
      case 80:
        cost = 416000;
        break;
      case 85:
        cost = 442000;
        break;
      case 90:
        cost = 468000;
        break;
      case 95:
        cost = 494000;
        break;
      case 100:
        cost = 520000;
        break;
      default:
        cost = 0;
    }

    return cost;
  }
</script>

</body>
</html>