Adding a call to action (CTA)

Learn how to add a call to action to a calculator

It's super exciting for your users to have an interactive calculator to calculate things like pricing and savings. A calculator gets even more powerful when adding a call to action. This could be a simple link, a form submission, but also capturing payments and subscriptions.

How to add a Call to Action

You can add a call to action by adding the "Button Element" to your calculator. When you are in the edit screen, you can choose from two types of Call To Action:

  • Link button
  • Form submission button

The link button makes it possible to navigate your users to another page on your website. In the editor, navigate to the Call To Action panel and toggle the option "Link button" on. Now it's possible to add a custom text and URL for your call to action.

Form submission button

The form submission button is way more powerful than the link button. When a user presses the Form submission button, ConvertCalculator captures all the calculator's fields in a "Submissions database," and you get the ability to send emails to yourself or the submitter.

In the editor, navigate to the Call To Action panel and toggle the option "Add Form Submissions on". Now you are able to change some settings, like changing the button text, form response text, and email settings. But it's also possible to set up payments.

Marking a question as required

Sometimes you want to prevent a form from submitting if a question is not been filled out by your visitor. In this case, you can toggle the option "Is this question required?" when editing a question. Note that this option is only visible when you have added "form submissions to your calculator".

Hide results until after submission

There are some scenarios where you don't want to display the results of a formula before the user submits the form. There are three ways to do that:

1. Use a view break

Add a view break just before the results. Hide the standard button for the view break and add a Button. Toggle on "Use as Form Submission" to make sure an email is triggered to you (and potentially your user). Lastly, toggle on the "Jump to next view" in order to let the user jump to the results view upon submission.

This is the nicest way of displaying results after submission, but it involves using view breaks, which is a premium feature.

2. "Hide results before submission" in the formula

First, make sure you capture form submissions by toggling on the option "Add form submissions" in the CTA panel. Afterward, click on the formula you want to "hide" before submission and toggle the option "Hide results before submission". If it's toggled on you can show a placeholder text.

3. Use Show/Hide logic in the formula

Another way to accomplish this is to hide the formula altogether. In order to do this, toggle the "Show/Hide logic" option and use the following equation: IS_SUBMITTED. This will hide the formula when the form is not submitted and show it when it is.

Only send results to email

When you want to push harder on submissions, you can even take it a step further by completely hiding the results in your calculator and only sending it by email. You can do this with the following steps:

  1. Add a "Container" element to the calculator
  2. Drag and drop your Formula element into the container
  3. Select the container and toggle 'Show/Hide-Logic' without setting a function.

In this way, you will hide the formula from view, but it will still retain its value.

Another easy way to only include the result in the email is by creating a variable and adding that variable to the submission email.

Setting up payments

Setting up payments is very easy. When you toggled the option "Add form submissions" on the Call To Action panel, a switch appeared called "Checkout (payments)". Toggle this on. After toggling this on, you need to connect your Stripe Account. If you don't have one, please set one up first. you can see the following options:

  • Subscription: Toggle this on if you want to capture subscriptions. If it's toggled on, you can choose the interval of the charges.
  • Formula: It is required to select a formula since the formula value is used as the payment amount. If you want to charge a fixed amount, add a new formula with the fixed amount (e.g., if you want to charge $10, your formula is 10).
  • Optional checkout: Toggle this on if you want your users to be able to send a normal form submission also.
  • Checkout title and description: These are used on the checkout popup
  • Capture billing address: Useful if you want to capture name and address in Stripe
  • Capture zip code: This is useful for extra security on charges.

Testing Payments

You've set up payments, but now you want to make sure everything is working properly. But you don't want to make a purchase. Good news, you can test payments in the "preview" window with the following credit card details:

Card number: 4242 4242 4242 4242

Exp. date: Any date in the future

CVC: Any

Related articles

Learn more about add cta in one of the following articles