logo
Documents & Forms
Microsoft 365 & SharePoint Tools
Classic SharePoint Tools

Cake Order Form

Using this online cake ordering form, you will gather all the information you need to deliver cakes to your customers. The form asks for a customer name and contact details, the delivery address, and, of course, a cake description. Customers can create custom cakes by selecting the flavor, filling, and icing. They can choose a cake shape from a predefined list, draw a custom cake shape or attach the cake image as an example. Use the template as-is or customize it to meet your requirements.

Preview
Theme:
Use this template

Fields and controls

  • All form elements are placed in a Grid container that has a content-container CSS class. Change the container styling in the CSS editor.
  • The Email field accepts only valid email addresses. Change the pattern in the field properties.
  • The MobileNumber is a masked input field that accepts only 11-digit numbers. Change the mask in the field properties.
  • The Shape field is required.
  • Cake Shape section container has a cake-shape CSS class. The container is shown/hidden dynamically depending on the Shape field value.

JavaScript

  • The container with a cake-shape CSS class is hidden on the form load.
  • The function within change() event of the Shape field shows/hides the container with a cake-shape CSS class.

Styling

  • The background image is defined in a rule for a fd-form CSS class.
  • The background for a grid container with a content-background CSS class is blurred; the background color is transparent.
  • A pseudo-element is added before and after h4 elements to display horizontal lines.
  • The background of the element with an alert-body CSS class is white.