Online Order Form

Fields and controls

• The fields are divided into sections and organized using Grid containers. Child grids with Customer and Shipping details have bg-secondary CSS class for filling the background with the secondary color from the current theme.
• The entire form is placed into a Grid container with fd-order-form CSS class. PayPal buttons are placed into a Grid container with fd-payment-form CSS class and hidden by default with custom CSS code.
• A cell with the form header has bg-primary CSS class to fill the background with the primary color from the theme.
• The Email field accepts only valid email addresses. Change the pattern in the field properties.
• The Phone is a masked input 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 products 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 saved() event hides the form and shows PayPal buttons. Variable total 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's 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.