Contact Form 7 Issues Tricks and Solution

How to add auto calculation fields or calculator in Contact Form 7 using Jquery

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 fiverr profile.

Here is the technique

1. At first put your calculator fields where you want to do or show calculation

calculator field in contact form 7

2. Use Jquery code something like this

Calculation and value show in contact form 7 field

I have shared you the Jquery auto calculation code for contact form 7 below


 var ce;
var ps;
var ar;

jQuery("#ce").on("change", function() {
 ce= this.value ;




3. Result

Contact Form auto calculation

If you have any issue feel free to ask me question here in comments section


You can take my personal help in skype : om2000_cuet

57 thoughts on “How to add auto calculation fields or calculator in Contact Form 7 using Jquery”

      1. 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.


  1. 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,



      1. 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…


  2. 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.


  3. 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?


      1. 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


  4. 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.
    [select* country “Germany” “Austria” “Switzerland” “USA” “Great Britain” “Poland”]


  5. 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?


  6. 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.


  7. 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

    Liked by 1 person

      1. 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

        var ar;
        var benefit;
        var finalincome;

        jQuery(“#benefit”).on(“change”, function() {
        benefit= this.value ;





  8. 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: 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

    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;


  9. 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?


      1. 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”]


  10. 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 ?


      1. 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



  11. Could I get value from select field like this?

    var checkboxes = $(‘input[name=”price[]”]’);
    checkboxes.filter(“:checked”).map(function () {
    return this.value;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s