{"id":2772,"date":"2025-04-23T17:07:12","date_gmt":"2025-04-23T09:07:12","guid":{"rendered":"https:\/\/ufreight.com\/?page_id=2772"},"modified":"2026-08-13T12:16:59","modified_gmt":"2026-08-13T04:16:59","slug":"shipping-cost-estimator","status":"publish","type":"page","link":"https:\/\/ufreight.com\/tc\/shipping-cost-estimator\/","title":{"rendered":"\u7a7a\u904b\u8cbb\u7528\u4f30\u7b97"},"content":{"rendered":"<div id=\"text-544839697\" class=\"text\">\n\t\t\n\n<h1>\u7a7a\u904b\u8cbb\u7528\u4f30\u7b97<\/h1>\n\n\t\t\n<style>\n#text-544839697 {\n  text-align: center;\n}\n<\/style>\n\t<\/div>\n\t\n<div id=\"shipping-estimator\">\n<form id=\"shipping-estimator-form\" action=\"\">\n<div class=\"form-group location-group\">\n<div class=\"location-input\">\n                <label for=\"origin\">\u59cb\u767c\u5730:<\/label><select id=\"origin\" name=\"origin\" required aria-label=\"\u9078\u64c7\u59cb\u767c\u5730\"><option value=\"\">Select Origin<\/option><\/select>\n            <\/div>\n<div class=\"location-input\">\n                <label for=\"destination\">\u76ee\u7684\u5730:<\/label><select id=\"destination\" name=\"destination\" required aria-label=\"Select destination airport\"><option value=\"\">Select Destination<\/option><\/select>\n            <\/div>\n<\/p>\n<\/div>\n<div id=\"piece-groups\">\n<div class=\"piece-group\" data-index=\"0\">\n<h4>\u8a17\u904b\u7269\u8a73\u60c5 1<\/h4>\n<p>                <span class=\"delete-piece-group-btn\" style=\"display: none;\">\u2715<\/span><\/p>\n<div class=\"form-group piece-details-group\">\n<div class=\"piece-input\">\n                        <label for=\"num-pieces-0\">\u4ef6\u6578:<\/label>                        <input type=\"number\" id=\"num-pieces-0\" name=\"num-pieces[]\" min=\"1\" step=\"1\" required placeholder=\"e.g., 1\" aria-label=\"Number of pieces\">\n                    <\/div>\n<div class=\"piece-input\">\n                        <label for=\"actual-weight-0\">\u5be6\u969b\u91cd\u91cf (KG):<\/label>          <input type=\"number\" id=\"actual-weight-0\" name=\"actual-weight[]\" min=\"0\" step=\"0.01\" required placeholder=\"Piece Weight\" aria-label=\"Actual weight in kilograms\">\n                    <\/div>\n<div class=\"dimension-group\">\n                        <label>\u5c3a\u5bf8 (cm):<\/label><\/p>\n<div class=\"dimension-inputs\">\n                            <input type=\"number\" id=\"length-0\" name=\"length[]\" min=\"0\" step=\"0.01\" placeholder=\"L\" required aria-label=\"Length in centimeters\"><br \/>\n                            <input type=\"number\" id=\"width-0\" name=\"width[]\" min=\"0\" step=\"0.01\" placeholder=\"W\" required aria-label=\"Width in centimeters\"><br \/>\n                            <input type=\"number\" id=\"height-0\" name=\"height[]\" min=\"0\" step=\"0.01\" placeholder=\"H\" required aria-label=\"Height in centimeters\">\n                        <\/div>\n<\/p>\n<\/div>\n<div class=\"piece-input package-type-group\">\n                        <label for=\"package-type-0\">\u5305\u88dd\u985e\u578b:<\/label><\/p>\n<div class=\"package-type-actions\">\n                            <select id=\"package-type-0\" name=\"package-type[]\" required aria-label=\"Select package type\"><option value=\"\">Select<\/option><option value=\"Carton\">Carton<\/option><option value=\"Pallet\">Pallet<\/option><\/select><\/p>\n<div class=\"piece-group-actions\">\n                                <button type=\"button\" class=\"add-piece-group-btn\">+<\/button>\n                            <\/div>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"section-group\">\n<h4>\u8a17\u904b\u7269\u5167\u5bb9<\/h4>\n<div class=\"form-group section-details-group\">\n<div class=\"section-input\">\n                    <label for=\"commodity\">\u8a17\u904b\u7269:<\/label><input type=\"text\" id=\"commodity\" name=\"commodity\" required placeholder=\"e.g., Electronics\" aria-label=\"Commodity description\">\n                <\/div>\n<div class=\"section-input\">\n                    <label for=\"item-value\">\u7269\u54c1\u7533\u5831\u50f9\u683c (USD):<\/label><input type=\"number\" id=\"item-value\" name=\"item-value\" min=\"0\" step=\"0.01\" required placeholder=\"e.g., 100\" aria-label=\"Item value in USD\">\n                <\/div>\n<div class=\"section-input\">\n                    <label for=\"contain-batteries\">\u662f\u5426\u5305\u542b\u96fb\u6c60?<\/label><select id=\"contain-batteries\" name=\"contain-batteries\" required aria-label=\"Does the shipment contain batteries\"><option value=\"\">Select<\/option><option value=\"Yes\">\u662f<\/option><option value=\"No\">\u5426<\/option><\/select>\n                <\/div>\n<\/p>\n<\/div>\n<\/div>\n<div class=\"section-group\">\n<h4>\u984d\u5916\u670d\u52d9<\/h4>\n<div class=\"form-group section-details-group\">\n<div class=\"section-input\">\n                    <label for=\"pickup-required\">\u9700\u5b89\u6392\u63d0\u8ca8:<\/label><select id=\"pickup-required\" name=\"pickup-required\" required aria-label=\"Is pickup required\"><option value=\"\">Select<\/option><option value=\"Yes\">\u662f<\/option><option value=\"No\">\u5426<\/option><\/select>\n                <\/div>\n<div class=\"section-input\">\n                    <label for=\"delivery-required\">\u9700\u5b89\u6392\u9001\u8ca8:<\/label>  <select id=\"delivery-required\" name=\"delivery-required\" required aria-label=\"Is delivery required\"><option value=\"\">Select<\/option><option value=\"Yes\">\u662f<\/option><option value=\"No\">\u5426<\/option><\/select>\n                <\/div>\n<\/p>\n<\/div>\n<\/div>\n<div class=\"button-group\">\n            <button type=\"submit\" id=\"calculate-btn\">\u8a08\u7b97<\/button>\n        <\/div>\n<\/p>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"tc\"\/><\/form>\n<div id=\"contact-modal\" class=\"modal\" style=\"display: none;\">\n<div class=\"modal-content\">\n<h3>Please Provide Your Contact Information<\/h3>\n<form id=\"contact-form\" action=\"\">\n<div class=\"form-group\">\n                    <label for=\"contact-name\">Contact Name:<\/label><br \/>\n                    <input type=\"text\" id=\"contact-name\" name=\"contact-name\" required placeholder=\"e.g., John Doe\" aria-label=\"Contact name\">\n                <\/div>\n<div class=\"form-group\">\n                <label for=\"contact-company\">Company Name:<\/label><br \/>\n                <input type=\"text\" id=\"contact-company\" name=\"contact-company\" required placeholder=\"e.g., ABC Corp\" aria-label=\"\u516c\u53f8\u59d3\u540d\">\n            <\/div>\n<div class=\"form-group\">\n                    <label for=\"contact-email\">Contact Email:<\/label><br \/>\n                    <input type=\"text\" id=\"contact-email\" name=\"contact-email\" required placeholder=\"e.g., john@example.com\" aria-label=\"Contact email\">\n                <\/div>\n<div class=\"form-group\">\n                    <label for=\"contact-phone\">Contact Phone:<\/label><br \/>\n                    <input type=\"text\" id=\"contact-phone\" name=\"contact-phone\" required placeholder=\"e.g., +1234567890\" aria-label=\"Contact phone number\">\n                <\/div>\n<div class=\"form-group\">\n                    <label for=\"contact-country\">Country:<\/label><br \/>\n                    <input type=\"text\" id=\"contact-country\" name=\"contact-country\" required placeholder=\"e.g., USA\" aria-label=\"Contact country\">\n                <\/div>\n<div class=\"form-group\">\n    <label for=\"leave_us_a_message\">Leave us a message:<\/label><br \/>\n    <textarea id=\"leave_us_a_message\" name=\"leave_us_a_message\" rows=\"1\" placeholder=\"Enter your message here\"><\/textarea>\n<\/div>\n<div class=\"button-group\">\n                    <button type=\"submit\" id=\"submit-contact-btn\">\u63d0\u4ea4<\/button>\n                <\/div>\n<\/p>\n<input type=\"hidden\" name=\"trp-form-language\" value=\"tc\"\/><\/form>\n<\/div>\n<\/div>\n<div id=\"result\" style=\"display: none;\">\n<h3>Estimated Port to Port Air Freight Shipping Cost: USD$<span id=\"total-cost-header\"><\/span><\/h3>\n<div class=\"result-group\">\n<h4>Chargeable Weight<\/h4>\n<div id=\"chargeable-weight\"><\/div>\n<\/p>\n<\/div>\n<div class=\"result-group\">\n<h4>Remarks<\/h4>\n<div id=\"remarks\"><\/div>\n<p> <!-- New Remarks section -->\n    <\/div>\n<div class=\"result-group\">\n<h4>Notes<\/h4>\n<div id=\"notes\">\n            Thank you for utilizing our Shipping Cost Estimator. We will reach out to you shortly to provide further assistance and follow up on your request. The provided estimate offers an approximate cost for shipping parcels of the specified weight to the selected destination. Please note that this is not the final price. For a precise quotation, we recommend contacting us via the <a href=\"https:\/\/ufreight.com\/tc\/contact-us\/\" target=\"_blank\">Contact Us &#8211; UFL Group<\/a> page.\n        <\/div>\n<\/p>\n<\/div>\n<\/div>\n<div id=\"error\" style=\"display: none; color: #D81E05;\"><\/div>\n<\/div>\n\n\n\n<style>\n\/* ==========================================\n   1. \u4e3b\u8a08\u7b97\u5668\u5bb9\u5668 (\u9694\u96e2\u65bc #shipping-estimator \u5167)\n   ========================================== *\/\n#shipping-estimator {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 30px 20px;\n    font-family: Arial, sans-serif;\n    background-color: #F7F9FC;\n    border-radius: 16px;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.05);\n}\n\n#shipping-estimator h2 {\n    font-size: 28px;\n    color: #D81E05;\n    text-align: center;\n    margin-bottom: 24px;\n}\n\n#shipping-estimator .piece-group,\n#shipping-estimator .section-group {\n    background: #FFFFFF;\n    border-radius: 12px;\n    padding: 20px\n;\n    margin-bottom: 20px;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.04);\n}\n\n#shipping-estimator .piece-group h4,\n#shipping-estimator .section-group h4 {\n    color: #D81E05;\n    margin-top: 0;\n    margin-bottom: 16px;\n}\n\n\/* ==========================================\n   2. \u6b04\u4f4d\u6a6b\u5411\u8207\u7e31\u5411\u4f48\u5c40 (\u9650\u8a08\u7b97\u5668\u5167\u90e8)\n   ========================================== *\/\n#shipping-estimator .location-group,\n#shipping-estimator .piece-details-group,\n#shipping-estimator .section-details-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n}\n\n#shipping-estimator .location-input,\n#shipping-estimator .piece-input,\n#shipping-estimator .section-input,\n#shipping-estimator .dimension-group,\n#shipping-estimator .package-type-group {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 200px;\n    gap: 8px;\n}\n\n\/* \u7d71\u4e00 Label \u6a23\u5f0f *\/\n#shipping-estimator .location-input label,\n#shipping-estimator .piece-input label,\n#shipping-estimator .section-input label,\n#shipping-estimator .dimension-group label,\n#shipping-estimator .package-type-group label {\n    display: block;\n    font-size: 14px;\n    font-weight: bold;\n    margin: 0;\n}\n\n\/* \u7d71\u4e00 Input & Select \u6a23\u5f0f (\u56b4\u683c\u9650\u5236\u5728 #shipping-estimator \u5167) *\/\n#shipping-estimator .form-group input,\n#shipping-estimator .form-group select,\n#shipping-estimator input,\n#shipping-estimator select {\n    width: 100%;\n    height: 40px;\n    padding: 6px 10px;\n    border: 1px solid #CCC;\n    border-radius: 6px;\n    box-sizing: border-box;\n    font-size: 14px;\n    background: #FFF;\n}\n\n\/* Dimensions \u5c3a\u5bf8\u8f38\u5165\u6846\u7279\u4f8b *\/\n#shipping-estimator .dimension-inputs {\n    display: flex;\n    gap: 8px;\n}\n\n#shipping-estimator .dimension-inputs input {\n    width: 70px !important;\n    margin: 0;\n}\n\n\/* Package Type *\/\n#shipping-estimator .package-type-actions {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n}\n\n#shipping-estimator .package-type-actions select {\n    flex: 1;\n}\n\n#shipping-estimator .add-piece-group-btn {\n    height: 40px;\n    padding: 0 16px;\n    border: 1px solid #CCC;\n    border-radius: 6px;\n    background: #F5F5F5;\n    cursor: pointer;\n    white-space: nowrap;\n}\n\n\/* \u6309\u9215 *\/\n#shipping-estimator #calculate-btn {\n    background: #D81E05;\n    color: #FFF;\n    border: none;\n    padding: 12px 30px;\n    border-radius: 6px;\n    font-size: 16px;\n    font-weight: bold;\n    cursor: pointer;\n}\n\n#shipping-estimator .button-group {\n    text-align: center;\n    margin-top: 20px;\n}\n\n\/* \u6e05\u9664\u8a08\u7b97\u5668\u5167 WordPress \u81ea\u52d5\u751f\u6210\u7684 p \u6a19\u7c64\u5e72\u64fe *\/\n#shipping-estimator p {\n    margin: 0 !important;\n    padding: 0 !important;\n}\n\n\/* ==========================================\n   3. Modal \u5f48\u7a97 (\u7368\u7acb\u9694\u96e2\u4f5c\u7528\u57df)\n   ========================================== *\/\n#contact-modal {\n    display: none;\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    background-color: rgba(0, 0, 0, 0.6) !important;\n    z-index: 99999 !important;\n    align-items: center !important;\n    justify-content: center !important;\n}\n\n#contact-modal .modal-content {\n    background: #ffffff !important;\n    padding: 24px 30px !important;\n    border-radius: 12px !important;\n    width: 90% !important;\n    max-width: 500px !important;\n    max-height: 85vh !important;\n    overflow-y: auto !important;\n    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;\n    position: relative !important;\n    margin: auto !important;\n    box-sizing: border-box !important;\n}\n\n#contact-modal h3 {\n    margin-top: 0 !important;\n    margin-bottom: 16px !important;\n    font-size: 20px !important;\n    text-align: center !important;\n    color: #D81E05 !important;\n}\n\n#contact-modal .form-group {\n    margin-bottom: 12px !important;\n}\n\n#contact-modal .form-group label {\n    display: block !important;\n    margin-bottom: 6px !important;\n    font-size: 14px !important;\n    font-weight: bold !important;\n}\n\n#contact-modal .form-group input,\n#contact-modal .form-group textarea {\n    width: 100% !important;\n    padding: 8px 10px !important;\n    border: 1px solid #CCC !important;\n    border-radius: 6px !important;\n    box-sizing: border-box !important;\n}\n\n#contact-modal #submit-contact-btn {\n    background: #D81E05 !important;\n    color: #FFF !important;\n    border: none !important;\n    padding: 12px 30px !important;\n    border-radius: 6px !important;\n    font-size: 16px !important;\n    font-weight: bold !important;\n    cursor: pointer !important;\n}\n\n#contact-modal p {\n    margin: 0 !important;\n    padding: 0 !important;\n}\n<\/style>\n\n\n\n<!-- 1. \u6309\u9215\u72c0\u614b\u63a7\u5236\u8173\u672c -->\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var mainForm = document.getElementById('shipping-estimator-form');\n    var contactForm = document.getElementById('contact-form');\n\n    if (mainForm) {\n        mainForm.addEventListener('submit', function() {\n            var calcBtn = document.getElementById('calculate-btn');\n            if (calcBtn) {\n                calcBtn.disabled = true;\n                calcBtn.setAttribute('data-original-text', calcBtn.textContent);\n                calcBtn.textContent = 'Calculating, please wait...';\n            }\n        });\n    }\n\n    if (contactForm) {\n        contactForm.addEventListener('submit', function() {\n            var submitBtn = document.getElementById('submit-contact-btn');\n            if (submitBtn) {\n                submitBtn.disabled = true;\n                submitBtn.textContent = 'Submitting, please wait...';\n            }\n        });\n    }\n\n    \/\/ Modal \u95dc\u9589\u6216\u8df3\u8f49\u6642\u81ea\u52d5\u9084\u539f\u6309\u9215\u6587\u5b57\n    var contactModal = document.getElementById('contact-modal');\n    if (contactModal) {\n        var observer = new MutationObserver(function(mutations) {\n            mutations.forEach(function(mutation) {\n                if (mutation.attributeName === 'style') {\n                    var calcBtn = document.getElementById('calculate-btn');\n                    if (calcBtn && calcBtn.hasAttribute('data-original-text')) {\n                        calcBtn.disabled = false;\n                        calcBtn.textContent = calcBtn.getAttribute('data-original-text');\n                    }\n                }\n            });\n        });\n        observer.observe(contactModal, { attributes: true });\n    }\n});\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"class_list":["post-2772","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/pages\/2772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/comments?post=2772"}],"version-history":[{"count":46,"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/pages\/2772\/revisions"}],"predecessor-version":[{"id":4400,"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/pages\/2772\/revisions\/4400"}],"wp:attachment":[{"href":"https:\/\/ufreight.com\/tc\/wp-json\/wp\/v2\/media?parent=2772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}