How to Create a Recipe Portion Calculator

Here’s a step-by-step manual for building a recipe portion calculator with the JetFormBuilder plugin.

Contents

The Use Case Details

A sushi enthusiast’s website might need a recipe portion calculator. This tool allows users to adjust ingredient quantities for sushi rolls based on the desired number of servings. Created with JetFormBuilder, the form utilized calculated fields and conditional logic to deliver a dynamic and user-friendly experience. 

For this use case, we’ll use a basic sushi recipe to illustrate how the portion calculator adjusts ingredient quantities. Base ingredients for six rolls (default serving size):

  • 6 sheets of nori;
  • 1 batch of rice;
  • 227 g of raw salmon (or other raw fish);
  • 113 g cream cheese;
  • 1 avocado;
  • 3 tablespoons of soy sauce.

The goal is to create a dynamic form that recalculates ingredient quantities based on the user’s desired number of servings. This ensures that users can effortlessly adjust recipes for any number of servings.

Form Fields Structure

This section describes the arrangement and purpose of the form fields, explaining how each element enhances the form’s dynamic and interactive capabilities.

Portion selection section:

  • Range Field block — a serving amount slider that users can drag to increase the multiplicator for the ingredients fields.

Ingredients section:

  • Image block — a field that displays an ingredient;
  • Paragraph block — a field that displays the name of an ingredient;
  • Calculated Field block — a field that adjusts the amount of ingredients based on the Range Field block input.

Extra ingredients section:

Details output section:

  • Custom HTML block — a field that displays the number of servings that the user has selected in the Range Field block with the code:
<!-- JFB_FIELD::number_of_servings -->
  • Custom HTML block — a field that displays the number of ingredients based on the Range Field block input using the code:
<!-- JFB_FIELD::ingredient_field_name -->

Extra ingredients calculation and details output section:

  • Calculated Field blocks — hidden fields that adjust the amount of ingredients based on the Range Field block input;
  • Conditional Blocks —  fields that contain Custom HTML blocks that display the number of ingredients based on the Range Field block input using the code:
<!-- JFB_FIELD::ingredient_field_name -->

Setup calculation

The base quantities of ingredients will be used in formulas. The calculations are performed using the JetFormBuilder’s Calculated Field block. Example calculation for the nori sheets:

Required nori sheets = base quantity * desired portions/servings amount

Base ingredients formulas:

  • Nori — %desired_serving%*6;
  • Rice —  %desired_serving%*1;
  • Salmon —  %desired_serving%*0.22; 
  • Cream Cheese —  %desired_serving%*0.1;
  • Avocado —  %desired_serving%*3;
  • Soy sauce —  %desired_serving%*3.

Extra ingredients formulas:

  • Smoked salmon — %desired_serving%*0.22; 
  • Spring onions — %desired_serving%*1.

As users adjust the number of servings, the ingredient quantities dynamically update, providing immediate results. To improve performance, we’ve added the Extra Ingredients section to modify the recipe further.

Example outputs — when the user selects three servings, they will get the following output:

  • Nori: 18 sheets
  • Rice: 3 batches
  • Salmon: 0.66 kg
  • Cream cheese: 0.3 kg
  • Avocado: 3 items
  • Soy sauce: 9 tablespoons

Build the Form

To create a form, go to WordPress Dashboard > JetFormBuilder and click the “Add New Form” button. Remove the Welcome block, as we don’t need it for this form.

Servings selection section

This section includes a Range Field block, which allows users to adjust the serving size by dragging a slider. The slider dynamically updates the ingredient quantities by multiplying the ingredient fields.

Click on the “+” to toggle the block inserter, and type “range” in the search field to find the Range Field block.

Go to the block settings, General tab, and in the FORM FIELD NAME, type the “desired_portion.”

adding range field block

In the Value tab, we need to set DEFAULT VALUE to “1.”

In the Field tab, we need to set MIN VALUE to “1,” MAX VALUE to “20,” and STEP to “1.” These values mean that the minimal portion size is “1,” the maximum portion size is “20,” and the adjustment step is “1.”

range field block settings

Ingredients section

This section provides a dynamic display of ingredients. It features an Image block that showcases the ingredient visually, a Paragraph block that presents its name, and a Calculated Field block that automatically adjusts ingredient quantities based on user input in the Range Field block, ensuring precision and flexibility.

Click on the “+” to toggle the block inserter and add the following blocks: an Image block, a Paragraph block, and a Calculated Field block. 

Our base recipe contains six ingredients, which is why we need to add this set of blocks six times. For more convenience, we’ll structure these blocks in the following way:

  • Columns block
    • Column block (ingredient #1)
      • Image block (ingredient image)
      • Stack
        • Paragraph block (ingredient name)
        • Calculated Field block (ingredient portion calculation)
    • Column block (for ingredient #2)
      • Image block (ingredient image)
      • Stack
        • Paragraph block (ingredient name)
        • Calculated Field block (ingredient portion calculation)
ingredients section blocks structure

Since we already have all the necessary formulas, we can add them to the corresponding Calculated Field blocks.

ingredients section calculated blocks with formulas

Make sure you’ve added the corresponding value to the Calculated Field blocks; we’ll need them further. To do so, go to the Block settings and then the General section, find the FORM FIELD NAME, and set the corresponding value for each of the ingredients.

ingredient blocks calculated block settings

In our case, the nori sheets will have the value “nori_base,” the rice will have the value “rice_base,” and so on.

Extra ingredients section

This section features an Advanced Choices Field block, which enables users to view and select additional ingredients to customize their recipes.

Click on the “+” to toggle the block inserter, and type “advanced” in the search field to find the Advanced Choices Field block.

In the Select choices layout, we’ll opt for “Images with description.”

advanced choices

After clicking on the “Images with description” option, three Advanced Choice blocks will be added automatically. Since we have only two extra ingredients, we’ll remove one block; then, we’ll add images and names of the ingredients.

Further, we’ll add a set of Calculated Fields that will count the amount of these extra ingredients, but first of all, we need to adjust the values. Go to the Block tab and, in the General tab, adjust the VALUE and VALUE FOR CALCULATED FIELD.

advanced choice block settings

Since the smoked salmon is needed in the same amount as the raw, we’ll set the VALUE FOR CALCULATED FIELD to “0.22. ” For the spring onion, we’ll set the VALUE FOR CALCULATED FIELD to “1,” as they are counted in stems per portion.

Details output section

This section uses Custom HTML blocks to display dynamic details based on user input.

Click on the “+” to toggle the block inserter, and type “html” in the search field to find the Custom HTML block and add it twice.

Into the first block, we’ll add the following code:

<div>Use the following amount of ingredients per <strong><!-- JFB_FIELD::desired_serving --></strong> servings</div>

Into the second block, we’ll add the following code:

<ul><li>Nori: <!-- JFB_FIELD::nori_base --> sheets</li>
<li>Rice: <!-- JFB_FIELD::rice_base --> batches</li>
<li>Salmon: <!-- JFB_FIELD::salmon_base --> kg</li>
<li>Cream cheese: <!-- JFB_FIELD::cheese_base --> kg</li>
<li>Avocado: <!-- JFB_FIELD::avocado_base --> items</li>
<li>Soy sauce: <!-- JFB_FIELD::sauce_base --> tablespoons</li></ul>

As mentioned previously, the “nori_base,” “rice_base,” etc., are the values of the Calculated Field blocks we’ve used in the ingredients section. 

After filling in these blocks, check if the content is displayed correctly on the front end.

html blocks front end

Extra ingredients calculation and details output section

​​This section dynamically calculates through a set of Calculated Field blocks and displays the quantities of additional ingredients through Conditional Blocks based on the desired serving size.

In our case, for additional ingredients, the Calculated Field blocks are the same as for the main ingredients. That’s why we’ll duplicate those fields, drag them to the bottom of the form, and group them. Make sure you’ve added unique FORM FIELD NAMES.

extra ingredients calculated fields

Now, let’s add the last set of fields: a pair of Conditional Blocks. Each block will contain an HTML block with the following code.

  • For extra ingredient — Smoked Salmon:
<ul><li>Extra smoked salmon: <!-- JFB_FIELD::extra_salmon_calculation --> kg</li></ul>

For extra ingredient — Spring Onion:

<ul><li>Extra spring onion: <!-- JFB_FIELD::extra_onion_calculation --> kg</li></ul>

Here, the “extra_salmon_calculation” and “extra_onion_calculation” are the Calculated Field block FORM FIELD NAMES from the previous step.

Click on the “+” to toggle the block inserter, and type “conditional” in the search field to find the Conditional Block block and add it twice.

When added, click on the Block, go to the Conditions section, and click on the “pencil” icon.

conditional block setting the display

In the Conditional Logic popup in the WHICH FUNCTION NEED EXECUTE? dropdown, select “Show if…” and then click on the “+ Add Condition” button, which will reveal the set of fields.

conditional block setting the display
  • FIELD — a field that triggers the conditional block; in our case, it’s the Advanced Choices Field, which has a FORM FIELD NAME value “extras”;
  • OPERATOR — an option that allows you to set rules for conditional display or behavior based on user input. In our case, it’s “In the list” because the field value must match one of the specified values in a list of Advanced Choices Field options;
  • VALUE TO COMPARE — a value of an ingredient from the Advanced Choice block’s VALUE field.
advanced choice block settings

When done, click on the “Update” button.

Checking the Results

Now, it’s time to embed the form on the website. Click the “Publish” button to publish the form.

In the top right corner, click on the “<<” (double brackets) button to open the Use the form popup to get the shortcode or Elementor widget.

use the form popup

Add the shortcode to the page and preview the form. More details can be found in the How to Display a Form on the Front End tutorial.

In our preview, we’ll set the number of portions to “5.”

form preview 1

For this number of portions, we have “30” sheets of nori, “5” batches of rice, and so on.

The Sushi Servings Details section displays the recalculated amount of ingredients for “5” portions.

sushi servings details section

If we check any of the additional ingredients, the Conditional Field will be triggered, revealing the amount for the chosen one.

sushi servings details additional ingredient

That’s all one needs to know about building a recipe portion calculator form with the JetFormBuilder plugin on a WordPress website.

Related Docs