Modal contact us form with floating labels
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).