Calculated fields

Calculated fields (a.k.a. conditional values) is a feature that we are planning to add to the PRO version. Until then, you can rely on some custom javascript to make fields automatically take a value based on a custom formula and the values of other fields.

Example 1: Update a field based on which checkboxes are selected

Form

    one
    two
    three


    Form Code

    [checkbox c1 exclusive "one|1"]
    [checkbox c2 exclusive "two|1"]
    [checkbox c3 exclusive "three|1"]
    [number answer]
    [submit]
    <script>
      (function($) {
        const checkboxes = {'c1':1,'c2':2,'c3':3};
        $checkboxes = $(Object.keys(checkboxes).map(function(name){
          return 'input[name="'+name+'"]';
        }).join(','));
        const $answer = $('input[name="answer"]');
        $checkboxes.on('change',function(e){
          let sum = 0;
          $checkboxes.each(function(){
            if ($(this).is(":checked")) {
              sum += checkboxes[$(this).attr('name')];
            }
          });
          $answer.val(sum);
        });
      }(jQuery));
    </script>

    Conditional Fields (Text)

    Edit this form in the form tester

    Example 2: Variable price per person based on the number of people

    Form

      cost per person is $5.00

      cost per person is $4.50

      Total price


      Form Code

      <label>Number of people:<br>
      [number number-people "0"]<label>
      The price per person is $5.<br>
      If you enter 10+ people, the price is $4.5 per person.
      [group g-multiplier-1 disable_on_hide]
        cost per person is $5.00
        [hidden multiplier "5"]
      [/group]
      [group g-multiplier-2 disable_on_hide]
        cost per person is $4.50
        [hidden multiplier "4.5"]
      [/group]
      Total price
      [number total "0"]
      [submit]
      <script>
        (function($) {
          const $number = $('[name="number-people"]');
          const $total = $('[name="total"]');
          $('.wpcf7-form').on('input', function(e) {
            setTimeout(() => {
              const $multiplier = $('[name="multiplier"]:not(:disabled)');
              const number = $number.val();
              const multiplier = $multiplier.val();
              $total.val(number * multiplier);
            }, 200);
          });
        }(jQuery));
      </script>

      Conditional Fields (Text)

      show [g-multiplier-1] if [number-people] less than "10"
      show [g-multiplier-2] if [number-people] greater than or equals "10"

      Edit this form in the form tester