Buy Now Pop-Up

[Alexandrbig1]

1. Modal Title

• The modal window should have a title that displays “BUY NOW” prominently at the top.

2. Form Elements

• Include a form within the modal that contains the following <input> elements:

  • First Name: A text input for the user's first name.
  • Last Name: A text input for the user's last name.
  • Email: An email input for the user's email address, ensuring proper email formatting.
  • Phone Number: A text input for the user's phone number, using a pattern to validate phone number formats.
  • Card Number: A text input for the user's credit/debit card number, with validation for card number formats.
  • Message: A text area for users to leave additional comments or requests.

• Implement minimum validation for each input field using the pattern attribute to ensure users provide valid data:

  • For the first name and last name, the pattern could require at least two characters.
  • For the email, use a standard email format pattern.
  • For the phone number, implement a pattern that allows only valid phone number formats (e.g., 10 digits).
  • For the card number, ensure it follows the correct format for credit/debit card numbers (e.g., 16 digits).
  • The message text area does not require a specific validation pattern but can have a character limit if desired.

3. Submit Button

• Include a “Submit” button of type submit that processes the form data.
• When the button is clicked, the modal should close, indicating to the user that the form has been submitted.

[Alexandrbig1]

@VictorManzanilla in html file, here, no need to add Doctype declaration etc...it's file already is loaded to the main index.html file. Just add everything inside on div container that was created for this file.