A custom cake order form with calculations

A simple cake order form that calculates the total price of the cake based on the options chosen

Tagged: calculation formcake order formjavascriptorder form

This cake order form can calculate the total cake price based on the options selected by the customer. In the form, select the options for example, the size of the cake or the filling. Notice that the total price changes as you choose the options. This is an example of how to build order forms with custom calculations. The code uses NittiJS for calculations. As you can see in the sample code, you only have to provide the formula for the calculation in the r-calc attribute to get the calculation working. NittiJS can also show/hide a part of the form conditionally. When you select the option for inscription, the textbox to enter the inscription is displayed. This is done using r-show attribute in the container div See NittiJS documentation ( https://github.com/sisukasco/nitti ) for usage instructions.

Code


        <div class="mx-auto" style="max-width:350px;">
        
        <form id="cakeform">
            <h3>Make your cake!</h3>

            <div class="my-3">
            <label>&#x1F382; Size Of the Cake:</label>
            <div class="form-check">
                <input type="radio" id="size_round6" class="form-check-input" name="selectedcake"
                    value="Round6" r-value="20" /><label class="form-check-label" for="size_round6">Round cake 6" - serves 8 people
                    ($20)</label>
            </div>

            <div class="form-check">
                <input type="radio" id="size_round8" class="form-check-input" name="selectedcake"
                    value="Round8" r-value="25" /><label class="form-check-label" for="size_round8">Round cake 8" - serves 12 people
                    ($25)</label>
            </div>

            <div class="form-check">
                <input type="radio" id="size_round10" class="form-check-input" name="selectedcake"
                    value="Round10" r-value="35" /><label class="form-check-label" for="size_round10">Round cake 10" - serves 16
                    people($35)</label>
            </div>

            <div class="form-check">
                <input type="radio" id="size_round12" class="form-check-input" name="selectedcake"
                    value="Round12" r-value="75" /><label class="form-check-label" for="size_round12">Round cake 12" - serves 30
                    people($75)</label>
            </div>
            </div>

            <div class="my-3">
            <label for="filling" class="d-block"> &#127862; Filling:</label>
            <select  class="custom-select" id="filling" name="filling" >
                <option r-value="0" value="None">Select Filling</option>
                <option r-value="5" value="Lemon">Lemon($5)</option>
                <option r-value="5" value="Custard">Custard($5)</option>
                <option r-value="7" value="Fudge">Fudge($7)</option>
                <option r-value="8" value="Mocha">Mocha($8)</option>
                <option r-value="10" value="Raspberry">Raspberry($10)</option>
                <option r-value="5" value="Pineapple">Pineapple($5)</option>
                <option r-value="9" value="Dobash">Dobash($9)</option>
                <option r-value="5" value="Mint">Mint($5)</option>
                <option r-value="5" value="Cherry">Cherry($5)</option>
                <option r-value="8" value="Apricot">Apricot($8)</option>
                <option r-value="7" value="Buttercream">Buttercream($7)</option>
                <option r-value="12" value="Chocolate Mousse">Chocolate Mousse($12)</option>
            </select>
            </div>
            
            <div class="my-3 pl-4">
                <input type="checkbox"  class="form-check-input" id="includecandles" name="includecandles"  />
                <label for="includecandles" class="form-check-label">
                    &#128367; Include Candles($5)</label>
            </div>

            <div class="my-3 pl-4">
                <input type="checkbox" class="form-check-input" id="includeinscription" name="includeinscription" r-value="20"/>
                <label class="form-check-label" for="includeinscription">
                    &#128394; Include Inscription($20)</label>
                <div r-show="includeinscription">
                    <input type="text" class="form-control" id="theinscription" name="theinscription" placeholder="Enter Inscription" />
                </div>
            </div>
            <div >
                Total: <span r-calc="selectedcake + filling + includecandles + includeinscription" r-format="currency|usd"></span>
            </div>

            <h3 class="mt-5">Delivery Details:</h3>
            <div class="my-3">
                <label for="cakeform_name">Full Name:</label>
                <input type="text" class="form-control" name="name" id="cakeform_name"/>
            </div>
            <div class="my-3">
                <label>Phone:</label>
                <input type="text" class="form-control" name="phone"/>
            </div>

            <button type="submit" class="btn btn-primary btn-lg">Order</button>

        </form>
        </div>

Integrating the Code with Your Web Page

To seamlessly integrate the form code from ReusableForms.com into your web page, follow these simple steps:

The form code is plain HTML. Click the copy button located above the code and paste it into your web page's source code.
If the form uses a CSS framework like Bootstrap or TailwindCSS, ensure that your web page or website project has the necessary libraries linked. Consult the respective library documentation for guidance.

Setting up Back-end Processing and Record Keeping

The form code provided above is for the client side only. To fully benefit from the form's features, you'll need a back-end form processor. Ratufa is one such service, and integrating with it is straightforward. Watch the video demo for a step-by-step example.

To receive email notifications upon form submissions, store submission records, and search through them later, you'll need a back-end processor. Here's how to set one up:

Using Ratufa Backend

Go to Ratufa.io.
Click the "Connect your form" button.
Copy the provided code and paste it at the bottom of the HTML form code above
You can test the form within ReusableForms before copying it to your website. Ratufa.io will show submissions on the right side.
Copy the combined code to your web page.
Ratufa will store your form submissions, and you can configure email notifications. You can search and download records whenever needed.

A custom cake order form with calculations

Code

Integrating the Code with Your Web Page

Setting up Back-end Processing and Record Keeping

Using Ratufa Backend

Similar forms