How to Remove the Submit Button From Calculation Forms

Wondering how to remove the submit button from calculation forms for a better user experience?

For a mortgage estimate or a shipping quote, people want the number to update as they type, not click a button and wait for the page to reload.

By removing the submit button from calculation forms created by WPForms, you can provide instant calculations to your visitors.

In this guide, you’ll learn the simple steps to modify your forms for seamless, real-time calculations without needing a form submit action.

Create Your Calculator Form Now

Why Remove the Submit Button From a Calculation Form?

Most forms need a submit button because they send data somewhere, like a contact request or an order, but a calculator form works differently.

Your visitor isn’t sending you anything, they just want an answer, like a monthly mortgage payment or a shipping cost. When the Calculations addon updates the total live as people type, the submit button has nothing left to do.

It can even confuse visitors into thinking they have to click it to see their result. Hiding it makes the form behave like a real calculator, where the figure simply appears and updates on its own.

So if your form exists to show a live number rather than collect a submission, removing the submit button is usually the right call.

How to Remove the Submit Button From Calculation Forms

Removing the submit button from calculations forms with WPForms is incredibly easy. All you need to do is follow these simple steps below:

The Prerequisites

Before we proceed with the steps to disable submit button, let’s make sure that we have completed a few important steps.

If you have already completed these steps, feel free to skip ahead to the section on removing the submit button.

1. Having a WPForms Pro License

WPForms is a reputable form builder and calculator plugin that allows users to create a wide range of forms, including a days between dates calculator.

It’s important that you have the latest version of WPForms installed, along with access to the Pro license.

The Pro version provides you access to premium integrations, addons, and many valuable features like conditional logic, form submission reports, etc.

2. Using the Calculations Addon

To create custom calculators in WordPress, you probably already know that you need to have the WPForms Calculations Addon installed.

You can use this addon to insert logical operators and if-then statements to create personalized quotes or build intelligent calculators.

It even allows you to utilize integrated mathematical functions to round numbers, calculate time ranges, find averages, and more.

3. Selecting a Calculator Form Template

Finally, you need to have a form ready. If you need to build one, WPForms offers 2,100+ pre-designed templates that make form creation a breeze.

These include professionally-designed calculator form templates that can be customized to fit a variety of use cases and industries, such as:

• Mortgage Calculator Form Template — perfect for real estate agencies as it enables potential buyers to calculate mortgage and their monthly payments effortlessly.
• Shipping Cost Calculator Form Template — helps eCommerce sites save time and effort by providing a simple shipping calculator for customers.
• BMI Calculator Form Template — ideal for websites devoted to physical fitness or health that assists users in evaluating their current state of health.
• ROI Calculator Form Template —assists businesses and marketers in efficiently evaluating the profitability of their campaigns or projects.

The best part of all: you can use the calculations addon to create custom calculators without any HTML, javascript, or complex coding knowledge.

Get WPForms Pro to Build Your Calculator

Removing the Submit Button

Once these prerequisites are met, you’re all set to modify your form to remove the submit button for a better user experience.

1. Go to the WPForms Snippet Library

From your WordPress dashboard, simply go to WPForms » Tools. Then, navigate to the Code Snippets tab.

This will display a pop-up message that says, “Please Install WPCode to Use the WPForms Snippet Library.”

2. Install + Activate WPCode

All you have to do now is click the Install + Activate WPCode button. The plugin will now take a few seconds to install.

Once the WPCode plugin is installed, you will be able to access the complete list of WPForms snippets.

3. Use the Hide Submit Button Snippet

Now, search for the hide submit button snippet by typing its name in the Search Snippets field. Next, click on the Install Snippet button.

Here’s the code snippet we’re going to import:

This will redirect you to the WPCode snippet preview page, where you can see the code automatically integrated.

Now, all you need to do is enable the snippet code. To do this, move the toggle from Inactive to Active.

The next step now to activate the code snippet site-wide is to hit the Update button, right next to the Active toggle option.

By following this approach, you will only need to add the snippet once through the WPForms snippet library.

Then, for each form the user wants to use this snippet on, they will need to add the name of the Submit Button CSS Class inside the builder.

4. Add Submit Button CSS Class

Now, all that’s left to do is add the CSS class in the form builder of the calculator you want to remove the submit button from.

To do this, open your calculator form and navigate to the General tab, then scroll down to the Advanced tab.

After that, paste the wpf-calc-form CSS into the Submit Button CSS Class to activate the code snippet.

You can now preview your form to see that the submit button from your calculator has been successfully removed!

How to Stop the Enter Key From Submitting the Form

Even without a visible submit button, a form can still submit when someone presses the Enter key inside a text field. On a calculator that’s meant to show a live result, that’s not the behavior you want.

The fix is a second snippet that stops the Enter key from triggering a submission. The exact code lives in our developer documentation, so you can follow the guide on how to stop the Enter key from submitting the form and add it the same way you added the first one.

With both snippets active, your calculator shows its total instantly and stays in place, with no button and no accidental submissions.

FAQs about Calculator Forms

Calculator forms come up a lot with our readers. Here are answers to some of the most common questions about removing the submit button and working with calculator forms in WordPress.

How do I turn off the submit button in a form?

To turn off the submit button in WPForms Pro, you hide it with custom CSS. Go to WPForms » Tools, open the Code Snippets tab to reach the WPForms Snippet Library, and install the hide submit button snippet. Then add the wpf-calc-form class to your form’s Submit Button CSS Class field.

Can a form have no submit button?

Yes. A form can work without a submit button, which is common for calculators that show a result instantly or forms that submit automatically. In WPForms Pro, you hide the button with a bit of CSS added through the built-in WPCode integration, so nothing extra is needed.

Does hiding the submit button stop the form from being submitted?

No, hiding the button on its own doesn’t stop submissions. The form can still be submitted if a visitor presses the Enter key while in a text field. To prevent that, add a second snippet that stops the Enter key from submitting, using the developer guide linked above.

Can I remove the submit button from just one calculator form?

Yes. The snippet only takes effect on forms where you’ve added the wpf-calc-form class to the Submit Button CSS Class field. Leave that field empty on your other forms and their submit buttons stay exactly as they are.

Next, Learn How to Create a Custom Online Calculator

A calculator is one of the best ways to keep visitors on your site, since it gives them a reason to stick around and get an answer to a real question.

If you want to build one from scratch, take a look at our guide on how to make a custom calculator in WordPress and set it up for whatever your site needs.

Create Your Calculator Form Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.