Contact Form 7 – Auto Tour Budget Calculator (Travel Query Form Guide)

Introduction

If you run a travel or tour website, you probably receive a lot of inquiries about custom packages, pricing, and trip durations.
Instead of manually calculating each client’s travel cost, you can automate this process using a simple Contact Form 7 form and a small piece of JavaScript.

This article will guide you step-by-step on how to set up an Auto Tour Budget Calculator in Contact Form 7 — complete with date-based day calculation, per-person budget validation, and automatic grand total generation.

What Is the Auto Tour Budget Calculator and Why You Need It

The Auto Tour Budget Calculator is a lightweight JavaScript function that integrates with your Contact Form 7 inquiry form to calculate the estimated travel cost automatically.

Key Features

• Automatically calculates the number of days from arrival and departure dates.
• Multiplies budget per person × number of travelers × total days to generate the Grand Total.
• Validates that the budget per person is at least ₹1000 (or any value you choose).
• Disables the submit button if validation fails to prevent low-budget or incomplete inquiries.

Why You Should Use It

• Helps customers get instant estimates, improving lead quality.
• Reduces manual follow-ups — customers already know their expected cost.
• Prevents invalid or unrealistic form submissions.
• Enhances the overall user experience and boosts conversion rates.

How It Works (In Simple Terms)

1. When the page loads, the script finds your Contact Form 7 form (.wpcf7-form).
2. It listens for changes in arrival date, departure date, number of persons, and budget per person.
3. It automatically calculates the total number of days and the grand total cost.
4. If the budget per person is below ₹1000, an error message appears, and the submit button is disabled.
5. The script re-attaches itself after AJAX submissions, so it works even when Contact Form 7 reloads the form dynamically.

Step-by-Step Implementation

Step 1 – Create the Contact Form

Use Contact Form 7 to build your Travel Query Form.
Here’s an example (simplified):

<label>Your Name</label>
[text* full-name class:form-control placeholder "Your full name"]

<label>Email</label>
[email* email class:form-control placeholder "Your email"]

<label>Arrival Date</label>
[date* arv-date class:form-control]

<label>Departure Date</label>
[date* depr-date class:form-control]

<label>Total Persons</label>
[number* total-persons class:form-control min:1]

<label>Budget Per Person (₹)</label>
[number* budget-per-person class:form-control]

<label>Grand Total</label>
[number total-budget readonly class:form-control]

[submit class:btn class:btn-primary "Submit"]

Make sure to include:

• budget-per-person
• total-persons
• arv-date and depr-date
• total-budget (readonly)
• days-diff (hidden field for day calculation)

Step 2 – Add the JavaScript

You can add the following JavaScript using the WPCode plugin or directly through your theme’s functions.php (enqueue method).

Option 1 – WPCode Plugin (Easy Way)

• Go to Code Snippets → Add New → JavaScript Snippet.
• Paste the following code.
• Set location: “Site-wide footer” or “Specific Page” (if you’re using WPCode Pro).

document.addEventListener('DOMContentLoaded', function () {
    function attachBudgetCalculator() {
        const forms = document.querySelectorAll('.wpcf7-form');
        forms.forEach(function(form) {
            const budgetField = form.querySelector('input[name="budget-per-person"]');
            const personsField = form.querySelector('input[name="total-persons"]');
            const totalField   = form.querySelector('input[name="total-budget"]');
            const arvDate      = form.querySelector('input[name="arv-date"]');
            const deprDate     = form.querySelector('input[name="depr-date"]');
            const daysDiff     = form.querySelector('input[name="days-diff"]');
            const submitBtn    = form.querySelector('input[type="submit"], button[type="submit"]');

            if (!budgetField || !personsField || !totalField || !submitBtn) return;

            let errorMsg = budgetField.parentNode.querySelector('.budget-error');
            if (!errorMsg) {
                errorMsg = document.createElement('span');
                errorMsg.className = "budget-error";
                errorMsg.style.color = "red";
                errorMsg.style.fontSize = "13px";
                errorMsg.style.display = "none";
                errorMsg.innerText = "Budget per person must be at least ₹1000.";
                budgetField.parentNode.appendChild(errorMsg);
            }

            function updateFormState() {
                const budget   = parseFloat(budgetField.value) || 0;
                const persons  = parseInt(personsField.value) || 0;
                const totalstay= parseInt(daysDiff.value) || 0;

                if (budget > 0 && persons > 0 && totalstay > 0) {
                    totalField.value = budget * persons * totalstay;
                } else {
                    totalField.value = '';
                }

                if (budget > 0 && budget < 1000) {
                    errorMsg.style.display = "block";
                    submitBtn.disabled = true;
                } else {
                    errorMsg.style.display = "none";
                    submitBtn.disabled = false;
                }
            }

            function calculateDays() {
                if (arvDate.value && deprDate.value) {
                    const arrival   = new Date(arvDate.value);
                    const departure = new Date(deprDate.value);
                    const diffTime  = departure - arrival;
                    const diffDays  = diffTime / (1000 * 60 * 60 * 24);
                    daysDiff.value  = diffDays > 0 ? diffDays : 0;
                } else {
                    daysDiff.value = "";
                }
                updateFormState();
            }

            budgetField.addEventListener('input', updateFormState);
            personsField.addEventListener('input', updateFormState);
            arvDate.addEventListener('change', calculateDays);
            deprDate.addEventListener('change', calculateDays);

            form.addEventListener('submit', function(event) {
                const budget = parseFloat(budgetField.value) || 0;
                if (budget < 1000) {
                    event.preventDefault();
                    errorMsg.style.display = "block";
                    budgetField.focus();
                }
            });

            calculateDays();
            updateFormState();
        });
    }

    attachBudgetCalculator();
    document.addEventListener('wpcf7submit', attachBudgetCalculator);
    document.addEventListener('wpcf7invalid', attachBudgetCalculator);
    document.addEventListener('wpcf7mailsent', attachBudgetCalculator);
});

Step 3 – Add Basic CSS (Optional)

Add this CSS under Appearance → Customize → Additional CSS:

.error-budget { border-color: #e74c3c; }
.budget-error { display: block; margin-top: 5px; }
.disabled-submit { opacity: 0.6; cursor: not-allowed; }

Step 4 – Test the Functionality

1. Select Arrival and Departure dates — the number of days should auto-update (hidden field).
2. Enter Total Persons and Budget per Person — the Grand Total should update automatically.
3. Try entering a value below ₹1000 — the form should show an error and disable submit.

When to Use This Calculator

This script is perfect for:

• Travel agencies offering customizable packages.
• Hotel or transport booking websites that calculate cost by duration.
• Corporate trip planners or school tour coordinators.
• Destination management companies that want qualified leads only.

Extra Tips for Better Performance & Security

• Always validate data server-side using the wpcf7_before_send_mail hook to prevent false submissions.
• Load the JavaScript in the footer for faster page speed.
• Use Intl.NumberFormat if you want formatted currency output.
• Test your form on both desktop and mobile browsers.

Conclusion

By combining Contact Form 7 with a simple JavaScript calculator, you can turn your regular travel inquiry form into an interactive and intelligent tour budget estimator.
It improves the user experience, reduces unnecessary inquiries, and increases lead quality — all while saving you time.

📌 Frequently Asked Questions (FAQs)