How to create a calculator using Gravity Form

I have seen this question plenty of times so thought I will demonstrate how to create a simple calculator using Gravity Form. The idea is to disable/remove the default submit button and just display the result using JavaScript (jQuery).

Let’s create a simple Gravity Form first with two fields (both numbers). Let’s call them Input 1 and Input 2 (very creative, I know). We will also create an HTML field to display the end result back to the user.

First thing we need to do is disable/remove the submit button. Gravity Forms is awesome so it’s likely that you have other forms on your website that you don’t want to remove submit button from. Take a note of what your newly created form’s Form ID is. You can find it here.

Lucky for us, Gravity Forms provide a handy way to disable the submit button provided you’re comfortable editing your child theme’s functions.php file or have a custom plugin with these kind of snippets. Here’s how to disable the submit button (in our case, form id 23).

add_filter( 'gform_submit_button_23', 'yr_disable_button', 10, 2 );

function yr_disable_button($button, $form){ return ''; }

Here we’re using the filter provided by Gravity Forms which is ‘gform_submit_button’ and we append it with our form ID (in our case 23) so our filter becomes ‘gform_submit_button_23‘.

If you watched the GIF carefully, in the last step, I add a css class of ‘result’ to the HTML field. This is so that we can target this field using jQuery.

We want to show our calculation result as soon as the user clicks out of the second input field. Assuming, the input field ids are 1 and 2 for you too, here’s what you need to input in the HTML field content area. It’s a jQuery snippet that runs when this form is loaded on the front-end.

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('#input_23_1, #input_23_2').on('change',function(){
  var input1 = jQuery('#input_23_1').val();
  var input2 = jQuery('#input_23_2').val();
    if(input1.length > 0 && input2.length > 0){
    var result = input1*input2;
   jQuery('.result').html('The result is '+result);
}
});
});
</script>

All this little jQuery snippet does is, it waits till both the input boxes has values and then it takes these values and perform multiplication. We then use the css class for the HTML field to output the final result.

If you followed these steps, you should see a working calculator like this.

This is a very simple calculator but you can easily extend it to do a mortgage calculator or a BMI calculator.

Leave a Comment Cancel reply