ReusableForms v2.0 beta

Boost your cake business orders with this free cake order form template - customers are loving it

Get orders for cakes online. Copy and paste HTML code for cake order form. Can do price calculations too.

Tagged: calculation formorder formcake order form

If you're running a cake business, you understand that each customer has a unique vision for their ideal cake. Giving them the freedom to design their own cake is not only a great way to meet their needs but also create a memorable experience for them. That's where this HTML cake order form comes in. By allowing your customers to select the flavor, shape, and size of their cake, you're putting the power in their hands. They'll feel more invested in the process, and you'll be able to create the perfect cake for them. But this isn't just any old order form. It's designed to automatically calculate the total price based on the customer's selections. This means no more back and forth with your customer to finalize the details and price of their cake. They'll know exactly what they're getting and how much it will cost before they even submit the form. What's more, this form template is fully customizable. You can add more options, update prices, and tweak the design to fit your brand. With a little bit of coding know-how, you can make this form work exactly the way you want it to. In a competitive industry like the cake business, every little advantage helps. By offering your customers a seamless and customizable ordering experience, you'll stand out from the competition and build a loyal customer base.

Code


          
  <div class="container">  
    <form method="post" id="myform">  
      <div class="row mb-3">  
        <div class="col-sm-6">  
          <label class="form-label" for="name">Your Full Name:</label>
          <input class="form-control" type="text" name="name" id="name"/>
        </div>
        <div class="col-sm-3">  
          <label class="form-label" for="event_date">Date of Event</label>
          <input class="form-control" type="date" novalidate="novalidate" name="event_date" id="event_date"/>
        </div>
        <div class="col-sm-3">  
          <label class="form-label" for="Time">Time:</label>
          <input class="form-control" type="text" name="Time" id="Time"/>
        </div>
      </div>
      <div class="row mb-3">  
        <div class="col-sm-6">  
          <label class="form-label" for="phone">Phone:</label>
          <input class="form-control" type="text" name="phone" id="phone"/>
        </div>
        <div class="col-sm-6">  
          <label class="form-check-label">Delivery</label>
          <div class="d-flex flex-wrap">  
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="pickup_or_delivery" value="Deliver at my address" id="pickup_or_delivery_0"/>
              <label class="form-check-label" for="pickup_or_delivery_0">Deliver at my address</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="pickup_or_delivery" value="I will pickup" id="pickup_or_delivery_1"/>
              <label class="form-check-label" for="pickup_or_delivery_1">I will pickup</label>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3">  
        <div class="col-sm-6">  
          <label class="form-label" for="Email">Email:</label>
          <input class="form-control" type="email" name="Email" id="Email"/>
        </div>
        <div class="col-sm-6">  
          <label class="form-label" for="delivery_address">Delivery Address:</label>
          <textarea class="form-control" name="delivery_address" id="delivery_address" rows="6"></textarea>
        </div>
      </div>
      <div class="row mb-3">  
        <div class="col-12">  
          <h2>Cake Design</h2>
          <div class="fs-6 fw-light">Customize your cake!</div>
        </div>
      </div>
      <div class="row mb-3">  
        <div class="col-12">  
          <label class="form-check-label">Shape of the cake:</label>
          <div class="d-flex flex-wrap">  
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="cake_shape" value="Round" id="cake_shape_0"/>
              <label class="form-check-label" for="cake_shape_0">Round</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="cake_shape" value="Square" id="cake_shape_1"/>
              <label class="form-check-label" for="cake_shape_1">Square</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="cake_shape" value="Flower" id="cake_shape_2"/>
              <label class="form-check-label" for="cake_shape_2">Flower</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="cake_shape" value="Heart" id="cake_shape_3"/>
              <label class="form-check-label" for="cake_shape_3">Heart</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="cake_shape" value="Custom" id="cake_shape_4"/>
              <label class="form-check-label" for="cake_shape_4">Custom</label>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3">  
        <div class="col-12">  
          <label class="form-check-label">Choose Flavor:</label>
          <div class="d-flex flex-wrap">  
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="flavor" value="Vanilla" id="flavor_0" r-value="20"/>
              <label class="form-check-label" for="flavor_0">Vanilla</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="flavor" value="Chocolate" id="flavor_1" r-value="25"/>
              <label class="form-check-label" for="flavor_1">Chocolate</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="flavor" value="Marble" id="flavor_2" r-value="10"/>
              <label class="form-check-label" for="flavor_2">Marble</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="flavor" value="Red Velvet" id="flavor_3" r-value="30"/>
              <label class="form-check-label" for="flavor_3">Red Velvet</label>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3">  
        <div class="col-12">  
          <label class="form-check-label">Size:</label>
          <div class="d-flex flex-wrap">  
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="size" value="8 inch (serves 12-15)" id="size_0" r-value="1" />
              <label class="form-check-label" for="size_0">8 inch (serves 12-15)</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="size" value="10 inch (serves 20-25)" id="size_1"  r-value="2"/>
              <label class="form-check-label" for="size_1">10 inch (serves 20-25)</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="size" value="12 inch (serves 30-40)" id="size_2"  r-value="3" />
              <label class="form-check-label" for="size_2">12 inch (serves 30-40)</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="size" value="1/4 sheet (serves 20-25 )" id="size_3"  r-value="1" />
              <label class="form-check-label" for="size_3">1/4 sheet (serves 20-25 )</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="size" value="1/2 sheet (serves 40-50 )" id="size_4" r-value="3"/>
              <label class="form-check-label" for="size_4">1/2 sheet (serves 40-50 )</label>
            </div>
            <div class="form-check form-check-inline me-3">  
              <input class="form-check-input" type="radio" name="size" value="Full sheet (serves 80-100)" id="size_5" r-value="5"/>
              <label class="form-check-label" for="size_5">Full sheet (serves 80-100)</label>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-3"></div>
      <div class="row mb-3">  
        <div class="col-12">  
          <label class="form-label" for="inscription">Inscription:</label>
          <textarea class="form-control" name="inscription" id="inscription" rows="6"></textarea>
        </div>
      </div>
      <div class="row mb-3">
        <h3>Estimated Total Price:</h3>
        <span r-calc="size * flavor" r-format="currency|usd"></span>
      </div>
      <div class="row mb-3">  
        <div class="col-12 d-flex justify-content-start">  
          <button class="btn btn-lg px-4" size="md" style="background-color:#007bff;border-color:#007bff;color:white;" type="submit">Order</button>
        </div>
      </div>
    </form>
  </div>

How to Use

Simply copy the code to your web page HTML.

Back-end processing and record keeping

You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:

Using Ratufa backend

Go to ratufa.io
Press the "Connect your form" button
Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
Test your form. Ratufa will display the submissions - to the right side
Copy the combined code to your web page

Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.

Boost your cake business orders with this free cake order form template - customers are loving it

Code

How to Use

Back-end processing and record keeping

Using Ratufa backend

Similar forms