Gift Card Order Form
Allow your customers to order or purchase a gift card online with our 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.
Preview
Theme:
Fields and controls
- Fields are divided into sections and organized using Grid containers. The general information is placed in a cell with fd-gift-form CSS class. PayPal buttons are placed in a cell with fd-payment-form CSS class. PayPal buttons are hidden by default.
- The title of the form has bg-primary CSS class which sets the background color to the primary color of the theme.
- The Amount field is required.
- Custom buttons represent gift amount. The highlightSelectedAmount() function highlighes a button with corresponding amount.
- An HTML control is added with the PayPal buttons code snippet.
JavaScript
- Click handlers of the gift buttons populate the Amount field.
- The highlightSelectedAmount() function is called each time the Amount field changes and on the form load and highlights the selected amount.
- The function within saved() event hides the form and shows PayPal buttons. Variable giftAmount holds the value of the Amount field.
Styling
- Styles for h1 and h6 elements are defined in the CSS-editor.
- The success message is hidden.
- The primary and the gift buttons' font-weight is set to 500 via the Style property.