Build a product configurator with ConvertCalculator

Overview

ConvertCalculator is a powerful form builder that makes it easy for anyone to build simple to complex forms and calculators.

In this article, we'll show you how to connect your ConvertCalculator form to Foxy for secure payments. When customers fill out your form, they will be redirected to Foxy's secure checkout to pay, allowing you to take advantage of our 100+ payment method integrations, shipping, taxes, coupons, and more.

Build Calculator Form

Your calculator form can have any field types, elements, and/or formulas. Any field that has a value when submitted, will be passed to the Foxy cart session. Each element's Title will be used as the product option name in the cart.

1. 1

   Build your calculator form, using preferred fields, formulas, and elements, etc.

2. 2

   Add a Button element.

3. 3

   With the Button element selected, in the Add action section, choose Add Submission.

4. 4

   Add a Price formula element to display calculated price (if your form doesn't already have one).

5. 5

   With Price formula element selected, set the Reference to FOXY_PRICE.

Collect Pre-checkout Information (optional)

By adding a field for name, email address, phone number, etc. you can collect customer information when your calculator form is submitted, even if the customer doesn't complete checkout. This works similar to cart abandonment functionality and can be useful in some cases.

Add Code Snippet

1. 1

   Click on Settings at the top of your calculator form.

2. 2

   Click on Custom code.

3. 3

   Enable the Use JS API option.

4. 4

   Copy and paste the snippet below into the Custom JS Code section:

   Copy Copied

   const foxyConfig = {
     subdomain: "https://SUBDOMAIN.foxycart.com",
     skipCart: false,
     emptyCart: false,
     productName: "PRODUCT NAME",
   };
   
   const toLabel = ans =>
     (ans && (ans.label ?? ans.value)) != null ? String(ans.label ?? ans.value) : "";
   
   // Build Foxy URL
   const buildFoxyUrl = ({ productName, total, fields }) => {
     const sub = String(foxyConfig.subdomain || "").trim();
     const origin = /^https?:\/\//i.test(sub) ? sub : `https://${sub}`;
     const url = new URL("/cart", origin);
   
     url.searchParams.set("name", String(productName).trim());
     url.searchParams.set("price", Number(total).toFixed(2));
     url.searchParams.set("quantity", "1");
   
     if (foxyConfig.skipCart) url.searchParams.set("cart", "checkout");
     if (foxyConfig.emptyCart) url.searchParams.set("empty", "true");
   
     // Attach every answer as a product option (rename as needed)
     fields.forEach(field => {
       if (field.value === 0 || field.collection === "variables") return;
       let value = field.label.trim();
       if (value) url.searchParams.append(field.name, value);
     });
   
     return url.toString();
   };
   
   function safeNavigate(url) {
    try {
      if (window.top && window.top !== window) {
        window.top.location = url; // no cross-origin method call
      } else {
        window.location = url;
      }
    } catch {
      window.open(url, "_blank", "noopener,noreferrer");
    }
   }
   
   ccInstance.calculator.on("submit", ({ formData }) => {
     console.log(formData);
     const { fields } = formData;
     const formulaPrice = ccInstance.formulas.getByReference("FOXY_PRICE");
     const price = Number(formulaPrice.getResult());
   
     const url = buildFoxyUrl({
       productName: foxyConfig.productName,
       total: price,
       fields,
     });
   
     safeNavigate(url);
   });

Configure Code Snippet

There are a few parameters you'll need to configure before publishing your calculator form.

Subdomain (required)

In the code snippet, replace SUBDOMAIN with your Foxy subdomain (this can be obtained in the Foxy admin, Settings > General).

Product Name (Required)

Replace PRODUCT NAME with the product name you want shown when added to cart (ie: Photography Package).

Skip Cart (optional)

If you want to skip the cart and take customers directly to the Foxy checkout after submitting your calculator form, set the skipCart value to true. Otherwise, set value to false to take customers to the cart.

Empty Cart (optional)

If you want to empty the cart before adding configured product to cart, set the emptyCart value to true. Otherwise, set value to false to allow customers to add multiple products to cart.

Embed Calculator Form

Once your calculator has been set up, it's time to embed it into your website.

1. 1

   Click the green Publish button.

2. 2

   Click on Share at the top of your calculator form.

3. 3

   Click on Embed.

4. 4

   Select the platform you'll be embedding your calculator form in (or choose "Other" if you're not sure).

5. 5

   Copy the code snippet.

6. 6

   Paste the code snippet into your website.

7. 7

   In the code snippet, change the data-type value to in-page.

8. 8

   Publish your website.

Test Calculator Form

To test your calculator form, simply go to the page where you have it embedded (or test using the link ConvertCalculator generates for you). Fill out the calculator form and submit. You should be redirected to the Foxy cart (or checkout, depending on skipCart settings) with configured product in cart.