Form Demo

Template Description

Key Features

• The form can calculate the price and time it will take to finish the service.
• Each service element (like the total area to be cleaned or oven cleaning) shows its price and time.
• The total price and time are shown at the bottom

How to create the cleaning service calculator form

Creating the form layout

The first thing I like to do is add all the fields. In this cleaning service calculator, I wanted to separate each element (like basic information and additional services) into sections. To do so I created three group panels:

• Basic Information
• Additional Rooms
• More Questions
• Additional Service
• Total

And then placed each field in its appropriate section like this

This is not needed though; it was just how I wanted to do it this time. If you want you can place all the fields in the form without using group panels, or you could also create multiple-step forms or use dividers to create these divisions.

Calculating price and time

The first challenge was that I wanted each field to calculate and display its price and time to finish below it. So for example, if the user fills my "Total area to be cleaned (square meters)" field with a 30 I want my form to calculate how much time and money will cost to do that and display it below. Like in this example(in the image the form is configured to consider $1.5 and 3 minutes to clean each square meter).

You can easily calculate the price and there are a bunch of forms and tutorials (like this one) that teach you how to do it. Calculating a time is a little more complex but it is still easy to do using formulas. The real problem was that each field needed to calculate both price and time which is more complex (or was before the 1.2.218 update, more about this later).

Why was hard to make a field calculate both price and time?

Before 1.2.218 you could use formulas to calculate a price or to manipulate the value of a setting. For example, in a text field, you could use calculations to define the field price and default text.

But in this cleaning service calculator, I need to calculate both price and time. Because I am very smart, I will use the 'price formula" to calculate the price (what a surprise!) but there is no place to calculate the time. I can't use the 'default text' setting to calculate the time because this setting needs to be empty since my customers are going to be filling this field, i don't want my form to calculate the text of this field.

A sub-optimal workaround: Using hidden fields

A bad workaround I could use is using hidden fields to calculate the time. The problem is that as I said before, I want each element of my form to display its time below it like this:

The cleaning service calculator has 11 fields that need to calculate a time which means the form will need 11 hidden fields to do these calculations. Once I add these fields I need to remember to add a new hidden field every time I add a new field. Or if I delete it I need to remember to delete its hidden field too. Or if I make changes to my form and move the fields I also need to move its hidden field (this technically wouldn't be needed but I like to keep stuff organized).

So you can see why using hidden fields for this is not optimal and can quickly become difficult to work with. That is why starting on version 1.2.218 we added a feature that will make doing forms that use multiple kinds of calculations a lot easier.

Introducing field meta

With fields meta, you can add additional calculations or fixed values to each field. You can later use this information to display it somewhere else or in other formulas. We are going to use this metadata to calculate the time for each field.

How to add a new meta to a field

To add a new meta you just need to go to the "meta" section of a field and click on "Add metadata"

Then define the metadata name and value

You can also click on the calculator icon to define a calculation instead of using a fixed value

or you can click on the minus sign to remove it from the field

We are going to use these metadata in the next section to calculate the time.

Creating a field that calculates a price and time

In our form, the first field ("Total area to be cleaned") already requires to calculation of both the price and time.

I want this field to charge $1.5 and add 3 minutes for each square meter. Calculating the price is pretty straightforward i just go to the pricing section, and in the "Price type" I select "Formula". My formula is like this:

What this formula does is just multiply the value of the field "Total area to be cleaned" by 1.5. So if the user fills it with 30 this field will add $45.

Now to calculate the time I will go to the meta section and I will add a new 'time' meta

and then I will click on the calculator icon to define a formula. I want to add 3 minutes for each square meter so this is the formula that I will use

Using this formula the "time" meta will be the same as the value of the "total area to be cleaned" multiplied by 3.

Displaying the price and time below the field

So far my field is already able to calculate the price and time but if I run my form right now it only shows the price like this.

But I want it to display both my price and time. To do so I will go to the field description and I will configure it to display this description only when the field is filled

Now in the description field, I can put any text I want. For this cleaning service calculator form, I want to display the price and time in this format

$:+[Fied Price] 🕒:+[Field time]

Side Note: In case you are wondering the clock icon is an ASCII emoji that you can use by just copying and pasting it you can find a bunch of ASCII emojis on sites like https://www.alt-codes.net/

Adding the price to the description

I can't just add the field directly to the description like this though

If I do so the field will display its value (what the user inputs in the field) not its price like this:

Also, there is no way to display the field meta.

So to work around that I will use formulas. To create a formula click on the "Formula" button and define the formula

I could use a formula like this:

But the problem with it is that it does not always format the number nicely, for example, if the number is an integer it will just not put any decimal numbers

To work around that I will pass the price value of my field to a function called RNFormatCurrency which will help me format the number, my formula will look like this:

This almost worked as I wanted, now my field is always formatted as a currency (with the additional zeroes) BUT for this particular formatting, I would prefer to skip the dollar sign as I already added it at the beginning with the $: thing.

To skip the dollar sign I will pass a false to the second parameter of the function, which will indicate the function to format the number without a symbol.

And with that, the currency section is displayed exactly as I want it

Adding the time to the description

Next to display the time I will add another formula to the description. To use the 'time' meta in a formula I can use the field function.GetMeta("MetaName") like this:

This formula will return what is stored in the 'time' meta of my 'Total area to be cleaned' field, there is one catch though. In my time meta, I am saving the number of minutes but I don't want to display the minutes I want to display a formatted time. In other words, I want to display "2h 30m" not "150"

To fix that I will use the formula "RNFormatTime" which transforms a number (minutes) into a formatting time. So my formula should look like this

And after this, my field displays the price and time exactly as I want it

I will do the same for all the other numeric fields that need to calculate a price (like "Number of bedrooms", "Total area to be cleaned", "Number of bathrooms" and "Number of living rooms").

Configuring the switch fields

The switch fields (like the Do you have pets). Are similar to the numeric fields with a small difference. These fields don't need to calculate anything, they have a fixed amount and time which is used if the fields are checked. For example, if the "Do you have pets?" switch is checked a fixed $30 and 20m is added.

So for these fields instead of using a formula to calculate a price, I will use the price type "Fixed amount" and define how much I want to charge when checked

And in their time meta instead of using a formula, I will just use a fixed value

The rest of its configuration is identical to the numeric fields

Configuring the radion and dropdown fields

The fields that support multiple options (Like the "Additional services" checkbox field) have another difference. The price and time needed can vary for each option. So to configure the time for each option instead of creating a meta we are going to use "Additional Columns" (which is metadata for the fields options).

To add an additional column select a multiple options field (like the "Additional Services" checkbox) and click on "Add Additional Column"

Then in the pop up click on "Add Column"

For this cleaning service calculator form, I am going to add the column called "time" to match the name of my meta field.

After clicking done my field will let me save both the price (which I am going to save in the value box) and time.

Also for this field, I am going to select the price type "Options". This will make the price of this field the sum of all its selected options.

Configuring the description

Lastly, the configuration of the description for this field is pretty much the same, the only difference is that in the time formula (used in the description setting) instead of using GetMeta, I am going to use SumColumnValue, this function will return the sum of the time column of all the selected option.s

My other multiple-choice fields (like "Additional Rooms" and "Size of your kitchen") have the same configuration.

Displaying total cost and time

Lastly, at the end of the form I want to display the total cost and time needed to finish the cleaning service. I also want to highlight this part with a bigger font and different colors so to do so I added two "Simple text" fields.

I selected the text position to be right so the value of this field is displayed at the right of the label instead of below it

lastly to display the total I just created a formula, to sum up all the fields, to display the total price I just summed up the "price" of each field and formatted it as currency like this:

To display the time I summed the meta (or column value for multiple options fields) and formatted it as time:

And that's it! Now my form displays the price and time on each field and also shows the total at the end as I wanted.

Installation Instructions

You can download the template directly from here clicking in the button above and then import it to all in one forms

You don't have All in one forms?

You can get it HERE (there is a free version!)

Didn't fine the template that you need?

Sorry for that, our template gallery is pretty small right now but we are adding more templates constantly, remember that all the templates are 100% customizable so you could tweak one template to match your needs (everything is customizable using our drag and drop builder, no coding experience needed) or you can suggest one template in the Support portal