This is an example of a hotel booing modal, designed using HTML, CSS, and Bootstrap framework 4. The images are imported to the code with their URLs. The form consists of a modal button, which expands to the hotel booking form upon clicking on it. The body of the form is given a background color as #eee. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the child elements of the dropdown menu, in an orderly manner. The price of a room is displayed using a highlighted font. The no of days is given a font color as green. The date is given the styles of line-height as 17px, and margin-bottom as 8px. The 'Complete booking;' button is created as a danger type button. Most of the form text is displayed using a font-size of 12px. Source:https://bbbootstrap.com/snippets/bootstrap-complete-hotel-booking-modal-template-48147397

This is an example of a modal Contact Us form with floating labels, designed using CSS, HTML, and Bootstrap framework 4. The font style is imported to the code using its URL. The body of the form has the styles of background color as linear-gradient(0deg, #fff, 50%, RGB(210, 231, 252)), and font-family as 'Rubik', sans-serif. The font –size of the title is calculated using the calc(14px + (17 - 14) * ((100vw - 360px) / (1600 - 320))) formula. The cursor style for the modal is set as pointer to get the hand cursor effect on a hover event and the background color is set as #52B4DB. The input text fields are given a font-size of 15px, and opacity as 0.5. In a focus event, the font-size of the labels gets changed to 8px, and the font color gets changed to #04A79C, to create the effect of the floating label. In a focus event, the fields take the effects of border as 1px solid #04A79C, and box-shadow as 2px 2px rgba(233, 226, 226, 0.8). Source: https://bbbootstrap.com/snippets/contact-us-form-floating-labels-23481684

This is an example of a Contact Us form with a modal feature, designed using CSS, HTML, and Bootstrap framework 4. The font style and the background image is imported to the code with the URLs. The Contact Us form is created to be expanded by clicking on the modal button. The body of the form is given a background color of #eee, and a font-family style of 'Merriweather', serif. The text on the modal button is displayed with the styles of font-weight as 100, and font-size as 30p. The 'Send' button is given a background color of #000. The input text fields are given a border-bottom style of 1.5px solid #dae0e5, whereas the input text is displayed with the styles of opacity as 0.5, letter-spacing as 1px, and font-size as 90%. In a focus event, the text on input fields, change their styles to font color as #000, border-color as #fff, border-bottom as 1.5px solid #000, opacity as 1, and letter-spacing as 1px. Source: https://bbbootstrap.com/snippets/bootstrap-contact-us-form-section-31203496

This is an example of a modal that expands to a rating form with rating emoji's, designed using HTML, CSS, and Bootstrap framework 4. The emojis are imported to the code as images with their URLs and created as radio type buttons. The body of the form is given a font style of 300 18px/1.5 'Rubik', sans-serif, and background color as #BA68C8. The rating card is given a transition value as background 0.4s ease-out. The cursor style for the rating card is set as pointer to the get the hand cursor effect in a hover event and an animation style of levitate 1s ease-in-out infinite is also given to apply the levitating effect to the emojis. The emojis are also given a transform effect of scale(1.8), to be effective on a hover event. The responsiveness and the mobile-friendliness of the form have been increased with the use of media quarries. Source: https://bbbootstrap.com/snippets/rating-experience-modal-emojis-31937710

This is an example of a modal that expands to a form with multiple tabs, designed using HTML, JavaScript, CSS, and Bootstrap framework 4. The functionality of the tabs has been implemented by JavaScript methods, whereas media quarries have been used to increase the responsiveness of the form. The body of the form is given a background color as #D1C4E9. The modal function is created by setting the value of data-toggle as modal in HTML. The input text fields take the border style of 1px solid #2196F3, and font-weight of 400, in a focus event. The tabs take a border-bottom effect of 1px solid #2196F3, in a hover event. The 'popular topics' list turns its font color to #1565C0, in hover. The cursor style for the tabs is set as pointer to get the hand cursor effect in a hover event. The button is created as primary type buttons. Source: https://bbbootstrap.com/snippets/modal-multiple-tabs-89860645

This is an example of a modal that expands to a multi-level payment form, designed using JavaScript, CSS, HTML, and Bootstrap framework 4. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the child elements of the payment steps, in an orderly manner. The modal function is created by setting the value of data-toggle as modal in HTML, whereas the progress of the arrow transitions is implemented with JavaScript functions. The body of the form is given a background color of #eee. The input text fields take the styles of font color as #495057, background-color as #fff, border-color as #80bdff, and box-shadow as 0 0 0 0rem rgba(0, 123, 255, .25), in a hover event. The 'Next' and 'Previous' buttons take the box-shadow effect of 0 0 0 0rem rgba(108, 117, 125, .5), in a focus event. Source:https://bbbootstrap.com/snippets/modal-dialog-form-wizard-arrows-transitions-86436904