Calculations

Quform WordPressGuidesAdvancedCalculations

This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.

There isn’t anything built in to the Quform plugin to do calculations on the selected form values and show results, but it can be done with custom JavaScript code. This guide will show you how to show the results of a calculation to the user and set the value of a Hidden field so that the same total is submitted with the form data for the admin to see.

Note: if you do not understand the JavaScript code in Step 2 you may need a JavaScript developer to build this for you. We are not available for hire for custom work.

Step 1

Create the form if you haven’t done so already and add a Hidden field to the form to store the result of the calculation.

Step 2

Add an HTML element (from the “More” tab) and add this code at the point in the form where you want the result of the calculation to appear.

1
2
3
4
5
6
7
89
10
11
12
13
14
15
16
17
1819
20
21
22
23
24
25
26
27
2829
30
31
32
3334
35
36
37
3839
40
41
42
43
44
45
46
47
4849
50
51
52
53
54
55
56
5758
59
60
61
62
63
6465
66
6768
69
7071
72

<div id="form-total"></div>
<script>
    jQuery(function ($) {
        var calculate = function () {
            var total = 0.00;
 
            // Check the chosen option of a select menu
            var val1 = $('.iphorm_1_1').val();            if (val1 == 'Option 1') {
                total += 15.00;
            } else if (val1 == 'Option 2') {
                total += 20.00;
            } else if (val1 == 'Option 3') {
                total += 25.00;
            }
 
            // A second select menu
            var val2 = $('.iphorm_1_5').val();            if (val2 == 'Option 1') {
                total += 100.00;
            } else if (val2 == 'Option 2') {
                total += 200.00;
            } else if (val2 == 'Option 3') {
                total += 250.00;
            }
 
            // Check if a checkbox is ticked
            if ($('.iphorm_1_2_1').is(':checked')) {                total += 5.00;
            }
 
            // A second checkbox
            if ($('.iphorm_1_4_2').is(':checked')) {                total += 105.00;
            }
 
            // A radio button
            var val3 = $('.iphorm_1_6:checked').val();            if (val3 == 'Option 1') {
                total += 100.00;
            } else if (val3 == 'Option 2') {
                total += 200.00;
            } else if (val3 == 'Option 3') {
                total += 250.00;
            }
 
            // A text input field with numeric value
            var val4 = $('.iphorm_1_7').val();            if (val4.length && $.isNumeric(val4)) {
                total += parseFloat(val4);
            }
 
            // Display the result to the user
            $('#form-total').text('Total: $' + total);
 
            // Set the value of the hidden field
            $('input[name=iphorm_1_3]').val('$' + total);        };
 
        // Calculate on page load
        calculate();
 
        // Recalculate when these select menus are changed
        $('.iphorm_1_1, .iphorm_1_5').change(calculate); 
        // Recalculate when these checkboxes/radio buttons are clicked
        $('.iphorm_1_2, .iphorm_1_4, .iphorm_1_6').click(calculate); 
        // Recalculate when these text input fields are changed
        $('.iphorm_1_7').blur(calculate);    });
</script>
<div id="form-total"></div>
<script>
    jQuery(function ($) {
        var calculate = function () {
            var total = 0.00;

            // Check the chosen option of a select menu
            var val1 = $('.iphorm_1_1').val();
            if (val1 == 'Option 1') {
                total += 15.00;
            } else if (val1 == 'Option 2') {
                total += 20.00;
            } else if (val1 == 'Option 3') {
                total += 25.00;
            }

            // A second select menu
            var val2 = $('.iphorm_1_5').val();
            if (val2 == 'Option 1') {
                total += 100.00;
            } else if (val2 == 'Option 2') {
                total += 200.00;
            } else if (val2 == 'Option 3') {
                total += 250.00;
            }

            // Check if a checkbox is ticked
            if ($('.iphorm_1_2_1').is(':checked')) {
                total += 5.00;
            }

            // A second checkbox
            if ($('.iphorm_1_4_2').is(':checked')) {
                total += 105.00;
            }

            // A radio button
            var val3 = $('.iphorm_1_6:checked').val();
            if (val3 == 'Option 1') {
                total += 100.00;
            } else if (val3 == 'Option 2') {
                total += 200.00;
            } else if (val3 == 'Option 3') {
                total += 250.00;
            }

            // A text input field with numeric value
            var val4 = $('.iphorm_1_7').val();
            if (val4.length && $.isNumeric(val4)) {
                total += parseFloat(val4);
            }

            // Display the result to the user
            $('#form-total').text('Total: $' + total);

            // Set the value of the hidden field
            $('input[name=iphorm_1_3]').val('$' + total);
        };

        // Calculate on page load
        calculate();

        // Recalculate when these select menus are changed
        $('.iphorm_1_1, .iphorm_1_5').change(calculate);

        // Recalculate when these checkboxes/radio buttons are clicked
        $('.iphorm_1_2, .iphorm_1_4, .iphorm_1_6').click(calculate);

        // Recalculate when these text input fields are changed
        $('.iphorm_1_7').blur(calculate);
    });
</script>

The code will need to be modified to suit your own calculation and element IDs. See below for a description of how to change the code.

  • On line 8 iphorm_1_1 is the unique ID of a Dropdown Menu
  • On line 18 iphorm_1_5 is the unique ID of another Dropdown Menu
  • On line 28 iphorm_1_2_1 is the class name of the checkbox input, which is the unique ID (iphorm_1_2) followed by an underscore then the number of the option (starts from 1). Inspect the element in the browser to get the correct class name.
  • On line 33 iphorm_1_4_2 is the class name of the checkbox input, which is the unique ID (iphorm_1_4) followed by an underscore then the number of the option (starts from 1). Inspect the element in the browser to get the correct class name.
  • On line 38 iphorm_1_6 is the unique ID of a Multiple Choice (radio button) field
  • On line 48 iphorm_1_7 is the unique ID of a Text Input field
  • On line 57 iphorm_1_3 is the unique ID of the Hidden field
  • On line 64 .iphorm_1_1, .iphorm_1_5 is the CSS selector of the Dropdown Menus which we are listening to for change events (a dot followed by the element unique ID, separated by comma)
  • On line 67 .iphorm_1_2, .iphorm_1_4, .iphorm_1_6 is the CSS selector of the Checkboxes and Multiple Choice (radio buttons) which we are listening to for click events (a dot followed by the element unique ID, separated by comma)
  • On line 70 .iphorm_1_7 is the CSS selector of the Text Input field we are listening to for the blur event (a dot followed by the element unique ID, separated by comma)
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy