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

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


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: