This is an example of a contact us form, designed using HTML, CSS, and Bootstrap framework 4. The body of the form is given a background color of #ffffff, whereas the information card is given a style set of padding as 8%, padding-top as 35px, margin-top as 60px, and margin-bottom as 80px. The input text fields are given the styles of background-color as #616161, border-color as #616161, and font color as #BDBDBD. In a focus event, the input fields take the color of background-color as #000000, and font color as #BDBDBD. The border color of the fields also takes the background color as it inherits the color from the background. The email text field is given a height of 45px, whereas the message text field is given the height of 120px. The 'Submit' button is created as a Submit type button and given a background color of #5C6BC0, and font color of #ffffff.
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).