Embed

<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; font-family: sans-serif; color: #333;">

    <div id="voip-calculator" style="flex: 1; min-width: 300px; background: #f9f9f9; padding: 25px; border-radius: 10px; border: 1px solid #ddd;">
        <h3 style="margin-top: 0;">VoIP Monthly Estimate</h3>
        <p style="font-size: 0.85em; text-align: left; color: #666;">* E-911 & Connectivity Included</p>
        <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">

        <div style="margin-bottom: 12px;">
            <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Inbound Minutes (Local)</label>
            <input type="number" id="inbound" value="0" min="0" oninput="calculateVoIP()" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>

        <div style="margin-bottom: 12px;">
            <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Outbound Minutes (US/CA)</label>
            <input type="number" id="outbound" value="0" min="0" oninput="calculateVoIP()" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>

        <div style="margin-bottom: 12px;">
            <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Toll-Free Minutes</label>
            <input type="number" id="tollfree" value="0" min="0" oninput="calculateVoIP()" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>

        <div style="margin-bottom: 12px;">
            <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Phone Numbers (DIDs)</label>
            <input type="number" id="did" value="0" min="0" oninput="calculateVoIP()" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>

        <div style="margin-bottom: 12px;">
            <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Fax Lines</label>
            <input type="number" id="fax" value="0" min="0" oninput="calculateVoIP()" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>

        <div style="background: #eef7ff; padding: 15px; border-radius: 6px; text-align: center; margin-top: 20px;">
            <span style="font-size: 1.1em; font-weight: bold;">Estimated Total:</span>
            <div id="total-price" style="font-size: 2.2em; color: #007bff; font-weight: bold;">$0.00</div>
            
            <div id="usage-alert" style="display: none; background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 0.8em; margin-top: 10px; font-weight: bold;">
                ⚠️ High usage detected! You may qualify for custom enterprise rates.
            </div>

            <p style="font-size: 0.7em; color: #888; margin: 5px 0 0 0;">*Excludes state and local taxes.</p>
        </div>
    </div>

    <div id="contact-form" style="flex: 1; min-width: 300px; background: #ffffff; padding: 25px; border-radius: 10px; border: 1px solid #ddd;">
        <h3 style="margin-top: 0;">Lock In This Rate</h3>
        <p style="font-size: 0.85em; color: #666;">Enter your details to receive a formal PDF quote.</p>
        <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">

        <form action="https://formsubmit.co/info@dabblevoip.com" method="POST">
            <input type="hidden" name="Quote Total" id="hidden-total" value="$0.00">
            
            <div style="margin-bottom: 15px;">
                <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Full Name</label>
                <input type="text" name="name" placeholder="John Doe" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
            </div>
            <div style="margin-bottom: 15px;">
                <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Email Address</label>
                <input type="email" name="email" placeholder="john@company.com" required style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
            </div>
            <div style="margin-bottom: 15px;">
                <label style="display: block; font-weight: bold; font-size: 0.9em; margin-bottom: 5px;">Company Name</label>
                <input type="text" name="company" placeholder="Acme Corp" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
            </div>
            
            <input type="text" name="_honey" style="display:none">
            
            <button type="submit" style="width: 100%; background: #007bff; color: white; border: none; padding: 12px; border-radius: 4px; font-weight: bold; cursor: pointer; margin-top: 10px;">Request Official Quote</button>
        </form>
    </div>

</div>

<script>
function calculateVoIP() {
    const inMin = parseFloat(document.getElementById('inbound').value) || 0;
    const outMin = parseFloat(document.getElementById('outbound').value) || 0;
    const tfMin = parseFloat(document.getElementById('tollfree').value) || 0;
    const didCount = parseInt(document.getElementById('did').value) || 0;
    const faxCount = parseInt(document.getElementById('fax').value) || 0;

    // Wholesale Costs (Internal)
    const wIn = 0.005;
    const wOut = 0.0065;
    const wTf = 0.0077;

    // Calculate Raw Wholesale Usage
    const rawUsage = (inMin * wIn) + (outMin * wOut) + (tfMin * wTf);

    // AGGRESSIVE SCALE: Start 8.5x, drop 0.5 every $10 wholesale, Floor 3.0x
    const multiplier = Math.max(3.0, 8.5 - (Math.floor(rawUsage / 10) * 0.5));

    // Calculate Final Usage Total
    const usageTotal = (inMin * wIn * multiplier) + 
                       (outMin * wOut * multiplier) + 
                       (tfMin * wTf * multiplier);

    const didFee = didCount * 1.00;
    const faxFee = faxCount * 5.00;

    let total = 0;
    const hasInput = (inMin > 0 || outMin > 0 || tfMin > 0 || didCount > 0 || faxCount > 0);

    if (hasInput) {
        total = usageTotal + didFee + faxFee + 15.00;
    }

    const formattedTotal = '$' + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
    
    // Update visual display
    document.getElementById('total-price').innerText = formattedTotal;
    // Update hidden form field
    document.getElementById('hidden-total').value = formattedTotal;
    // Toggle Alert (if usage portion exceeds $100)
    document.getElementById('usage-alert').style.display = (usageTotal > 100) ? 'block' : 'none';
}
</script>

Dabble VOIP