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

Online Order Form

Simplify the process of ordering products using this online order form. Gather all necessary information from a customer like full name, contact details, shipping address. Customers can add multiple products, specify the quantity and see the total price instantly. PayPal gateway process is integrated into the form, so a customer can proceed with the payment immediately after submitting the order.

Preview
Theme:
Use this template

Fields and controls

  • Fields are divided into sections and organized using Grid containers. Grid containers have a bg-secondary CSS class. Thus, the background of the container matches the primary theme color.
  • The general information is placed in a Grid container that has an order-info CSS class. PayPal buttons are placed in a Grid container that has a payment CSS class. PayPal buttons are hidden on the form load.
  • The form title has a bg-primary CSS class. Thus, the title background matches the primary color of the theme.
  • The Email field accepts only valid email addresses. Change the pattern in the field properties.
  • The Phone is a masked input field that accepts only 11-digit numbers. Change the mask in the field properties.
  • An HTML control is added with the PayPal buttons code snippet.

JavaScript

  • Items' prices are stored in merch variable. The Price column is populated dynamically when the Item column value changes.
  • The Price and the Total columns are read-only.
  • The Total field is disabled.
  • The totals for the row and the table are calculated automatically when the data table value changes.
  • Custom validation is added using the addValidator() method to ensure that the ItemsList table contains at least one record.
  • The function within beforeSave() event hides the container with an order-info class, shows the container with a payment class, and loads PayPal buttons. Variable amount holds the value of the Total field.

Styling

  • h1, h4 elements' text size is responsive to screen width and is set with the min() CSS function.
  • h1 element's content is centered, and the text color is white.
  • The primary button font-weight is set to 500, and the text color is white.
  • A pseudo-element is added before and after h4 elements to display horizontal lines.