Date range

At this point the Conditional Fields plugin is unaware of date ranges, but this is a problem that can be solved with custom functions. Custom functions are available in Conditional Fields Pro. Check out the example below.

Form

Enter a date between 29-Aug-2019 and 7-Sept-2019:

Well done!

Form Code

[group nope]Enter a date between 29-Aug-2019 and 7-Sept-2019:[/group]
[date date]
[group well-done]Well done![/group]

Conditional Fields

show group if field operator value

well-done if date function date_between 
nope if date function not_date_between 

In order for this form to work you need to add this javascript code to your theme:

<script>
    
    fromdate = new Date(2019,7,29);
    untildate = new Date(2019,8,7);
    
    function date_between($field) {
    
        //expected format: yyyy-mm-dd
        
        var checkdate_str = $field.val();
        var dmy = checkdate_str.split("-");
        
        if (dmy.length !== 3 ||
        isNaN(dmy[0]) || dmy[0].length!==4 ||
        isNaN(dmy[1]) || dmy[1].length!==2 ||
        isNaN(dmy[2]) || dmy[2].length!==2 )
        {
        return false; //invalid format
        }
        
        var checkdate = new Date(dmy[0], dmy[1] - 1, dmy[2]);
        
        if (checkdate === "Invalid Date" || isNaN(checkdate))
        {
        return false; // invalid date
        }
        
        //at this point the date is valid
        
        if (checkdate > fromdate && checkdate < untildate) {
            return true; // date is between the from and until date
        } else {
            return false; // date is not between the from and until date
        }
    }
    
    function not_date_between($field) {
        return !date_between($field);
    }
    
</script>

case insensitive

Note: this example uses regular expressions, which are only available in conditional fields Pro. Regular expressions are called by default with the case-insensitive flag (i) set.

Form

Well done!

Form Code

<label>Enter <em>Show</em> or <em>show</em> or <em>SHOW</em> or <em>shOW</em><br>
[text text-show]</label>
[group well-done]Well done![/group]
[submit "Send"]

Conditional Fields

show group if field operator value

well-done if text-show equals (regex) ^(show)$ 

bmi

Form

Please enter your BMI
Underweight
Overweight
Normal weight


Form Code

<label> BMI
[number bmi] </label>

[group g-nobmi]Please enter your BMI[/group]
[group g-underweight]Underweight[/group]
[group g-overweight]Overweight[/group]
[group g-normalweight]Normal weight[/group]
<br>

Conditional Fields

show group if field operator value

g-nobmi if bmi is empty  
g-normalweight if bmi 19 
and if bmi < 25 
g-overweight if bmi 25 
g-underweight if bmi < 19 
and if bmi not empty  

Advanced conditional logic with custom javascript functions

CF7 Conditional Fields PRO 1.6.2 introduces the possibility to write your own JavaScript functions to determine whether or not a group should be shown.

Form

Sorry, you are too young to watch dirty pictures. Try decreasing your date of birth.

Hooray! You are older than 18. Here's some explicit content:

    o
   /__o
 _// <
'

Form Code

<label>Date of birth:
[date date-of-birth "2010-04-03"]</label>

[group minus-18]
Sorry, you are too young to watch dirty pictures. Try decreasing your date of birth.

[/group][group plus-18]
Hooray! You are older than 18. Here's some explicit content:
<pre style="font-family:monospace">
    o   
   /__o 
 _// < 
'   
</pre>
[/group]

Conditional Fields

show group if field operator value

plus-18 if date-of-birth function isOlderThan18 
minus-18 if date-of-birth function isYoungerThan18 

In order for the above example to work, you need to create two JavaScript functions – not PHP functions! – called isOlderThan18($field) {} and isYoungerThan18($field) {} in your theme. These functions need to return true or false. Preferably, you need to place these functions somewhere in a custom JS file, or if you must, in your header.php or footer.php, for example before the closing </body> tag in your theme.

The $field parameter passed is the jQuery object of the date field. If you want to access the DOM field directly, you can get it with $field[0].

Here’s the full JavaScript code used to check if the user is older or younger than 18:

<script>

    function isOlderThan18($field) {

        //expected format: yyyy-mm-dd

        var birthdate_str = $field.val();
        var dmy = birthdate_str.split("-");

        if (dmy.length !== 3 ||
            isNaN(dmy[0]) || dmy[0].length!==4 ||
            isNaN(dmy[1]) || dmy[1].length!==2 ||
            isNaN(dmy[2]) || dmy[2].length!==2 )
        {
            return false; //invalid format
        }

        var birthdate = new Date(dmy[0], dmy[1] - 1, dmy[2]);

        if (birthdate === "Invalid Date" || isNaN(birthdate))
        {
            return false; // invalid date
        }

        //at this point the date is valid

        if (calculateAge(birthdate) >= 18) {
            return true; // older than 18
        } else {
            return false; // younger than 18
        }

    }

    function isYoungerThan18($field) {
        return !isOlderThan18($field);
    }

    function calculateAge(birthdate) { // birthday is a date
        var ageDifMs = Date.now() - birthdate.getTime();
        var ageDate = new Date(ageDifMs); // miliseconds from epoch
        return Math.abs(ageDate.getUTCFullYear() - 1970);
    }

</script>

Repeater (PRO only)

Basic example

Form

Street address:
City:
Country:

 

Form Code

[repeater rep-1]
Street address: [text* street]
City: [text* city]
Country: [text* country]
[/repeater]
&nbsp;
[submit]

Email Body

Thanks you for filling out these addresses:

[rep-1][street], [city], [country]<br />
[/rep-1]

Advanced example

The folowing features can be tweaked:

  • Minimum number of repetitions (default 1)
  • Maximum number of repetitions (default 200)
  • Initial number of repetitions (default 1)
  • Add button text (default: “Add”)
  • Remove button text (default: “Remove”)

It’s also possible to add groups inside the repeater.

Take a look at the example code, it should make everything clear.

Form

address:

Street address:
City:
Country:

This is my: homebusiness

VAT number:

 

Form Code

[repeater rep-1 min:1 max:4 add "Add address" remove "Remove address" ]
  <fieldset>
    <legend>address:</legend>
    Street address: [text* street]
    City: [text* city]
    Country: [text* country]

    This is my: [radio radio-type default:1 "home" "business"]
    [group group-vat]VAT number: [text* vat][/group]
  </fieldset>
[/repeater]
&nbsp;
[submit]

Conditional Fields

show group if field operator value

group-vat if radio-type equals business 

Email Body

Thanks you for filling out these addresses:

[rep-1]
[street], [city], [country] ([radio-type])[group-vat]
VAT: [vat][/group-vat]
--------------------------------------[/rep-1]

Togglebutton (PRO only)

Form

Nice! Here are some Terms and conditions (not really)

Cool! Since you agree to our conditions, you have the privilige of clicking this submit button.

Noting got submitted.

Form Code

[togglebutton toggle-1 "Show" "Hide"]

[group group-1]
Nice! Here are some <a href="http://example.com/" target="_blank">Terms and conditions</a> (not really)

[togglebutton toggle-terms "I read your stupid terms and I agree" "I do not agree"]

[group group-2]
Cool! Since you agree to our conditions, you have the privilige of clicking this submit button.
[togglebutton toggle-submit "Submit" "PSYCH!!"]

[group group-3]
Noting got submitted. 
[/group]
[/group]

[/group]

Conditional Fields

show group if field operator value

group-1 if toggle-1 equals Hide 
group-2 if toggle-terms equals I do not agree 
group-3 if toggle-submit equals PSYCH!! 

multistep (preview)

Conditional Fields PRO will soon supports multistep forms out of the box. The functionality is in beta, but will be released soon (or maybe it is already released by the time you read this. If so, please let me know so I can update this text)

Form

About you

About your family

Information about your children

About your car

Finish up

Thank you for filling out this silly multistep form. One last question.


Form Code

[step title "About you"]
  <p><label>Your name: [text* your-name]</label></p>
  <p><label>Your favorite color: [text* your-address]</label></p>

[step title "About your family"]
  <h4>Information about your children</h4>
  <label>[checkbox no-children "I don't have any children"]</label>
  [group has-children]
    [repeater children add "add child" remove "remove child"]
      <fieldset><p><label>Name of child: [text* name-of-child]</label></p>
      <p><label>Favorite color of child: [text* fav-color-of-child]</label></p></fieldset>
    [/repeater]
  [/group]

[step title "About your car"]
  <p><label>What color is your car? * [text* your-car-color]</label></p>

[step title "Finish up"]
  <p>Thank you for filling out this silly multistep form. One last question.</p>
  <p><label>Do you like filling out forms? * [select* first_as_label "-- yes or no --" "yes" "no"]</label></p>
  <p>[submit "Submit form"]</p>

Conditional Fields

show group if field operator value

has-children if no-children not equals I don't have any children 

Note: Conditional Fields FREE is also partly compatible with these Multistep plugins: