Imagine you own the local bakery, and one of your offerings is custom cakes. You are constantly being called and asked the same question: How much does the cake cost to order?
There is nothing wrong with this question, except it’s hard to answer since many variables exist. What is the occasion for the cake? What base, toppings, and shape do you want? How many tiers? Are there any other extra requests? All these questions affect the final price.
As a small bakery owner, you cannot afford to spend too much time on these questions as you need to bake.
If only there was a way to automate this 🤔.
Luckily, there is, and we are about to build it with Creative Widgets.
Here is the final look at what we are going to build:
Requirements #
Before you build anything, you need to understand what you actually need.
In our case, we want to have the following requirements for our cake order form:
- Cake occasion
- Shape
- Size of the cake
- Tiers
- Icing and Toppings
Now that we have our requirements, we can start building our cake calculator.
Step #1: Create New Calculator #
Press the ADD NEW WIDGET button on your dashboard to add a new calculator.
Note: You can also read our guide to familiarize yourself with the dashboard: Getting Started With Your Account.
Step #2: Adding Input Fields #
The calculator layout operates on a row basis, which means that you need to add containers first to add fields to your calculator.
So, let’s add our fields from the requirements section.
First, we add three containers, each with two fields. You can add up to four fields in each row container, but that’s my preference.
Press the ADD FIELD CONTAINER button to add a container. Once your container is added, press the ADD FIELD button to open a list of fields.
Then, select a field you want to add from the list of fields.
Step #3: Configuring fields #
Now that you have added fields to your calculator let’s configure them. To trigger the configuration, click on the field you want to configure. The right-hand side settings panel will open, and you can configure it. For the options, I am just changing descriptions and adding options to the element.
For the full list of field configurations, see our Fields knowledge base.
As you can see in the example, I define a numeric value for each option. This value represents the price you charge for the given cake option. Later, we will add these up together to calculate the final price for the customer based on their preferences.
I am going to use slider input to allow users to select the cake diameter they would like to have.
We will also let users decide on the number of tiers, icing, and toppings they want for their cake.
We will let them select multiple choices for toppings as they can combine them. If you want to allow the user to select multiple options, toggle the Multiselect option.
Now that we have all the input fields, it’s time to create a calculation field for users.
Here is what your list of fields should look like:
Now, that all your options are defined, let’s see how can we calculate the total price of the cake.
Step #4: Calculating Cake Price #
According to the Harvard Business Review, people are more likely to contact the business if they know the cost upfront.
People are more likely to consume a product if they’re aware of its cost.
Hardward Business Review
Based on that, we want to present customers with an estimated price based on their preferences. So, let’s add a Result field to our calculation.
In our field, we need to provide a description, our calculation unit, and the calculation itself.
Let’s review the formula we have added and how we came up with that.
Here is our formula: A+B+(C*20)+D+E+F
So what are all those letters?
If you followed along, you probably noticed that some fields are getting allocated letters and others aren’t. The logic is simple: If the field is decorative, e.g., an image, text, etc., the letter is not allocated since there is no value. If the field has numerical input, then it will have a letter allocated to it.
Using that letter, you can then reference the field’s value in the formula bar.
These letters are located in the left sidebar next to the field description, or when you select a field, the letter is displayed in the right sidebar.
To translate it to our example, what we are saying is:
Cake price = occasion + shape + (diameter * 20) + tiers + icing + toppings
For the sake of simplicity, I have just added all these values together. For the diameter, we charge $20 for every inch of diameter. Note that brackets are important for correct calculation.
Calculations can be as simple or as complex as you require.
Step #5: Styling Calculator #
If you are happy with your calculator and confident that it shows the correct calculation, we can add some personal touch to the calculator.
First, let’s change the color to match our bakery website design. Let’s say our website, where this calculator will appear, is pinkish.
You can also rename your calculator in the Name field in the top bar to differentiate between your different widgets. Optionally, you can change the width of the calculator in case your site content is wider or narrower than the default one.
Next, let’s introduce our calculator and add a bit more personal touch with an image.
You can alter the image to be the logo of your business or anything you want. I have used the markdown text to provide a list of steps for users to fill in, you can use basic description setup if you don’t feel confident.
As a last step, let’s add a few dividers to visually separate sections for our customers.
When using dividers, I advise keeping them in their own container and not mixing them with other fields in the container.
Step #6: Submitting Cake Calculator Order #
Excellent. Now that we have defined our cake order calculator, we are missing the last step: collecting user information and allowing them to submit the form.
Let’s add a submit button with email and name collection.
We only missed the final step: preview and embed the calculator into our website.
To do so, press the Embed button and copy the given code into your bakery website.
When a user submits the order, you will receive a notification on the email registered with the account with all the fields and selected values. You can also define the copy email to that, which could be, for example, your staff email so that they can receive the order.
Users can also opt-in to receive a copy of the submitted form by ticking the checkbox to be notified via email.
I hope you enjoyed this guide. If you found it helpful, please use the rating below to let me know.