Showing all posts with tag pro (18)
How to upload multiple files with drag and drop
Conditional Fields PRO supports the [multifile] tag, which allows users to upload multiple files to a single file input field. By default this field looks plain and simple, but by popular demand this page demonstrates how you can turn it into a full-blown drag-and-drop interface which plays nicely with Contact Form 7 and Conditional Fields. … Read More
Regular expressions
Conditional Fields PRO allows you to use regular expressions for the values in any condition. In it’s most straight-forward form, you can just enter the regular expressions as plain text. Because regular expressions can be hard to manage and debug, the plugin makes it possible to create and use some preset regular expressions. To check … Read More
Multistep example: Skip step based on field value
In the example below we show how you make a certain step unavailable, if the user previously indicated that they are not interested in completing it. The relevant javascript code … Read More
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
How to set number of repeater entries based on field value
Sometimes you will want to show the number of repeatable fields based on another field in your form, instead of having your user press the Add and Remove until they reach the desired amount. This can be easily achieved with a bit of Javascript and some custom CSS. The JavaScript to set the number of … 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. Example 1 Example 2 – Multiple date ranges … 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: It’s also possible to add groups inside the repeater. Take a look at the example code, it should make everything clear. … 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