calculation form

How to add calculated fields form – contact form 7

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

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

new plugin

Then type in the 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 a calculation to the form we need to add a new form by hovering over Contact, clicking on add new, and deleting all default fields inside the 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 the 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 best to use a short name.

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

adding fields

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

The 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 the calculation formula click on the Calculation form tag, and add the calculation you want in the calculation formula field. Use first and second number names for calculation.  Insert this tag inside the label as well.

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

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

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)