Blocks
all Blocks
Ad Blocker Alert
"Ad Blocker Alert" displays a pop-up window if there is an Ad Blocker active in the browser, and limit the access to the page's content.
Message to display:
Address Field
"Address Field" inserts an autocomplete address field integrated to Google Places.
| Field type | Required field |
| Name | |
| Id attribute | |
| Class attribute | |
| Google api key | If you have no an api key, visit the Google Console, and generate one to your website's domain. |
| Restrict the address to the countries |
It is possible select a maximum of 5 countries. |
Animated Border Button
"Animated Border Button" inserts a button (common, reset, or submit button), with an animated border on hover.
Name:
Text:
Onclick Event:
Button Type: , ,
Animated Border Button 2
"Animated Border Button 2" inserts a button (common, reset, or submit button), with an animated border on hover.
Name:
Text:
Onclick Event:
Button Type: , ,
Animated Border Button 3
"Animated Border Button 3" inserts a button (common, reset, or submit button), with an animated border on hover.
Name:
Text:
Onclick Event:
Button Type: , ,
Autorefresh page
This will insert a block to autorefresh the page every a specified number of seconds. This is useful for page publishing content to cover real time events and in some cases to increase the view of ads into a page.
Reload every the following number of seconds:
Bar Chart
"Bar Chart" inserts a javascript block with the setBarChartBlock routine to generate bar chart into a canvas tag with the values passed as parameters:
setBarChartBlock(canvasId, values);
- canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
- values: array of values to display in the chart. For example: [10,5,100].
To display a label associated to the values, the elements in the array must be objects with the structure: {label: <text here>, value: <number here>}
For example: [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}]
To specify the colors of bars, define the colors code as part of the object (if no colors are defined, the plugin will use the default colors).
For example: [{label: 'First item', value: 10, color: '#FF0000'},{label: 'Second item', value: 5, color: '#00FF00'},{label: 'Third item', value: 100, color: '#0000FF'}]
Example:
setBarChartBlock('canvasId', [{label: 'First item', value: 10, color: '#FF0000'},{label: 'Second item', value: 5, color: '#00FF00'},{label: 'Third item', value: 100, color: '#0000FF'}]);
Beveled Dark Button
"Beveled Dark Button" inserts a button (common, reset, or submit button), with a beveled effect.
Name:
Text:
Onclick Event:
Button Type: , ,
Border Effect Button
"Border Effect Button" inserts a button (common, reset, or submit button), with an animated border on hover.
Name:
Text:
Onclick Event:
Button Type: , ,
Bubble Chart
"Bubble Chart" inserts a javascript block with the setBubbleChartBlock routine to generate a bubble chart into a canvas tag with the values passed as parameters:
setBubbleChartBlock(canvasId, values);
- canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
- values: array of values to display in the chart. For example: [10,5,100].
To display a label associated to the values, the elements in the array must be objects with the structure: {label: <text here>, value: <number here>}
For example: [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}]
To specify the color of points, pass an object as the third parameter of the "setBubbleChartBlock" function, with the color attribute (if no color is defined, the plugin will use a color by default).
For example:
setBubbleChartBlock('canvasId', [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}],{color: '#FF0000'});
Button With Fold Effect
"Button With Fold Effect" inserts a button (common, reset, or submit button), with a fold effect on hover.
Name:
Text:
Onclick Event:
Button Type: , ,
Button With Scaled Icon
"Button With Scaled Icon" inserts a button (common, reset, or submit button), with an icon selected from the list.
Name:
Text:
Icon:
Onclick Event:
Button Type: , ,
Corner Tab Button
"Corner Tab Button" inserts a button (common, reset, or submit button), with a corner tab.
Name:
Text:
Onclick Event:
Button Type: , ,
Corner Tab Button 2
"Corner Tab Button 2" inserts a button (common, reset, or submit button), with a corner tab.
Name:
Text:
Onclick Event:
Button Type: , ,
Corner Tab Button 3
"Corner Tab Button 3" inserts a button (common, reset, or submit button), with a corner tab.
Name:
Text:
Onclick Event:
Button Type: , ,
Curtain Effect Button
"Curtain Effect Button" inserts a button (common, reset, or submit button), with a curtain effect.
Name:
Text:
Onclick Event:
Button Type: , ,
Dark Button With Icon
"Dark Button With Icon" inserts a dark button (common, reset, or submit button), with a plus icon.
Name:
Text:
Onclick Event:
Button Type: , ,
Dark Button With Icon 2
"Dark Button With Icon 2" inserts a dark button (common, reset, or submit button), with a plus icon.
Name:
Text:
Onclick Event:
Button Type: , ,
Dark Themed Testimonial with Tile Quote and Profile Image.
"Dark Themed Testimonial with Tile Quote and Profile Image." inserts a testimonial block with image, title and text.
Image URL:
Better results with square images.
Alternate Text:
Title:
Subtitle:
Text:
Detect HTTP or HTTPS then force HTTPS
This will insert a code block to detect HTTP or HTTPS and then force usage of HTTPS to be sure that the page is loaded over a SSL secure connection. Note that your website domain must have SSL available in order to use this feature.
Disable Right-click on the Page
This will insert a script block on the page to disable the mouse right-click menu. This helps to partially prevent users copying content from the page. Note however that doing this isn't user friendly.
Disable Text Selection Hightlighting
This will insert a style block on the page to disable the text selection hightlighting. This way helps to prevent the users copying text/content from the page. Note however that doing this isn't user friendly.
Display current date
This will insert a script to display the current date on the page.
Exchange Rates with Fixer.io Service
The block includes the xe_fixerio_exchange_rates operation whose parameter is a plain object with the following properties:
- from: a three letters currency code. For example: USD (required)
- to: a three letters currency code. For example: GBP (required)
- field: a valid jQuery selector of an input tag for assigning the exchange rate. For example, if you are using the calculated fields form plugin, and you want to assign the exchange rate to the fieldname1 field, the selector would be: [id*="fieldname1_"] (optional)
- callback: a function that will receive as parameter an object with all currencies codes and the corresponding exchange rates. For example: function(rates){alert(rates['EUR']);} (optional)
- url: the URL to the public website. In cases where the URL to the public website and the WordPress are different, might be require pass to the block the URL to the public website (optional)
Example:
xe_fixerio_exchange_rates({'from': 'USD', 'to': 'EUR', 'field': '[id*="fieldname'+'1_"]'});
A specific example: Assuming there is a field in the form that calculate a service price in United State Dollars (USD), the fieldname1, and you want get the price in Euros (EUR), furthermore there is a hidde field for the exchange rate, the fieldname2. The equation to associate with the calculated field to calculate the price in Euros would be:
(function(){
xe_fixerio_exchange_rates({'from': 'USD', 'to': 'EUR', 'field': '[id*="fieldname'+'2_"]'});
return fieldname1*fieldname2;
})()
If there is a dropdown field for selecting the currency code, the fieldname3, the equation would be:
(function(){
xe_fixerio_exchange_rates({'from': 'USD', 'to': fieldname3, 'field': '[id*="fieldname'+'2_"]'});
return fieldname1*fieldname2;
})()
Exchange Rates with Free Currency Converter API
The block reads the exchange rates from the Currency Converter API website
Exchange Rates with the Open Exchange Rates Service
The block includes the xe_open_exchange_rates operation whose parameter is a plain object with the following properties:
- from: a three letters currency code. For example: USD (required)
- to: a three letters currency code. For example: GBP (required)
- field: a valid jQuery selector of an input tag for assigning the exchange rate. For example, if you are using the calculated fields form plugin, and you want to assign the exchange rate to the fieldname1 field, the selector would be: [id*="fieldname1_"] (optional)
- callback: a function that will receive as parameter an object with all currencies codes and the corresponding exchange rates. For example: function(rates){alert(rates['EUR']);} (optional)
- url: the URL to the public website. In cases where the URL to the public website and the WordPress are different, might be require pass to the block the URL to the public website (optional)
Example:
xe_open_exchange_rates({'from': 'USD', 'to': 'EUR', 'field': '[id*="fieldname'+'1_"]'});
A specific example: Assuming there is a field in the form that calculate a service price in United State Dollars (USD), the fieldname1, and you want get the price in Euros (EUR), furthermore there is a hidde field for the exchange rate, the fieldname2. The equation to associate with the calculated field to calculate the price in Euros would be:
(function(){
xe_open_exchange_rates({'from': 'USD', 'to': 'EUR', 'field': '[id*="fieldname'+'2_"]'});
return fieldname1*fieldname2;
})()
If there is a dropdown field for selecting the currency code, the fieldname3, the equation would be:
(function(){
xe_open_exchange_rates({'from': 'USD', 'to': fieldname3, 'field': '[id*="fieldname'+'2_"]'});
return fieldname1*fieldname2;
})()
Grow Effect
"Grow Effect" inserts a style block with the special class name: grow-effect to apply a grow effect to the form's elements (input tags, buttons, etc.) in mouse-over, focus, and active states.
Assigning the class name to the form's elements:
[submit class:grow-effect "Button"]
Image With Overlaying Testimonial
"Image With Overlaying Testimonial" inserts a testimonial block with image and text.
Image URL:
Better results with square images.
Alternate Text:
Title:
Subtitle:
Text:
Javascript Unserializer for serialized PHP Objects
The "Javascript Unserializer" inserts a javascript block with the unserialize routine:
unserialize(phptext);
- phptext: Serialized PHP Object.
Examples:
unserialize('O:8:"stdClass":2:{s:5:"attr1";s:15:"First Attribute";s:5:"attr2";s:16:"Second Attribute";}');
Output would be a javascript object with the structure:
{attr1:"First Attribute", attr2:"Second Attribute"}
Line Chart
"Line Chart" inserts a javascript block with the setLineChartBlock routine to generate line chart into a canvas tag with the values passed as parameters:
setLineChartBlock(canvasId, data, config);
- canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
- data: array of datasets with the information to display in the chart. For example:
[
{
'dataset': 'First Dataset',
'color' : 'red',
'values' : {
'label a': 10,
'label b': 15,
'label c': 30
}
},
{
'dataset': 'Second Dataset',
'color' : 'blue',
'values' : {
'label a': 40,
'label b': 20,
'label c': 5
}
}
] - config: object tha allows to define the chart title. For example:
{'title': 'Line Chart'}
Example:
setLineChartBlock('canvasId', [{'dataset': 'First Dataset','color': 'red','values': {'label a': 10,'label b': 15,'label c': 30}},{'dataset': 'Second Dataset','color': 'blue','values': {'label a': 40,'label b': 20,'label c': 5}}],{'title': 'Line Chart'});
Lorem Ipsum Generator
"Lorem Ipsum Generator" inserts a DIV tag with a random text. The text length is defined through the "Enter the number of words" field, 24 words by default.
Enter the number of words:
Insert as many "Lorem ipsum" blocks of texts as you want.
Example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper sem purus, a convallis elit placerat a. Mauris maximus tristique sapien at pulvinar. In eu arcu ac tortor vehicula malesuada. Proin non pharetra libero. Sed vitae nisl volutpat, imperdiet augue vitae, elementum dolor.
PayPal Donation Button
| Paypal email or ID | |
|---|---|
| Price amount | |
| Currency | |
| Taxes (percent) | |
| Request address at PayPal | |
| URL to return after payment | |
| URL to return after cancelled payment | |
| Donation description | |
| Paypal language |
PayPal Payment Button
| Paypal email or ID | |
|---|---|
| Price amount | |
| Currency | |
| Taxes (percent) | |
| Request address at PayPal | |
| URL to return after payment | |
| URL to return after cancelled payment | |
| Product description | |
| Paypal language |
PayPal Subscription Button
| Paypal email or ID | |
|---|---|
| Price amount | |
| Currency | |
| Payment frequency | |
| Taxes (percent) | |
| Request address at PayPal | |
| URL to return after payment | |
| URL to return after cancelled payment | |
| Subscription description | |
| Paypal language |
Pie Chart
"Pie Chart" inserts a javascript block with the setPieChartBlock routine to generate pie chart into a canvas tag with the values passed as parameters:
setPieChartBlock(canvasId, values);
- canvasId: the routine requires you insert a <canvas id="canvasId"></canvas> tag in your webpage where display the chart. The id of the canvas tag should be passed as the first parameter of the routine.
- values: array of values to display in the chart. For example: [10,5,100].
To display a label associated to the values, the elements in the array must be objects with the structure: {label: <text here>, value: <number here>}
For example: [{label: 'First item', value: 10},{label: 'Second item', value: 5},{label: 'Third item', value: 100}]
To specify the colors of bars, define the colors code as part of the object (if no colors are defined, the plugin will use the default colors).
For example: [{label: 'First item', value: 10, color: '#FF0000'},{label: 'Second item', value: 5, color: '#00FF00'},{label: 'Third item', value: 100, color: '#0000FF'}]
Example:
setPieChartBlock('canvasId', [{label: 'First item', value: 10, color: '#FF0000'},{label: 'Second item', value: 5, color: '#00FF00'},{label: 'Third item', value: 100, color: '#0000FF'}]);
Prevent framing
This will insert a block to find out if the page is embedded as a frame to other site and will prevent that by redirecting to the correct page without framing.
Message if framing detected:
Print Form
"Print Form" inserts a javascript block with the printForm routine for printing the form only without other page's area:
printForm(selector);
- selector: Accepts any valid jQuery selector. You should as specific as possible defining the form's selector
Example:
printForm("#cp_calculatedfieldsf_pform_1");
Read CSV File
"Read CSV File" inserts a javascript block with the readcsv routine for reading an online CSV file and generate a javascript array to be used in the form:
readcsv(args);
-
args:
javascript object with the following properties:
- url: url to the online CSV file.
- headline: boolean (true or false), indicates if the first row in the CSV file is a headline row or not (false by default)
- delimiter: symbol to delimit the row's columns (the comma symbol "," by default)
- quotation: symbol for closing the textual columns (the double-quote symbol (") by default)
- filter: plain object for filtering the CSV rows. For example, assuming that the file includes the columns names: column_a, column_b, and column_c, and you want get the rows whose column_a has the value 3, and column_b the value "qwerty", the filter object would be: {'column_a':3,'column_b':'qwerty'}
- callback: javascript function that would be called after read the CSV file. The callback receives as parameter an javascrip array with the CSV rows.
Every row would be a columns array, or an object (if the headline property was passed as true).
Callbacks distributed with the block:
populate_dropdown(selector, args): Populates a dropdown field with the CSV data. First parameter (selector), a valid jQuery selector to identify the dropdown field. Second parameter (args), plain object with two properties, "value": the column's name to use as values of the field's options, "text": the column's name to use for the texts of the field's options.
Example:
readcsv({'url':'http://www.websitedomain.com/file.csv', 'callback':populate_dropdown('[name="field_name"]', {'value':'column_a', 'text':'column_b'})});
populate_input(selector, args): Populates an input (or textarea) field with the CSV data. First parameter (selector), a valid jQuery selector to identify the dropdown field. Second parameter (args), is a plain object with the property, "value": the column's name for the field's value.
Example:
readcsv({'url':'http://www.websitedomain.com/file.csv', 'callback':populate_input('[name="field_name"]', {'value':'column_a'})});
Implementing your own callbacks:
readcsv({'url':'http://www.websitedomain.com/file.csv', 'filter':{'column_a':3,'column_b':'qwerty'}, 'callback':function(csv_data){/* Your code Here*/}});
Rounded Button
"Rounded Button" inserts a button (common, reset, or submit button), with a rounded design.
Name:
Text:
Onclick Event:
Button Type: , ,
Button Color:
Button Size:
Skrill Payment Button
| Skrill email or ID | |
|---|---|
| Price amount | |
| Currency | |
| URL to return after payment | |
| URL to return after cancelled payment | |
| Product name | |
| Language |
Slide Down Fill Button
"Slide Down Fill Button" inserts a button (common, reset, or submit button), with a down fill effect.
Name:
Text:
Onclick Event:
Button Type: , ,
Slide Left Fill Button
"Slide Left Fill Button" inserts a button (common, reset, or submit button), with a left fill effect.
Name:
Text:
Onclick Event:
Button Type: , ,
Slide Up Fill Button
"Slide Up Fill Button" inserts a button (common, reset, or submit button), with an up fill effect.
Name:
Text:
Onclick Event:
Button Type: , ,
Stripe Payment Button
Testimonial Card with Icon, Quote and Title
"Testimonial Card with Icon, Quote and Title" inserts a testimonial block with an icon, quote and title.
Title:
Subtitle:
Text:
Testimonial Card with Image, Title and Quote
"Testimonial Card with Image, Title and Quote" inserts a testimonial block with image, title and text.
Image URL:
Better results with square images.
Alternate Text:
Title:
Subtitle:
Text:
Testimonial with Profile Image
"Testimonial Card with Image, Title and Quote" inserts a testimonial block with image, title and text.
Foreground Image URL:
Better results with square images.
Alternate Text:
Background Image URL:
Title:
Text:
Testimonial with Quote and Profile Image
"Testimonial with Quote and Profile Image" inserts a testimonial block with image, title and text.
Foreground Image URL:
Better results with square images.
Alternate Text:
Background Image URL:
Title:
Text:
Text Length
"Text Length" inserts a javascript block with the textLength routine:
textLength(text,boolean);
- text: The text to determine its length.
- boolean: true or false (1 or 0) for considering the blank characters \s, \t, \r, \n as part of the text or not. 0 by default.
Examples:
textLength("Lorem ipsum");
Output: 10
textLength("Lorem ipsum",1);
Output: 11
Tooltips
"Tooltips" allows associate a tooltip to the form's elements.
Message to display:
Words Counter
"Words Counter" inserts a javascript block with the wordsCounter routine:
wordsCounter(text);
- text: Text to check.
Example:
wordsCounter("Lorem ipsum");
Output: 2