This is an example of a bootstrap survey form which includes buttons and radio buttons, designed using HTML and CSS. The radio buttons in the same group are given the same name to avoid selecting multiple buttons at the same time. There are five types of radio buttons; Very Good, Good, Mediocre, Bad, and Very Bad which are assigned its color code. Very Good buttons are given a background and a border color of #2e7d32, Good are given a border and a background color of #64dd17, Mediocre are given a color of #ffea00, Bad are given the color of #ff9800 whereas Very Bad are given the background and border color of #d50000.
This is a template of a signup form layout, designed with CSS, HTML, and JavaScript. The toggle class of JavaScript has been used to toggle between adding and removing one or more class names. The logo has been added to the form with its image URL imported. The signup card has the styles of border as 1px solid #dadce0 and border-radius as .5rem whereas the logo has the styles of width: 75px, height: auto, margin-bottom: 1rem. The slogan is given the styles of color: #3c4043, font-weight: 500, and font-size: .875rem. The signup button is given the styles of border-width: 1px, font-weight: 500, font-size: .785rem, border-radius: .25rem and border-color: #dadce0 where it changes the style to background-color: #f6f9fe, and border-color: #d2e3fc in a hover event and background-color to #e4eefd, and border-color to #d2e3fc in a clicked event. The border color of the input fields also changes to #4285f4 in a clicked event.