calculation form

How to add calculated fields form – contact form 7

ontact form 7 can easily be transformed into some kind of calculators such as a booking calculator, weight calculator, tax calculator, etc. To make it work as a calculator, we need one more WordPress plugin, the PVB contact form 7 calculator.

To add necessary plugins log in in the WordPress dashboard, hover over Plugins, and click add new.

new plugin

Then type in search box contact form 7 plugin, install and activate it, then search PVB contact form 7 calculator add-on install it and activate it.

contact from 7

Making calculator inside contact form

To add calculation to the form we need to add a new form by hover over Contact, click on add new and delete all default fields inside form.

adding form

In this example I will show you have to make simple calculation formula, but you can add any mathematical formula you want.

Follow our steps:

  1. add open-label tag
  2. type in for “first number” for example
  3. Click on the number form tag generator

The pop up will show up. In the name field add name for this form tag. I will use “a” but you can use the name you want. We will use this name later in formula calculation so it’s the best to use short name.

We can also add a default number and set range for the numbers. Insert tag after that and close the label.

adding fields

Repeat same steps for the second number except for the name, I will use “b” for the name.

Next step is to add a calculation button by clicking on calculate button form tag. When the pop-up shows up type the label for the button, you should leave id attribute and class attribute empty if you don’t think to style it.

label for button

Adding calculation formula

To add calculation formula click on the Calculation form tag, and add calculation you want in calculation formula field. Use first and second number names for calculation.  Insert this tag inside label as well.

Save the form, copy the shortcode, and paste it into post, page, or text widget content

I’ll put the video down below if you rather want to watch.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you please disable the ad blocker extension first to see the content?

We are dependent
on ad revenue to keep creating quality content
for you to enjoy for free.

If you don’t have an Adblocker
extension installed then disable your
built-in browser adblocker (Brave
browser, for example)