logo
Documents & Forms
Microsoft 365 & SharePoint Tools
Classic SharePoint Tools

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.

Preview
Theme:
Use this template

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.

JavaScript

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

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 and the light buttons font-weight is set to 500.