Get the answers to the common questions of our users.
Detailed description of each particularity of the Calculated Fields Form.
Technical articles with many tips and tricks about the use of Calculated Fields Form.
Contact Us if the answer is not in the rest of documentation sources.
Installation Instructions:
There are two alternatives for installing the plugin:
Through the plugins section in WordPress:
Note: The process is safe, the plugin's data and settings are not affected during the isntallation or upgrade.
An alternative installation method:
Upgrade Instructions:
The upgrade instructions are exactly the same ones mentioned above, but it is recommended to create a backup of the plugin's files in your local computer before, because the customized files are overwrote by the installation process.
After upgrading the plugin remember to clear your browser's cache.
Go to the webpage with the comparison of features in every version of the plugin.
There is a specific control in the plugin for covering this need, the Acceptance control. It is a requirement with the new European General Data Protection Regulation law.
The Acceptance control is a checkbox field with only one choice that is required by default (the form cannot be submitted if the user does not accepts first the terms and conditions)
The Acceptance control include two additional attributes that are excluding, one of them for entering the URL to the terms and conditions page, and the second one for entering the text directly into properties of the field. If there is entered the URL to the terms and conditions page, the field will include a link for going to this page, but if the text is entered directly into the field, would be opened as a dialog over the page's content.
Yes, the forms are displayed into the AMP pages using <iframe> tags (that are converted into amp-iframe tags by plugins like: "Accelerated Mobile Pages") to satisfy the AMP requirements.
Furthermore, your website should support SSL (https) because AMP requires the use of SSL in the URLs loaded into the amp-iframe tags.
The forms' shortcode support a special attribute used only by the AMP pages for controlling the height of the iframe tags. For example, to insert the form into an iframe tag with 800px of height, the shortcode would be similar to:
[CP_CALCULATED_FIELDS id="1" amp_iframe_height="800"]
Insert "Page Break" fields in the form, between the fields that belongs to different pages.
The Date control allows to define two types of initial dates, a static date, for example 03/24/2015, or a relative date depending of the current date, for example 3 days after today.
The static dates are very easy to define: select the date field in the form, and type the date string in any of the attributes: "Predefined Value", or "Default Date", for the static dates, any of attributes can be used interchangeably.
The case of relative dates is a little more restrictive, the rules must be typed in the "Default date" attribute, and should comply any of formats:
Number: will be considered a number of days from today. For example, the number 2 represent two days from today, and the number -1 represent yesterday.
String: A smart text indicating a relative date. Relative dates must contain a pair of value(number) and period; valid periods are "y" representing years, "m" representing months, "w" represents weeks, and "d" represents days. For example "+1m +7d" indicates one month and seven days from today.
There are different alternatives to translate the datepickers' texts, directly in the form, or as an external file. Every alternative has its advantages and disadvantages.
Defining the texts from the form's code allows to update the plugin without affecting the translations, however, if there are multiple forms on your website, would be required to include the code into every form. However if there are forms in different languages, it would be an advantage, because allows to define a different language per form.
The alternative would be to define the datepicker language into a file. The language would be defined only once, however, every time the plugin is updated the file should be uploaded again to the web server.
I'll describe the process, translating the datepicker's texts to French:
Insert a "HTML Content" field in the form (preferably as the first field on the form), tick the "Accept advanced code in content as JavaScript code" box in its settings, and enter the following piece of code as its content:
<script>
(function(){
fbuilderjQuery.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: '<Préc',
nextText: 'Suiv>',
currentText: 'Courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun', 'Jul','Aoû','Sep','Oct','Nov','Déc'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
fbuilderjQuery.datepicker.setDefaults(fbuilderjQuery.datepicker.regional['fr']);
})();
</script>
Create a new file in the text editor of your choice.
Paste the following code into its content:
fbuilderjQuery(function(){
let $ = fbuilderjQuery;
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: '<Préc',
nextText: 'Suiv>',
currentText: 'Courant',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin', 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun', 'Jul','Aoû','Sep','Oct','Nov','Déc'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
weekHeader: 'Sm',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['fr']);
});
Upload the new file to the web server into the "/wp-content/plugins/calculated-fields-form/js/fields-public" directory, with the name you prefer and "js" as its extension, for example: datepicker_fr.js
Finally, you should go to the settings page of the plugin and untick the checkbox: "Activate Javascript Cache" to allow the modifications take effect.
For German calendar:
<script>
fbuilderjQuery(function(){
let $ = fbuilderjQuery;
$.datepicker.regional['de'] = {
closeText: 'Scließen',
prevText: '',
currentText: 'Heute',
monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
weekHeader: 'Wo',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''
};
$.datepicker.setDefaults($.datepicker.regional['de']);
});
</script>
The choices of Radio Buttons, and Checkbox fields, are formed by two input fields, one of them for the choice's text and another one for its value. If you want to display an image with the radio button or checkbox, you shoudl enter an IMG tag into the input field for the choice's text, with an absolute Url to the image's file as its src attribute:
<IMG src="http://..." >
The current value of the slider control can be displayed in its caption's attribute, you simply should enter a text with the format {0}, that would be replaced by the field's value.
Pay attention, if the slider was configured for accepting ranges (with left and right edges), the special text {0} should be inserted twice for displaying both values. For example, if the slider control is used for selecting a range of prices, enter a text in the caption with the format: ${0} - ${0}
The summary uses two class names: cff-summary-title, and cff-summary-value, for the fields labels, and values respectively; you only should to define both classes in any of css files loaded by your website:
.cff-summary-title{}
.and cff-summary-value{}
These styles will be applied to all summary fields in the form. But what to do if you want to change the styles for only one summary field? The summary field includes two attributes: "Classname for fields titles", and "Classname for fields values", you can enter, through these attributes, the class names to apply to the labels and values of fields in this specific summary field.
The form builder does not include a specific field for links, however you can insert a link (or any other HTML tag) using a "HTML Content" field. Insert a "HTML Content" field in the form, and enter the anchor tag as its content. For example, to insert a link to our website, can be entered the following tag:
<a href="https://cff.dwbooster.com">Visit the website</a>
The controls whose values are read from external datasources, like a database or CSV file are distributed only with the Developer and Platinum versions of the plugin, and can be recognized by the text DS in their names.
There is post in the plugin's blog with multiple examples about the use of these controls, and the datasources available, please, CLICK HERE
In this case it is recommend to insert a "Recordset DS" field in the form for reading the data from the database (or the CSV file), and use it as the datasource of the other DS fields in the form. More information in the following link: CLICK HERE
Using a "RecordSet DS" field as intermediary reduces drastically the number of queries to database, because only one field is opening a connection to the database to get its records.
Each time a field value changes an event is fired to re-calculate all the fields that depends on it, so the order isn't relevant. Just avoid creating an endless loop between calculated fields.
The plugin includes many operations grouped in modules: Mathematical operations, Logical operations, operations to calculate distance, Date/Time, Financial operations and more (the plugin is in constant evolution, so, would be added other modules and operations in the future)
Some operations are common to every distribution of the plugin, and others are limited to the Developer and Platinum versions. The comparison of the different distributions of the plugin is available HERE
The list of modules and operations (with their descriptions) are available in the documentation page of the plugin CLICKING HERE
There are three ways to use conditional statements in the equations:
Using the IF operation (javascript is a case sensitive language, do not confuse the operation "IF" with the reserved word "if" of javascript)
IF( condition, value if true, value if false)
For example, if the result of the equation is 100 when the value of fieldname1 is less than 100 and 1000 in another case, the equation would be:
IF(fieldname1<100,100,1000)
Using the ternary operator of javascript
(condition) ? value if true : value if false
Following the same example in the previous point:
(fieldname1<100) ? 100 : 1000
With a more powerful equation, using the "if" conditional statement of javascript:
(function(){
if( fieldname1 < 100) return 100;
else return 1000;
})()
From the following versions of the plugin:
It is possible to use the __ME__ constant in the equations for referring to the value of the calculated field that is being calculated without generate an endless loop. For example, if the calculated field is editable, and you want get the maximum number among the value typed by the user in the field, and the sum of other two fields in the form: fieldname1+fieldname2, the equation can be implemented as follows: MAX(fieldname1+fieldname2,__ME__).
Use the PREC function/operator for that purpose. PREC(X,Y) returns the number X rounded to Y decimal places. For example:
PREC(fieldname4*fieldname5,2)
The above sample rounds the result of the fieldname4*fieldname5 operation to two decimal digits.
The free and pro versions of the plugin allow to obtain the number of days between two date fields, or add a number of days to a date and get the result as a date string through the operation CDATE. CDATE( number, format ), but the Developer and Platinum versions of the plugin include a module dedicated solely for date/time operations. More information about the Date/Time opertaions module in the following link: CLICK HERE
The Developer and Platinum versions of the plugin include a module solely for financial operations. Please, check the operations list with their descriptions and demos, visiting the following link: CLICK HERE
The CALCULATEAMORTIZATION is the most complex operation in the financial module and deserves its own section.
The CALCULATEAMORTIZATION operation returns a list of objects. For example:
CALCULATEAMORTIZATION(25000, 60, 5.25, new Date(2011,11,20) )
Result:
[
{
principle: 24634.725
interest: 109.375
payment: 474.65
paymentToPrinciple: 365.275
paymentToInterest: 109.375
date: Tue Dec 20 2011 00:00:00 GMT+0100 (Romance Daylight Time)
},
{
principle: 24267.851921874997
interest: 217.151921875
payment: 474.65
paymentToPrinciple: 366.873078125
paymentToInterest: 107.776921875
date: Fri Jan 20 2012 00:00:00 GMT+0100 (Romance Daylight Time)
},
...
]
principle: how much remains to pay.
interest: is the accumulated of interest paid until this date.
payment: is the monthly payment (payment of interests and payment of principle).
paymentToPrinciple: is the part of payment that is considered as payment of principle.
paymentToInterest: is the part of payment that is considered as payment of interest.
date: is the date of payment.
In the following example the fieldname1 represents the principle amount, fieldname3 the number of months, and the fieldname2 the interest rate.
The value returned by CALCULATEAMORTIZATION(fieldname1,fieldname3,fieldname2) cannot by assigned directly to the calculated field, or will be displayed a text similar to: [object],[object],...... So, I'll generate a formatted text with HTML tags, to display the CALCULATEAMORTIZATION results in an understandable format.
(function(){
var r = CALCULATEAMORTIZATION(fieldname1,fieldname3,fieldname2),
str = '';
if(r.length)
{
str = '<table cellpadding=" 10" >';
str += '<thead><tr>';
str += '<th>Date</th>';
str += '<th>Interest</th>';
str += '<th>Payment</th>';
str += '<th>Payment to Interest</th>';
str += '<th>Payment to Principle</th>';
str += '<th>Principle</th>';
str += '</tr></thead>';
str += '<tbody>';
for(var i = 0, h = r.length; i < h; i++)
{
str += '<tr>';
str += '<td>'+GETDATETIMESTRING( new Date(r[i]['date']), 'yyyy-mm-dd')+'</td>';
str += '<td>'+PREC(r[i]['interest'],2)+'</td>';
str += '<td>'+PREC(r[i]['payment'],2)+'</td>';
str += '<td>'+PREC(r[i]['paymentToInterest'],2)+'</td>';
str += '<td>'+PREC(r[i]['paymentToPrinciple'],2)+'</td>';
str += '<td>'+PREC(r[i]['principle'],2)+'</td>';
str += '</tr>';
}
str += '</tbody></table>';
}
jQuery('.result-here').html( str );
})()
The equation's description: First, the equation populates the local variable "r" with the list of objects returned by the CALCULATEAMORTIZATION operation, and defines the "str" variable where generate the output with a HTML readable format (HTML format in this case):
var r = CALCULATEAMORTIZATION(fieldname1,fieldname3,fieldname2),
str = '';
The equation validates if the previous operation returns a valid value (the CALCULATEAMORTIZATION returns an empty array if it fails):
if(r.length)
{
....
}
I've decided to display the results of CALCULATEAMORTIZATION operation in a tabular format because it is easier to understand. The first element in the result is the tag to open the table: <table>, and the row with the columns' names:
str = '<table cellpadding=" 10" >'; str += '<tr>'; str += '<td>Date</td>'; str += '<td>Interest</td>'; str += '<td>Payment</td>'; str += '<td>Payment to Interest</td>'; str += '<td>Payment to Principle</td>'; str += '<td>Principle</td>'; str += '</tr>';
Now, it is the moment to create each row of the table with the values of monthly amortization.
for(var i = 0, h = r.length; i < h; i++)
{
str += '<tr>';
str += '<td>'+GETDATETIMESTRING( new Date(r[i]['date']), 'yyyy-mm-dd')+'</td>';
str += '<td>'+PREC(r[i]['interest'],2)+'</td>';
str += '<td>'+PREC(r[i]['payment'],2)+'</td>';
str += '<td>'+PREC(r[i]['paymentToInterest'],2)+'</td>';
str += '<td>'+PREC(r[i]['paymentToPrinciple'],2)+'</td>';
str += '<td>'+PREC(r[i]['principle'],2)+'</td>';
str += '</tr>';
}
The previous code has its particularities. By default the dates returned by the CALCULATEAMORTIZATION operation have all components, including hours and seconds, but in this example the hours and seconds are not relevant, so, I'm using the GETDATETIMESTRING operation (included in the Date/Time module) for changing the date's format:
str += '<td>'+GETDATETIMESTRING( new Date(r[i]['date']), 'yyyy-mm-dd')+'</td>';
Another particularity is the use of the PREC operation. By default the CALCULATEAMORTIZATION returns the numeric values with all their decimals, for example: 366.873078125, but for readability reasons I'm formatting the currency values with two decimal places.
str += '<td>'+PREC(r[i]['interest'],2)+'</td>';
After generate the table rows, it is time to close the table, and print the results:
str += '</table>';
If you display the result directly in the calculated field, you will see a weird text (or very hard to understand) because the input fields cannot rendering HTML tags. I've inserted a "HTML Content" field in the form, with the div tag: <div class="result-here"></div> as its content, and included the following piece of code as part of the equation to display the result in this tag:
jQuery('.result-here').html( str );
The distance module (distributed with the Developer and Platinum versions of the plugin) integrates the forms with Google Maps to calculate the distance between two addresses or the travel time. It is possible to know the list of operations in the module, with their descriptions and examples, visiting the documentation page of the plugin, please, CLICK HERE
The Upload File control includes an attribute for entering the file extensions accepted by the form. However, this files must be accepted by WordPress: About Uploading Files with WordPress
However, if you want accepting files that are not in the list of files supported by WordPress: Activate the "Upload Files add-on", distributed with the Platinum version of the plugin, and enter the new files' extensions in its settings.
To modify the whole styles of the form fields and labels, redefine them through the "Customize Form Design" attribute in the "Form Settings" tab:
#fbuilder, #fbuilder label,
#fbuilder span { color: #00f; }
#fbuilder input[type=text],
#fbuilder textarea,
#fbuilder select {
border: 2px solid #00f;
}
#fbuilder .pbSubmit { color: #00f !important; font-weight: bold !important; }
#fbuilder .section_breaks .section_break { border:0px; }
#fbuilder .section_breaks label { font-size:18px; }
#fbuilder .section_breaks span { font-size:14px; }
#fbuilder .comment_area label { font-size:18px; }
#fbuilder .comment_area span { font-size:14px; }
#fbuilder .pbNext,#fbuilder .pbPrevious {color: #00f;font-weight: bold;}
#fbuilder .fform h2 {font-size:32px;}
#fbuilder .fform span {font-size:16px;}
#fbuilder label .r {color:#f00;}
.uh_phone .l {display:none;}
#fbuilder .dformat {display:none;}
#fbuilder .uh {color:#2196f3;}
If the "Instructions for Users" are configured as tooltips, the class applied would be: .uh-tooltip
.uh-tooltip {color:#2196f3;}
The plugin applies class names to the different controls to allow modify them easily:
On the other hand to modify only a specific field into the form:
.specialclass label {color: #00f !important;}
.specialclass input[type="text"],
.specialclass input[type="number"],
.specialclass input[type="date"],
.specialclass input[type="email"],
.specialclass input[type="password"],
.specialclass textarea,
.specialclass select {border: 2px solid #00f !important;}
The class names are assigned to the fields through the attribute: "Add Css Layout Keywords". If you need assign multiple class names to a field, you only should enter the class names separated by space characters. For example: myclass1 myclass2
The Up/Down arrows are included by the WebKit browsers (Safari and Chrome ), and Firefox, in the input tags with type="number". To turn off the arrows you simply should paste the following styles definition into the "Customize Form Design" attribut in the "Form Settings" tab:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number]{-moz-appearance: textfield;}
Please, read the following post in the plugin's blog. It describes the different columns layouts available in the plugin:
The easier solution requires to clear the row. Insert a DIV field, immediately after the group of fields, and assign to it the class name: clear. The "clear" class is included in the plugin, to clear the fields before and after the DIV field.
In the case of Calculated Fields, the action is very simple, you only should tick the checkbox "Hide Field From Public Page" in its settings (the field would be formed by an input tag with type="hidden").
For the other fields, you only should to assign to them the predefined class name: hide
Note: The class names are assigned to the fields through their attributes: "Add Css Layout Keywords".
Into the forms builder in the administration area, click the "Form Settings" tab. This area allows to edit the title, subtitle and other form's settings.
The plugin includes multiple templates you can use with the forms from the "Form Settings" tab.
Each template is stored in its own directory, in the "templates" folder ( "/wp-content/plugins/calculated-fields-form/templates"). Basically the templates are formed by a CSS file ( style.css ). If you want change the appearance of a predefined template, you simply should modify the style.css file corresponding to the template.
However, as the files are replaced with the plugin's updates, I recommend to redefine the styles of the selected template, through the "Customize Form Design" attribute, instead to edit the files directly.
Yes that's possible, and very simple. Define the "class" attribute in the form's shortcode with the class names to be assigned to the form's tag:
[CP_CALCULATED_FIELDS id="1" class="class-name-a class-name-b"]
Note that to assign multiple class names, you should separate them by blank characters.
Yes, it's possible to define global variables in javascript through the shortcode of the plugin. For example, in the following shortcode [CP_CALCULATED_FIELDS id="1" myvar="4"], the id="1" identifies the form to be loaded, and myvar="4" definess the global variable cff_var['myvar'] with value 4, that you can use in the equations or the queries associated to the "DS" fields: <%cff_var.myvar%>.
Ex: If your form includes the number field: "fieldname1", and a calculated field. A possible equation would be fieldname1*cff_var['myvar']
To use a parameter passed by post in the equations, it is required to define a javascript variable with this parameter. The plugin implements the CP_CALCULATED_FIELDS_VAR shortcode (to be inserted in the page/post content) to define these variables. For additional details: CLICK HERE
For example, if you want to define a javascript variable with the value of the parameter "myparam" received by post
[CP_CALCULATED_FIELDS_VAR name="myparam" from="post"]
Now, you simply should use the new variable directly in the equations, for example: fieldname1*cff_var['myparam'], or into the queries associated to the "DS" fields: <%cff_var.myparam%>.
To use a parameter passed by get in the equations, it is required to define a javascript variable with this parameter. The plugin implements the CP_CALCULATED_FIELDS_VAR shortcode (to be inserted in the page/post content) to define these variables. For additional details: CLICK HERE
For example, if you want to define a javascript variable with the value of the parameter "myparam" passed by get
[CP_CALCULATED_FIELDS_VAR name="myparam" from="get"]
Now, you simply should use the new variable directly in the equations, for example: fieldname1*cff_var['myparam'], or into the queries associated to the "DS" fields: <%cff_var.myparam%>.
To use a cookie variable in the equations, you can first to define a javascript variable. The plugin implements the CP_CALCULATED_FIELDS_VAR shortcode (to be inserted in the page/post content) to define these variables. For additional details: CLICK HERE
For example, if you want to define a javascript variable with the value of the "mycookie" cookie
[CP_CALCULATED_FIELDS_VAR name="mycookie" from="cookie"]
Now, you simply should use the new variable directly in the equations, for example: fieldname1*cff_var['mycookie'], or into the queries associated to the "DS" fields: <%cff_var.mycookie%>.
To use a session variable in the equations, it is required to define first a javascript variable with its value. The plugin implements the CP_CALCULATED_FIELDS_VAR shortcode (to be inserted in the page/post content) to define these variables. For additional details: CLICK HERE
For example, if you want to define a javascript variable with the value of the session variable: "myvar"
[CP_CALCULATED_FIELDS_VAR name="myvar" from="session"]
Now, you simply should use the new variable directly in the equations, for example: fieldname1*cff_var['myvar'], or into the queries associated to the "DS" fields: <%cff_var.myvar%>.
Read the "Sending notification emails with the Calculated Fields Form plugin" post in the plugin's blog. It describes how the form should be configured, and the solutions to possible issues.
There are special tags that can be used in the notification emails to display the forms information, like the <%INFO%> tag to include the summary of the information submitted by the form, or the tags of fields to insert them by separated. There are many alternatives to take a complete control over the information that is sent in the notification emails. The list of possible tags is available in the documentation page of the plugin.
There are some special tags to define dependencies in the notification emails and thank you pages: <%fieldname#_block%><%fieldname#_endblock%>
For example, to insert the fields: fieldname2 and fieldname3 in the email, only if the fieldname1 field was submitted, should be inserted the following tags in the email:
<%fieldname1_block%> <%fieldname2%> <%fieldname3%> <%fieldname1_endblock%>
Additional details in the documentation page of the plugin.
Use the tag <%itemnumber%> into the email content. That tag will be replaced by the PayPal item number.
You simply should to insert the tag of the "Upload File" field with the structure: <%fieldname#_url%> for example, <%fieldname1_url%>
If the "Upload File" field was configured for uploading multiple files: <%fieldname1_urls%>
Additional details in the documentation page of the plugin.
If you want send an image in the notification emails, like a header, you should insert an IMG tag in the "Message" attribute of form settings, with an absolute URL in the SRC attribute of IMG tag:
<IMG src="http://..." >
Remember to select the "HTML" option for the email format attribute in the form's settings.
If you are using the HTML format in the notification emails, you should insert the BR tags for the lines changes in the emails content:
<BR />
The thank you page is those page where the user is redirected after submit the form, and whose url is entered into the attribute: "Thank you page (after sending the message)", in the form's settings.
To publish a summary of the submitted information in the thank you page, you only should insert in its content the shortcode for results:
[CP_CALCULATED_FIELDS_RESULT]
The result shortcode allows controlling completely the format of the summary. More information in the followin links:
Displaying Form Summary in the Thanks Page
Special tags in the notification emails and the thank you pages
Yes that's possible. Visits the following link to the documentation page with the instructions.
Read moreYes that's possible. Visits the following link to the documentation page with the instructions.
Read moreThe forms created with "Calculated Fields Form" plugin, include two security features against the spam bots.
The use of Captcha in the forms. If the entered text does not match with captcha the submitted data is ignored. To activate the captcha, go to the settings of form, and selects the "Yes" option for the attribute: "Use Captcha Verification?" (Read more)
But, what to do if you don't want to use Captcha? How to protect the form?. The spam bots are really dumb, they fill all fields in the form by default, and to prevent the attacks of the spam bots, our plugin implements a "honeypot". The "honeypot" is a field hidden in the form, used for fishing the spam bots, if the field is received in the server side with a value, the submission is discarded. To activate the "honeypot", go to the settings page of the plugin, through the menu option: "Settings/Calculated Fields Form", enter the name of the field that will be used as honeypot, in the input field: "Protect the forms against the spam bots", and then, press the "Update" button (Read more)
However, if the previous methods are not enough, exist other alternatives:
* The "Verification Code" add-on, which comes with the Developer and Platinum versions of the "Calculated Fields Form" plugin, sends a verification code to the user's email address. The user must enter this code in the form before submitting it.
* The "Email Validator for Calculated Fields Form" complementary plugin validates email addresses entered by users using external services or rules entered through form settings.
* You can use third-party plugins and services, such as "Spam protection, Anti-Spam, Firewall by CleanTalk" in conjunction with the "Calculated Fields Form" plugin to protect your forms.
The plugin stores the submitted information into its table of website's database (the information can be accessed through the "Messages" button associated to the forms in the settings page of plugin), however, the Developer and Platinum versions of the plugin include the "/wp-content/plugins/calculated-fields-form/cp_calculatedfieldsf_insert_in_database.php" file, that allows you to store the information into other tables or databases. More information in the documentation page of the plugin: CLICK HERE
The "Calculated Fields Form" plugin, loads dynamically all javascript files included in the directories: "/wp-content/plugins/calculated-fields-form/js/fields-admin/", and "/wp-content/plugins/calculated-fields-form/js/fields-public/", for the form builder, and the public forms respectively (the files are loaded ordered by its names). So, if you want implement your own operations to be used from the equations, you simply should upload your javascript file to the "/wp-content/plugins/calculated-fields-form/js/fields-public/" directory.
Note: after upload your own files, go to the settings page of the plugin and untickt the "Activate javascript cache" checkbox to allow your code take effect.
The alternative would be insert a "HTML Content" field in the form, with a pair of <script></script> tags as its content with your code. This alternative does not requires to deactivate the javascript cache.
The dependencies can be defined in the fields: DropDown, Checkbox, Radio Button, and Calculated Fields. If you want that a field depends on the values of multiple fields would be required to use a calculated field as auxiliary.
I'll try to describe the process with an example. Asumming there are three fields: fieldname1, fieldname2, and fieldname3. and you want to display the fieldname3 only if the value of fieldname1 is 10, and the value of fieldname2 is 100.
First, insert a calculated field in the form to be used as auxiliary (you can hide it ticking the checkbox: "Hide the field from the public form" in its settings) with the equation: IF(AND(fieldname1 == 10, fieldname2 == 100), 1, 0 )
and then in the dependencies section of the calculated field, select the rule: "If value is equal to", enter the number 1 in the input box, and select the "fieldname3" as the field to be displayed.
It is possible define the min date, max date, or select a date dynamically in a date field, depending on the date selected in another date field.
CLICK HERE to go the instructions with examples in the documentation page.
To assign a value to a third field from the equation associated to the calculated field, you simply should to use the getField operation (Managing Fields module), that returns a field object, and then, call its "setVal" method.
For example, if you want to assign the number 10 to the fieldname123 from the equation associated to the calculated field, you should use the following piece of code as part of the equation:
getField(123).setVal(10)
There are different possible solutions. I will try to describe one of them with an example. I will assume the URL parameters are 'productid' and 'productname', and you want populate the fields: fieldname1 and fieldname2 in the form with these values.
Inserts two variable shortcodes to define the javascript variables with this parameters:
[CP_CALCULATED_FIELDS_VAR name="productid"]
[CP_CALCULATED_FIELDS_VAR name="productname"]
Inserts a script block in the page with the following piece of code
<SCRIPT>
cpcff_default = { 1 : {} };
cpcff_default[1][ 'fieldname1' ] = cff_var.productid;
cpcff_default[1][ 'fieldname2' ] = cff_var.productname;
</SCRIPT>
Finally, insert the form's shortcode.
Another alternative would be to use a calculated field as an auxiliary and call the getURLParameter operation in the "URL Operations" module. It does not require using shortcodes for variables or the script block:
(function(){
getField(fieldname1|n).setVal(getURLParameter('productid', ''));
getField(fieldname2|n).setVal(getURLParameter('productname', ''));
})()
To display a different image based on the radio button choice selected, there are some alternatives:
You can insert multiple "Media" controls in the form to load the different images and configure them as dependent on the radio button choices.
Learn more about dependencies by reading the following blog post:
https://cff.dwbooster.com/blog/2020/03/01/dependencies
The second alternative requires using a calculated field as an auxiliary.
Assuming the radio buttons field is the fieldname1, and its choices' values are 1, 2, and 3, respectively. If the user selects the choice with value 1, you want to load the image dog.jpg. If the user selects the choice with value 2, you want to load the image cat.jpg. And finally, the image bird.jpg for the choice with value 3.
In this hypothetical case:
<div class="image-container"></div>
(function(){
var image = '';
if(fieldname1 == 1) image = '<img src="https://www.yourwebsite.com/images/dog.jpg">';
else if(fieldname1 == 2) image = '<img src="https://www.yourwebsite.com/images/cat.jpg">';
else if(fieldname1 == 3) image = '<img src="https://www.yourwebsite.com/images/bird.jpg">';
jQuery('.image-container').html(image);
})()
In my explanation I'll assume that the fieldname1 field is a textarea. The equation in this case would be:
(function(){
var text = fieldname1;
text = text.replace( /[^\w]/g, ' ' ).replace( /^\s+/, '' ).replace( /\s+$/, '').replace(/\s+/g, ' ');
return (text.length) ? text.split(' ').length : 0;
})()
In my explanation I'll assume that the fieldname1 field is a textarea. The equation in this case would be:
(function(){
var text = fieldname1;
text = text.replace( /[\s\t\r\n]/g, '' );
return text.length;
})()
The form settings include the attribute "Base amount" to define the minimum price allowed. So, if an user manipulates the calculated field for paying less, will be applied the number entered in the "Base amount" attribute.
Tip: The maximum number of months allowed by PayPal for recurring payments is 12 months.
If you decide give to the user the possibility to select the frequency of payments, you should take into consideration this field in the equation that calculates the amount to charge monthly.
CLICK HERE to go the documentation page with the instructions for printing the form.
The most professional solution is distributed as a free block in the "CP Blocks" plugin.
On mobiles devices the tooltips associated to the fields are visible 3 seconds by default, and then, they are autoclosed.
To increase this time intervale you simply should include a new attribute in the form's shortcode with the time in milliseconds. For example, to display the tooltips for ten seconds, the shortcode would be similar to:
[CP_CALCULATED_FIELDS id="1" tooltip_duration="10000"]
In cases where the form's shortcode is not entered explicitly (for example when the form is included with WooCommerce products), it is possible to insert a "HTML Content" field directly in the form, and define a javascript variable called tooltip_duration with global scope, with the time interval in milliseconds, similar to:
<script>tooltip_duration=10000;</script>
If this happens follow these steps to correctly import the file:
This way the special characters should show correctly.
First, you should activate the WooCommerce Addon in the settings page of the plugin: "Settings/Calculated Fields Form".
Go to the settings page of the plugin, tick the choice "CFF - WooCommerce", and press the "Activate/Deactivate Addons" button.
Second, create the form as usual, but if you want calculate the price of products through the form, you should select the calculated field through the attribute: "Request cost", in the form settings.
Third, After create the form, is time to edit the product in WooCommerce. The addon has included a new section in the product's settings (the section: "Calculated Fields Form"), that allows:
1. Associate the form with the product, enter the form ID through the "Enter the ID of the form" attribute. The form's id is the number in front to the form, in the list of forms on the settings page of the plugin.
2. If you want calculate the final price of product through the form, check the option: "Calculate the product price through the form".
3. Define a minimum price for products, to avoid selling the products to a lower price than allowed.
Finally, be sure the product in WooCommerce has defined a "Regular price", because in other case, WooCommerce won't display the "Add to cart" button in the public page
Read MoreThe Metabox in the products page includes a section to define the summary to display in the shopping cart.
You simply should: active the summary, enter a title for the summary, and defines the summary, it is possible to use all special tags supported in the notification emails, and the thank you page.
The Platinum version of the plugin is distributed with the "CFF - DropBox" add-on. You only should activate it from the settings page of the plugin, and enter the "DropBox access token" from the settings page of the plugin. More information in the documentation page of the plugin: DropBox Integration add-on
There are different alternatives:
Using the "WebHook add-on" distributed with the Developer and Platinum versions of the plugin. The WebHook add-on allows you integrate the form with a connector service like Zapier, that would work as intermediary between the forms and hundred of services, where WebMerge is one of them. Additional information about the integration with Zapier visiting the "WebHook Add On" post in the plugin's blog.
Using the "WebMerge add-on" distributed with the Platinum version of the plugin. This add-on integrates directly the form with the WebMerge service. There is a step by step tutorial in the "Generating PDF files at runtime with the information collected by the form" post of the plugin's blog.
Using the "PrintFriendly add-on" distributed with the Platinum version of the plugin. The PrintFriendly add-on allows the integration of forms with the PrintFriendly API to generate the PDF files. More information in the documentation page of the plugin.
Zapier is a service that allows to connect two apps. You should use webhook as the trigger app, and activate the addon in the developer version of the plugin for sharing the submitted information with another apps, like: DropBox, Google Drive, etc.
Is possible connecting a file field with multiple selection, with another apps like DropBox? The answer is yes.
For each file field, the plugin shares the variable fieldname#_urls, through the webhook. The new variable include URLs of files, uploaded from the fieldname# field, separated by the comma symbol. If the new variable is selected through Zapier, Zapier is able to share the files with the action app.
In the "throubleshoot area" (located below the list of forms in the settings area) change the "Script load method" from "Classic" to "Direct".
Use the "throubleshoot area" to change the character encoding.
If you want to do that manually then please change the encoding of the database table "wp_cp_calculated_fields_form_settings" to utf-8. You can do that from the PHPMyAdmin or the tool that you are using to access the database. After changing the encoding, edit again the calculator form to re-enter the characters that aren't being correctly displayed.
The free version must be deleted before installing the pro version.
If you are upgrading the pro version to a new version you should also remove the previously installed version.
This is a safe step, the plugin's data and settings won't be lost during the process.
Another alternative is to overwrite the plugin files through a FTP connection. This is also a safe step.
If you are copying the information used to configure the form from third-party applications (like MS Word or Excel), this information can include non-valid characters. The plugin validates the form's structure to avoid this type of errors.
If the users are not receiving the notification emails with submission data, the possible reasons are:
Please note that the support doesn't include the free development of custom formulas or fixing the math/logic of custom formulas.
What is already included in the support service?:
What is NOT included in the support service?:
You can request a custom coding service from the "Custom Coding Service" page.
If you are requesting a quote for help with a custom formula or the complete development of a custom formula then be sure to include the information needed to develop it.
The base rate for custom developments is 25€ per hour. The total cost will depend of the time required for the development (minimum fee is 25€ / 1 hour).
Yes, both plugins are compatible, but you should configure the plugins, following the steps below:
Another solution:
Yes, both plugins are compatible, but you should to configure the "Plugin Organizer" to allow running the "Calculated Fields Form" plugin:
Enabling the plugin as global
In case you want to restrict the plugin only to the posts or pages, would be needed create a filter to allow running the script that generates the resources of the "Calculated Fields Form"
But, what to do with the CFF updates? With each update varies the version number. So, my recommendation in this case is modify the .htaccess file of website to redirect all URLs with the structure: http://www.yourdomain.com/?cp_cff_resources=public&ver=.+ to http://www.yourdomain.com/?cp_cff_resources=public, and create the "Plugin Filters" for the permalink (http://www.yourdomain.com/?cp_cff_resources=public)
Yes, both plugins are compatible, but you should configure the plugins if the option "Load JavaScript defered" in WP Rocket is enabled.
The option "Load JavaScript defered" breaks some scripts in the plugin, so in that case the options are to disable the option "Load JavaScript defered" or to exclude the page that contains the plugin form from the WP Rocket Cache.
For info about excluding pages from the WP Rocket cache you can check the following page:
https://docs.wp-rocket.me/article/54-exclude-pages-from-the-cache