This tutorial is only for those who are trying to add calculator fields like where user will put value in one field and some calculation will be done automatically and result will be viewable in other single or multiple fields in contact form.
This technique I have shared is for advance level users who have knowledge of Jquery and using Contact form 7 . If you are new or facing problem to implement such type of fields, feel free to message me in comments section or take my personal help in my profile.
Here is the technique
1. At first put your calculator fields where you want to do or show calculation
2. Use Jquery code something like this
I have shared you the Jquery auto calculation code for contact form 7 below
<script> jQuery(document).ready(function(){ //alert("Welcome"); var ce; var ps; var ar; jQuery("#ce").on("change", function() { ce= this.value ; ps=(((ce/30))/5)*1.2; ar=(((ps*1000)/250)*(0.941*1.65)*1.6); jQuery("#ps").val(ps.toFixed()); jQuery("#ar").val(ar.toFixed()); }); }); </script>3. Result
If you have any issue feel free to ask me question here in comments section
OR
You can take my personal help in skype : om2000_cuet
hi
just a question, where do you write your jquery script? in which file ?
thank you
LikeLike
Hi
in which page you are working on?
let me know
Om
LikeLike
Hi,
Thank you for your reply.
I just start it, not yet on line.
I just need a simple form, the user enter a number in one field, and get a calculated result on the next field. It is not so simple with contact form 7.
I have an intermediate level in wordpress and web development, I don’t do this for money, just to help a community.
LikeLike
Hi
what you are asking seems simple and don’t need Contact Form 7
tell me details and share me your page where you want to show that..I will check and let you know
Om
LikeLike
When i am using this script its not storing on database .
LikeLike
HI Parameswari,
the script will go in header.php or you can use any plugins to put the jquery code..
Om
LikeLike
Dear Om,
thanks for this good tutorial. It helps a lot to understand how CF7 works together with JS.
But maybe you could also explain how to use checkboxes and radioboxes in that way. I think there would be two different possibilities:
1) Calculate with the amount of checkboxes that are checked
2) Calculate with the value of one or more checkboxes
Would be nice if you could give us a hint how to solve these two problems.
Thanks a lot,
Sascha
LikeLike
can u share me screenshot of the form ( checkbox, radiobox) and the value u are trying to calculate please?
OM
LikeLike
Did you recieve my answer? Because I´ve sent it but it doesn´t appear in the comments. And when I try to re-post it, it says that it is already written…
LikeLike
I´ll show you the CF7 code…
Wie breit soll die Anzeige werden?
[radio_custom breite id:breite “1|1-spaltig (42,5 mm)” “2|2-spaltig (90 mm)” “3|3-spaltig (137,5 mm)” “4|4-spaltig (185 mm)”]
Wie hoch (in mm) soll die Anzeige werden?
[number hoehe id:hoehe min:10 max:185]
Soll die Anzeige farbig oder schwarz-weiß erscheinen?
[radio_custom farbe id:farbe “0.46|schwarz-weiß” “0.65|farbig”]
Grundpreis der Anzeige (netto): [calculated grundpreis id:grundpreis “breite*hoehe*farbe”]
In welcher Kalenderwoche soll die Anzeige erscheinen?
[Checkbox_custom kalenderwoche id:kalenderwoche “1|01” “1|02” “1|03” “1|04” “1|05” “1|06” “1|07” “1|08” “1|09” “1|10” “1|11” “1|12” “1|13” “1|14” “1|15” “1|16” “1|17” “1|18” “1|19” “1|20” “1|21” “1|22” “1|23” “1|24” “1|25” “1|26” “1|27” “1|28” “1|29” “1|30” “1|31” “1|32” “1|33” “1|34” “1|35” “1|36” “1|37” “1|38” “1|39” “1|40” “1|41” “1|42” “1|43” “1|44” “1|45” “1|46” “1|47” “1|48” “1|49” “1|50” “1|51” “1|52”]
Now the next calculation should be “grundpreis” multiplied by the number of checked boxes from “kalenderwoche”.
And what would be really nice: A IF-Statement in the way…IF 5 boxes checked do this calculation ELSE do this calculation.
Hope that helps you understand my problem.
LikeLike
Ok
i am checking in my end and will inform you after checking
Om
LikeLiked by 1 person
Hi Sascha
i checked your code and it seems due to wordpress, the code you shared is not showing properly in contact form 7
can u share me the page url where you implemented the form please?
Om
LikeLike
Now it worked 😉
LikeLike
I have an “order form” that has products and quantities, but customer has asked ” Is there way to have a ‘total’ field indicated (perhaps at the bottom) that tallies up as the customer selects individual quantities, and then doesn’t allow for the ‘Order Now’ to be clicked on until this reaches 25?”
Can anyone help with this?
LikeLike
Hi
sorry i could not check the comments due to sudden illness
do you still need help?
please let me know
Om
LikeLike
hello how to get Data from multiple fields, can u please give an exmple.
LikeLike
thanks
sorry for the late reply
would u mind to clarify me the issue some more please?
Om
LikeLike
maybe it is stupid question.
you are geting data from field with id #ce
jQuery(“#ce”).on(“change”, function() {
ce= this.value ;
but how i can get data from CE and PE and then make calculation for AR
LikeLike
HI Alan
sorry seems i didn’t get your point
i think the question you asked…the answer is given in my code?
please let me know
Om
LikeLike
Hi is there a posibillity for dropdown-menu options?
I have this dropdown list and I want to add an id to each country-option, so Germany is ID=1, Austria is ID=2, and so on. So I can count with the number 1, when it is choosen Germany.
Country*
[select* country “Germany” “Austria” “Switzerland” “USA” “Great Britain” “Poland”]
LikeLike
Hi Johannes
would you mind to share me the page url where u implemented it please?
Om
LikeLike
Hi,
How does the example jquery script change when the variables ce and ps are unrelated? I want to fill in a number for ce, another number for ps, and then let ar be calculated as ar=((ce*20)+(ps*40));
Is that possible?
LikeLike
HI Jasper
yes possible
LikeLike
Hey, I have an auto calculation to create but even with your tutorial i don’t understand, here’s the problem :
I got a text field named : “House value”
And an other text field named : “Remaining capital”
And my condition is : “Remaining capital” doesn’t have to exceed 50% of “House value”
If it exceed 50%, I would like it load an error message which is “sorry remaining capital doesn’t have to exceed 50% of the house value”
I hope you can help me, thanks.
LikeLike
Hi Nicolas
share me the page where you are creating that
and
also
share me the fields u created in cf7
Om
LikeLike
Hi
What should I do if I want to add $to the result?
Is that possible?
LikeLike
you can add the symbol using jquery or using html
LikeLike
Hello again. Would you be interested in helping me out? I have a nice form I want to use on my wordpress website, but it does not send any email notifications. I tried php code scripts but cannot get it to work.
This is the form
http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml/comment-page-2#comments
LikeLike
Hi Sebastian
http://javascript-coder.com/files/calculation/cakeform.html
you want to use this form in your site?
and are u using wordpress?
LikeLike
Hello,
Can we use this code to calculate.
But not display the answer, just use the answers in the email sent ?
Thanks Jeff
LikeLiked by 1 person
yes..that you can do too
just u can hide the answer
🙂
Om
LikeLiked by 1 person
Yes I forgot we could just use std cf7 hidden !
Thank you
LikeLike
I have another question for you.
From the script we get and save the calculated ps and ar.
Can we call the var of those saved numbers and use them in another calculation below the first one ?
Thank you
LikeLiked by 1 person
yes that can also be done
LikeLiked by 1 person
Hi Om
I am trying to use the result of ar in your code and use it for some more sums, but i either get no result or NaN depending on what I try.
After your code I am running this code
jQuery(document).ready(function(){
var ar;
var benefit;
var finalincome;
jQuery(“#benefit”).on(“change”, function() {
benefit= this.value ;
finalincome=(benefit)+(ar);
jQuery(“#finalincome”).val(finalincome.toFixed());
});
});
LikeLike
Would you mind to do share me the following in a text or doc file?
1. the Contact form 7 code
2. this same jquery
Om
LikeLike
Hi Om
how do I upload the file ?
LikeLike
Upload it in your media library and give me the link
LikeLike
hi!!
how add quality button on number field (plus, minus) ??
LikeLike
Hi William
would you mind to clarify?
and share me the page url where u r working
Om
LikeLike
Hi there!
I am trying to use the value from the field with id=monthnum run a code that assigns a score to this number and returns that value to field with id=mvalue but it’s not working. Here is the website: https://theprosperityscore.com/. What am I doing wrong?
Here is the contact form 7 code:
Paycheck Amount: [number* paycheck min:0]
Frequency: [select* payfrequency “weekly” “bi-weekly” “monthly”]
[variable freqnum cf7-hide “payfrequency:” “weekly 52” “bi-weekly 26” “monthly 12” “default
0”]
Amount Saved: [number* saved min:0]
[calculate_button “Calculate”]
Annual Income: [calculation income min:0 precision:0 “paycheck*freqnum”]
Months Saved For: [calculation months min:0 precision:0 id:monthnum “saved/(paycheck*0.8)”]
m value: [text mvalue id:m]
Saving Score: [calculation savescore min:0 precision:0 id:saveif]
Prosperity Score: [calculation pscore min:0 precision:0 “savescore+10”]
Here is the javascript:
var m = document.getElementById(“monthnum”).value;
document.getElementById(“mvalue”) = m;
LikeLike
thanks
i just checked
it seems the form is working?
have u solved it?
LikeLike
Here’s the rest of the javascript:
if(m=0)
{
return 0;
}
else if(3>m && m>1)
{
return 5;
}
else
{
return 35;
}
}
LikeLike
I require a customer to enter their Date of Birth into a Contact Form 7 page.
In the email that I receive after they hit submit, I would like the system to automatically calculate the age in years and months. I would like to receive that answer in the email.
At the moment, I manually calculate the exact age each time I receive a new enquiry. It would be handy if it did it automatically to save me some time!
Could this be possible?
LikeLike
Hi Matt
seems possible
can u provide me the code of your contact form 7 please (the fields etc you used)?
Regards
Om
LikeLike
Cool!
I currently just use a text field for date of birth as it’s easy for customers to type and sometimes they have multiple children. But I expect I’d need to change it to a selection field if I implemented this feature.
[text* your-name placeholder “Your First & Last Name”]
[text* phone-number placeholder “Mobile Number”]
[email* your-email placeholder “Email”]
[text* child-name placeholder “Child’s First & Last Name”]
[text* child-DOB placeholder “Child’s Date of Birth”]
[text class-location placeholder autocomplete:off “Preferred Class Location”]
[textarea* your-message placeholder “Your Message”]
[select* referral first_as_label “How did you hear about us? (Select One)” “Facebook” “Google” “Friend” “Flyer” “Other”]
[submit “SUBMIT”]
LikeLike
Hi Matt
in which format users put Date of birth in the field?
dd/mm/yyyy ?
this way?
LikeLike
Or instead of 1 single field..if 3 fields ( dd, mm, yyyy) created
will that help?
LikeLike
Hi OM.
I have a birth date field on the CF7 form in the WP, is there any way to calculate a person’s age and display the calculated age on the form and receive it in the email after sending?
Would you help me ?
LikeLike
thanks
is that Text field you are using to take input?
let me know
Regards
Om
LikeLike
Hi, i use date field
Date of birth: [date nascimento-300]
Age: ???
i need to send age calc in email.
I found this example with jquery but I don’t know how to put it on the CF7
Regards
LikeLike
Hi Jorge
ok share me the Contact Form 7 Fields code u used
i will check
LikeLiked by 1 person
Hi Om
my page is…. i neede calc age
https://www.ibmemorial.com.br/ser_batizado/
Best Regards Sir
LikeLike
Hi Jorge
share me the code u used like showed at the screenshot please
Regards
Om
LikeLike
Hi, how could I get value from select field to calculator?
LikeLike
Could I get value from select field like this?
var checkboxes = $(‘input[name=”price[]”]’);
checkboxes.filter(“:checked”).map(function () {
return this.value;
}).get()
LikeLike
share me all the codes you used in the form
LikeLike
hi sir, I want to make a simple form for the book order, and just want to do a simple calculation but it will not be showing as expected. here is my form code.
Name *
[text* your-name]
Email *
[email* your-email]
Select Package *
[select* Dropdown “Standard Package” “Technical Package” “Fiction Package” “Book Description” “Cover Design”]
[group Standard]
Book Title *
[text* BookTitle]
Words Length *
[text text-668 id:en]
jQuery(document).ready(function(){
var en;
var res;
jQuery(“#en”).on(“change”, function() {
en= this.value ;
res=((1.3*en)/100);
jQuery(“#res”).val(res.toFixed());
});
});
Book Description *
[textarea* BookDescription]
Total Amount (€)
[text text-668 id:res]
[/group]
LikeLike
Hi Hamza
what you are trying to do actually?
let me know
Regards
Om
LikeLike
Sir, I want to make a form for book orders, on the WordPress website using the contact form 7, and for that, I need to calculate an amount when user select particular fields, for example, A person choose a [standard package (1.5$/100 words)] and his book was of 20000 words after he selects all of these, a total of all this will automatically be displayed in the total amount field. I implemented a formula [(1.5 *20000)/100] and want to show the final result in the total amount field automatically. but this will not work as I am new to WordPress and contact form 7. kindly guide me on how to implement jquery in WordPress without using expensive plugins, thank you so much, sir. If you want I can provide you the link to the form.
LikeLike
https://soulwriters.co.uk/packages/
here is a link to the form Sir
LikeLike
Hi Hamza
ok please, can u give me a backup copy of your site ( transfer your site using all in one migration )
and send me in prakash02cuet@gmail.com
Regards
Om
LikeLike
Email sent sir
LikeLike
Hi Hamza
please try this
jQuery(document).ready(function() {
jQuery(‘input#en’).bind(‘keyup’, function(event){
var en=jQuery(this).val();
var res=((1.3*en)/100);
jQuery(‘input#res’).val(res);
});
});
** please don’t put the jquery code inside the Contact form code, use the plugins “Custom Css and JS”
also remove the code u put in the contact form
Regards
Om
LikeLike
thank you, sir, thanks a lot.
LikeLike
Hi Om,
great post, I just wish I knew where to insert the java code?
a/ shall I upload a new self made plug-in folder?
b/ shall I edit the plug-in code for Contact Form 7?
c/ I use on my site PowerBuilder (a WP plug-in) which has a custom CSS section in it. can I enter yr code there?
appreciate yr help,
best regards;
–Adam
LikeLike
Hi Adam
use the plugins
https://wordpress.org/plugins/custom-css-js/
Regards
Om
LikeLike
thanks Om, works fine! was just wondering how I would be able to insert normal java functions into this JS editor. {my case is that many input boxes should be added up into one result box, but I want to filter out non numerical chr’s, deduct from the final result when one field was changed by user to empty … etc.} so a java function seems to be the best solution for this but defining a >>function name() {}<< doesnt seem to be working here.
LikeLike
Hi Adam
cant you use click event of jQuery?
clicking on Submit button trigger that function u r referring?
Regards
Om
LikeLike
Hi Om,
is it possible to pick all data with js code with plugin Calculated Fields Form? I had a problem with Contact Form 7 because of complex formula so it was easier for me with this plugin.
LikeLike
I replied you in mail Jelena
LikeLike
Dear Sir,
I did a replica of your code on my wordpress site but when I enter value in the field with id:ce it does not calculate ps and ar.
HEADER:
<script>
jQuery(document).ready(function(){
//alert(“Welcome”);
var ce;
var ps;
var ar;
jQuery(“#ce”).on(“change”, function() {
ce= this.value ;
ps=(((ce/30))/5)*1.2;
ar=(((ps*1000)/250)*(0.941*1.65)*1.6);
jQuery(“#ps”).val(ps.toFixed());
jQuery(“#ar”).val(ar.toFixed());
});
});
</script>
CONTACT FORM 7
Consumo energetico mensual:
[text text-912 id:ce]
Potencia solar a installar:
[text text-913 id:ps]
Area requesida:
[text text-914 id:ar]
[submit “Submit”]
Please guide.
Thank you.
LikeLike
Please share me the url where you are using the form please
Regards
Om
LikeLike