Showing all posts with tag pro (14)
Compare 2 fields
At the time of writing there is no built in way to compare 2 fields with each other. However, since Conditional Fields PRO allows you to define your own functions, you can always resort to a bit of JavaScript in order to create your own custom conditions. Let’s say you want to show a group, … Read More
Show group based on the number of selected checkboxes
Say you have 5 checkboxes and you want some fields to appear when at least 3 are checked? With the free version of Conditional Fields this isn’t possible. But with Conditional Fields Pro you can add a function name as a condition, and depending on whether or not this function returns true, the fields will … Read More
Multistep mobile view
On mobile, having all the steps visible, can result in poor user experience. Hide steps on mobile One simple solution is to add this piece of CSS to your theme Why don’t you give it a try? Resize your window or visit this page on mobile to see the circles disappear. … Read More
Repeater with file
To attach files from a repeater to your email message, you need to wrap the file-field with the name of the repeater in the attachments field. For example, if your form looks like this: The attachment field should look like this: You can also show the file names in the email body like this: Demo: … Read More
Multistep with summary
This multistep form shows a summary of all the fields in the last step, using the [summary] shortcode. This function is available only in Conditional Fields Pro. In the backend, you will see an extra tab, called Summary, where you can add the template for the summary. This template follows the same markup rules as the … Read More
Summary
Conditional fields Pro includes an extra tag to generate a summary of your form. This is especially useful as a last step summary in multistep forms … Read More
hide submit from the moment a radio button is checked
No idea why you would ever wanna do something like this. But just so you know, you can. … Read More
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. In order for this form to work you need to add this javascript code to your theme: … Read More
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. … Read More
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. 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 … Read More
Repeater (PRO only)
Basic example Advanced example The folowing features can be tweaked: Minimum number of repetitions (default 1) – example: min:1 Maximum number of repetitions (default 200) – example: max:10 Initial number of repetitions (default 1) – example: initial:2 Add button text (default: “Add”) – example: add “Add another address” Remove button text (default: “Remove”) – example: … Read More
Togglebutton (PRO only)
Conditional Fields PRO introduces a button that will change it’s text if you click it. And of course, since a button is just another input element, you can show/hide groups based on the text of the button. Yay! Alternative: styled checkboxes and radiobuttons The togglebutton is an actual button element that changes its value if … Read More
multistep
Conditional Fields PRO supports multi-step forms out of the box. New since version 1.8.1: multistep form with summary field Basic usage With custom step titles and buttons Notes If you are using multistep, the first tag in your form should always be [step … ]. All the form code that appears before the first [step] will … Read More