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>

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

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

Similar forms

A custom cake order form with calculations