logo
StoreMy Account
search
ApplicationsEvaluationFeedback & SurveysHealthcareLegalOrdersReal EstateRegistrationsReportsRequestsReservationsTax

Online Order Form

This product order form will help you to sell products fast online. Gather all necessary information from a customer like full name, contact details, and 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

  • 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.