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


Pay me some, I will help you for CSS Issue Personally CLICK HERE….

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

  1. tekno31 says:

    just a question, where do you write your jquery script? in which file ?
    thank you


    • Hi
      in which page you are working on?
      let me know


      • tekno31 says:

        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.


      • 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


  2. parameswari says:

    When i am using this script its not storing on database .


  3. Sascha Valentin says:

    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,



  4. Sascha Valentin says:

    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.


  5. Sascha Valentin says:

    Now it worked 😉


  6. cleadesigns says:

    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?


  7. Alan Luk says:

    hello how to get Data from multiple fields, can u please give an exmple.


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

%d bloggers like this: