First update after 20 december 2024 needs extra attention!

Conditional Fields 2.5.5 and later use new folder and file names.
As a result, the plugin will deactivated automatically the first time that you update from version 2.5.4.
Please make sure to activate the plugin manually after the update.

Read more

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