Login with Formloop account

Username (e-mail):
Password:

Click here to get an account for free.

Login with Google account

I agree to the FormLoop TOS    

Google Account or Gmail ?

Search for Calculators

On-line Stats

  • Created Formulas: 651
  • Created Widgets: 3502
APIs, Widgets & Apps
"Making the complex simple"

Add a Wordpress Calculator

We have had many questions on how to add our widgets to a wordpress site, therefore we have made this quick howto and also added the url to the copy-code section on the page create calculator widget.

Wordpress Calculator Widget HowTo

1. Follow the instructions at Add Wordpress Javascript
2. Copy the javascript which you get when you design your widget at Calculator Widget or if you want a simple calculator for your website use Calculator.

Example widget to test in your site

This is the code that you get when you have configured your widget.

There are four alternatives to adding a calculator to your site:
1. Add a Javascript, where you can change the size of the widget in the javascript.
2. Add a link, the calculator in the link, will be configured as above.
3. Add a direct link or button on your mobile page and use our widgets in mobile mode.
4. Integrate our calculator form seamless in your application with your own style sheet via our api.

Our calculator widgets are free, but when using our Calculators, add an extra link to formloop.com to support us and donate to help us improve this site, or if you need a clean widget without branding or with your brand look at our Licenses and order a license.

1. Add a Javascript

<div id="fw_11083177462784859"><a href="https://www.formloop.com/CalculatorWidget/formulawidget/473">FormLoop </a></div>
<script type="text/javascript" src="https://d15pwioa8qyjit.cloudfront.net/js/calc_quick.js"></script>
<script type="text/javascript">
var pass_id='11083177462784859';
var height='400';
var width='325';
var lang_code='';
var mobile='';
formloop_cw(pass_id,width,height,lang_code,mobile);
</script>

2. Add a link to your designed widget

<a href="https://www.formloop.com/Inlink_Form?action=link&config_id=11083177462784859"> FormLoop,</a>

3. Mobile Direct, Add a direct link or button on your Mobile page

<a href="https://www.formloop.com/Inlink_Form?action=link&config_id=11083177462784859&mobile=TRUE"> FormLoop, </a>
or
<button onclick='window.location.href="https://www.formloop.com/Inlink_Form?action=link&config_id=11083177462784859&mobile=TRUE"'> Your FormLoop widget </button>

4. Use our api to integrate our form in your webpage or mobilepage.


<table>
<tr> <td>Loan Amount (LA) </td> <td> <input type='text' name='fl_11083177462784859_LA'> US$</td> </tr>
<tr> <td>Interest Rate (rate) </td> <td> <input type='text' name='fl_11083177462784859_rate'> %</td> </tr>
<tr> <td>number of (no) </td> <td> <input type='text' name='fl_11083177462784859_no'> </td> </tr>
</table>

<div id="fl_final_result_r11083177462784859"> </div>
<div id="fl_button_calc_c11083177462784859"><input type="button" onClick="fl_calc_api('11083177462784859')" value=Calculate></div>
<div id="fl_super_s11083177462784859"><a href="https://www.formloop.com/CalculatorWidget/formulawidget/473">FormLoop </a></div>

<script type="text/javascript" src="https://www.formloop.com/calc_api_form.js"></script>
<script type="text/javascript">
document.getElementById('fl_super_s11083177462784859').innerHTML = '';
function fl_calc_api(pass_id) {
var e_first='';
var e_last='';
var result=submit_calculate(pass_id,e_first,e_last);
//alert(result.result_data[0].result);
//alert(result.result_data[0].solved_var_name);
//alert(result.result_data[0].solved_var_post);
//alert(result.result_data[0].solved_unit_print);
}
</script>

Information and recommendations

The free version of the API for converters and formula calculators gives you 6 calls per minute and 20 calls per day.

Orange text is the code parts of the text.

Use the variables in the javascript when you have a dynamic page and or responsive design or if you want to change an existing widget that you are using. Arguments that can be sent to modify your widgets are:

var langcode="en" Sets the language to English.
var height="100" Sets the height to 100 px on the widget.
var width="100" Sets the width to 100 px on the widget.
var mobile="TRUE" Sets the widget in mobile mode.

Usually what users of our code do is that for mobile pages the widget is exchanged with a button to the Mobile version of the widget instead.
When no arguments regarding height or width is used the calculator widget will have the size that you set when you configured the widget.
When using a dynamic layout, remember to make space for when the widget unfolds and shows the result.

For the argument lang_code you can use any ISO language codes, for a list of language codes look at: language codes.

If you need some help in adding your url in WordPress look at Help Wordpress.

Testing your code for the first time close the web browser and open it to delete the session parameters. In some browsers pressing ctrl-F5 might do the trick.

If you want to use our widgets in a mobile application use the "Mobile Direct" and when configuring the widget press "Modify content & layout" and in there enable the back button option to get a back button back to your page.

When using our API or javascript without a license do not remove the div with the link, cause it will get you banned. You have the option to get the result from your calculation in an array, uncomment "alert(result.result_data[0]....." to get the result from the API.

Please mail us suggestions for improvement or settings that you might want to change dynamically.

Finally some last words, a mail with instructions have been sent to the mail address that you supplied and if you are logged in you can always go back and copy your code again by choosing Created Widgets from the menu Create Widgets & Apps.

Tags: Wordpress calculator, wordpress, wordpress calculator widget