Close

Credit card payment form with 4 different options

This is an example of a credit card payment form with 4 different options, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The card images are imported to the code with their URLs and used to create the payment options as radio buttons. JavaScript methods have been used to implement the functionality of the radio buttons and validate the formatted input of the card number. The background color of the form is set as #C5CAE9. The heading of the form is displayed using a font-size of 40px. The input text fields are given the styles of border as 1px solid lightgrey, border-radius as 6px, width as 100%, font-family as arial, font color as #2C3E50, font-size as 14px, and letter-spacing as 1px. In a focus event, the text fields take the styles of box-shadow as 0px 0px 0px 1.5px skyblue, font-weight as bold, and border as 1px solid #304FFE. Input text field labels are given the styles of line-height as 48px, font-size as15px, and font color as gray, which changes to #304FFE, in a focus event. The 'Pay' button is given a background color of #304FFE, which changes to #3F51B5, on hover. The radio buttons take a box-shadow of 0px 0px 0px 1px rgba(0, 0, 155, 0.4), and a border effect of 2px solid blue, in the selected mode. Source:https://bbbootstrap.com/snippets/credit-card-payment-form-4-different-options-47317865

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.