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.
Structure and logic of the form
-
The form content is organized with Grid containers. Use grids in a form design to simplify layout, ensure consistency, and enhance the user experience.
-
The Email field accepts only data matching a specified pattern to ensure valid email entries. Choose from predefined patterns or create custom ones to verify customer information.
-
The Phone field accepts only valid phone numbers. You can select which country's formats are accepted in the field properties.
-
An HTML control is added with the PayPal buttons code snippet.
JavaScript
-
Items' prices are stored in the 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 function within the saved() event hides the form and shows PayPal buttons. The variable total holds the value of the Total field.