Gift Card Order Form
Ordering a gift card has never been so easy. Try out a gift certificate order form. The form asks a customer to select the value of a gift card from a predefined list, the names and contacts of the customer and recipient, and the shipping address. The PayPal payment gateway is integrated into the form. A customer can proceed with the payment instantly after submitting the gift card request.
Fields and controls
- Fields are divided into sections and organized using Grid containers. 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 form load.
- The form title has a bg-primary CSS class. Thus, the title background matches the primary color of the theme.
- The Amount field is required.
- The Email and the RecipientEmail fields accept only valid email addresses. Change the pattern in the field properties.
- Custom buttons represent donation amounts. The changeButtonColor() function is called on a button click.
- An HTML control is added with the PayPal buttons code snippet.
- The changeButtonColor() function populates the Amount field with the selected amount and adds a bg-primary class to the selected button. The function is defined globally to make it available on the form.
- The function within beforeSave() event hides the container with an order-info CSS class, shows the container with a payment CSS class, and loads PayPal buttons. Variable amount holds the value of the Amount field.
- 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 and the light buttons font-weight is set to 500.