this code work perfectly: <!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>, but the following one that the above code was based off does not work: <!DOCTYPE html>
<html lang="en">
<head>
    <title>Steel Construction Cost Estimate</title>
    <style>
        .form-container {
            max-width: 600px;
            height: 920px; /* Adjust the height to your desired size */
            margin: auto;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px; /* Set the font size here */
            font-family: Arial, sans-serif; /* Change the font family here */
        }

        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 */
        }

        button {
            background-color: orangered;
            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 Height: 4.5m</p>
        </div>

        <div class="radio-group">
            <label>Select Material:</label>
            <label><input type="radio" name="material" value="chromadek" checked> Chromadek</label>
            <label><input type="radio" name="material" value="galvanized"> Galvanized</label>
        </div>

        <div class="dropdown-group">
            <label for="lengthInput">Enter Length (in meters):</label>
            <input type="text" id="lengthInput" name="length" min="5" max="100" onblur="checkLengthValidity()">
        </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="40">40m</option>
                <option value="35">35m</option>
                <option value="30">30m</option>
                <option value="25">25m</option>
                <option value="20">20m</option>
                <option value="18">18m</option>
                <option value="15">15m</option>
                <option value="12">12m</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="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>

        <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>
    var pricing = {
        'chromadek': {
            '5-20': {'40': 1091, '35': 1201, '30': 1068, '25': 1022, '20': 944, '18': 871, '15': 799, '12': 1010},
            '21-30': {'40': 1057, '35': 1167, '30': 1029, '25': 984, '20': 913, '18': 844, '15': 778, '12': 983},
            '31-40': {'40': 1018, '35': 1127, '30': 985, '25': 942, '20': 877, '18': 814, '15': 754, '12': 952},
            '41-50': {'40': 996, '35': 1104, '30': 960, '25': 917, '20': 857, '18': 796, '15': 741, '12': 935},
            '51-60': {'40': 983, '35': 1090, '30': 945, '25': 902, '20': 845, '18': 786, '15': 733, '12': 924},
            '61-70': {'40': 973, '35': 1081, '30': 934, '25': 892, '20': 836, '18': 778, '15': 727, '12': 917},
            '71-80': {'40': 966, '35': 1073, '30': 926, '25': 884, '20': 830, '18': 773, '15': 723, '12': 911},
            '81-90': {'40': 961, '35': 1068, '30': 920, '25': 878, '20': 825, '18': 769, '15': 720, '12': 907},
            '91-100': {'40': 951, '35': 1064, '30': 915, '25': 874, '20': 821, '18': 765, '15': 717, '12': 903}
            // Add the rest of the Chromadek pricing data in the same format
        },
        'galvanized': {
            '5-20': {'40': 1029, '35': 1140, '30': 1006, '25': 960, '20': 882, '18': 807, '15': 734, '12': 930},
            '21-30': {'40': 995, '35': 1105, '30': 968, '25': 922, '20': 851, '18': 781, '15': 713, '12': 903},
            '31-40': {'40': 957, '35': 1066, '30': 925, '25': 880, '20': 816, '18': 751, '15': 690, '12': 873},
            '41-50': {'40': 935, '35': 1044, '30': 900, '25': 856, '20': 796, '18': 734, '15': 678, '12': 856},
            '51-60': {'40': 922, '35': 1030, '30': 885, '25': 841, '20': 783, '18': 724, '15': 670, '12': 845},
            '61-70': {'40': 912, '35': 1020, '30': 874, '25': 831, '20': 775, '18': 716, '15': 664, '12': 838},
            '71-80': {'40': 905, '35': 1013, '30': 866, '25': 823, '20': 768, '18': 711, '15': 660, '12': 832},
            '81-90': {'40': 900, '35': 1008, '30': 860, '25': 818, '20': 764, '18': 707, '15': 657, '12': 828},
            '91-100': {'40': 896, '35': 1004, '30': 855, '25': 813, '20': 760, '18': 704, '15': 654, '12': 825}
            // Add the rest of the Galvanized pricing data in the same format
        }
    };

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

        // Check each field and jump to the first empty field
        if (name === '') {
            document.getElementById('name-764').focus();
            return false; // Prevent form submission
        } else if (email === '') {
            document.getElementById('email-254').focus();
            return false; // Prevent form submission
        } else if (tel === '') {
            document.getElementById('tel-784').focus();
            return false; // Prevent form submission
        } else if (lengthInput === '' || (lengthInput !== '' && lengthInput.length < 2)) {
            document.getElementById('lengthInput').focus();
            return false; // Prevent form submission
        } else if (widthDropdown === '') {
            document.getElementById('widthDropdown').focus();
            return false; // Prevent form submission
        } else if (sourceDropdown === '' || sourceDropdown === null) {
            document.getElementById('sourceDropdown').focus();
            return false; // Prevent form submission
        }

        // If all fields are filled, enable the calculate button
        document.getElementById('calculateButton').disabled = false;
        return true; // Allow form submission
    }

    function calculateCost() {
        var material = document.querySelector('input[name="material"]:checked').value;
        var lengthInput = document.getElementById('lengthInput').value;
        var width = document.getElementById('widthDropdown').value;

        if (lengthInput === "" || width === "") {
            document.getElementById("estimatedCost").innerHTML = "Please enter length and select width.";
            return false;
        }

        var totalCost = calculateLengthWidthCost(lengthInput, width, material);

        // Format the total cost with thousand separators
        var formattedCost = totalCost.toLocaleString();

        // Set the value of the hidden input field with the formatted total cost
        document.getElementById('hiddenCost').value = formattedCost;

        // Display the formatted total cost in the HTML
        document.getElementById("estimatedCost").innerHTML = "Estimated Total Cost: R " + formattedCost + " Excl. VAT";
        
        // Return true to allow form submission
        return true;
    }

    function calculateLengthWidthCost(lengthInput, width, material) {
        var totalLength = parseInt(lengthInput);
        var widthCost = parseInt(width);

        var lengthRange = getLengthRange(totalLength);
        var costPerSquareMeter = pricing[material][lengthRange][widthCost.toString()];

        return totalLength * widthCost * costPerSquareMeter;
    }

    function getLengthRange(length) {
        if (length >= 5 && length <= 20) {
            return '5-20';
        } else if (length >= 21 && length <= 30) {
            return '21-30';
        } else if (length >= 31 && length <= 40) {
            return '31-40';
        } else if (length >= 41 && length <= 50) {
            return '41-50';
        } else if (length >= 51 && length <= 60) {
            return '51-60';
        } else if (length >= 61 && length <= 70) {
            return '61-70';
        } else if (length >= 71 && length <= 80) {
            return '71-80';
        } else if (length >= 81 && length <= 90) {
            return '81-90';
        } else if (length >= 91 && length <= 100) {
            return '91-100';
        } else {
            return '';
        }
    }

    function checkLengthValidity() {
        var lengthInput = document.getElementById('lengthInput').value;

        if (lengthInput !== '' && lengthInput.length < 2) {
            document.getElementById('lengthInput').focus();
            return false; // Prevent form submission
        }

        // Continue with other validations if needed
    }
</script>

</body>
</html>