This is an example of a newsletter subscription form designed using HTML, CSS, and Bootstrap framework 4. Bootstrap styles and fonts are imported to the code with their URLs. The form is given the styles of display as table, width as 100%, padding as 27px 40px, background-color as #1c0c2b, margin-top as 45px, border-radius as 3px, and position as relative. The newsletter section has the styles of max-width as 835px, text-align as center, and padding as 27px 0 10p. The font family or form is set as "FontAwesome". The email input field is given the styles of background-color as transparent, width as 74%, margin-right as 25px, height as 47px, font-size as 14px, border-bottom as 1px solid rgba(255,255,255,.06), font color as #fff, and box-shadow as 0 0 0 1000px transperent inset. The submit button has the styles of height as 47px, width as 170px, border-radius as 5px, font-weight as 600,font-size as 15px, background-color as #fd226a, and font color as #fff. Source: https://www.tolmatol.com/newsletter-3/
This is a sample newsletter form with slide animations designed using HTML, CSS, and JavaScript. CSS style background image has been used to add the background image by providing the URL of the image. JavaScript is used to implement the click event for the given elements. Initially, the Subscribe button is hidden by adding the CSS style “display” with its value set to none. The fade-in and fadeout functions in JavaScript have been used to trigger the click event “Skip NewsLetter sub” and the slide-up and slide-down functions to display the slide animations in this example. Source: https://codepen.io/perikan/pen/pXNdxX
This is a template for a classic bootstrap newsletter signup web form, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given the styles of font-family as 'Open Sans', sans-serif, color as #9f9f9f, and a font-size of 15px. The header title is given he styles of color as #000, text-align as center, font-family as 'Raleway', sans-serif, font-weight as 800, font-size as 30px, and text-transform as uppercase to convert the text to uppercase automatically. The close button on top is given a font-size of 26px, the color of #c0c3c8, opacity of 0.5, which changes to 0.8 in a hover event. The subscribe button has the styles of color as #fff, background as #353535, transition as all 0.4s, and text-transform as uppercase, which changes its color to #171717 in a hover event. The "No thanks" button also changes its border from 2px solid to none, in a hover event.
This is another template for a bootstrap subscribe newsletter web form inside modal, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif whereas the form is given the styles color as #999, width as 625px, and font-size as 15px. The header title is given the styles of color as #000, font-size as 30px, and font-weight as bold. The close button on top is given a font-size of 24px, and opacity of 0.5, which changes to 0.8 in a hover event. The subscribe button is given the styles of color as #fff, background as #f95858; transition as all 0.4s, line-height as normal, padding as 6px 20px, and min-width as 150px. In a hover event, the color of the button changes to #f72222.
This is a template for a bootstrap subscribe newsletter web form inside modal, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement displaying functions. Bootstrap style sheets including the fonts and icons are imported to the form with their URLs. The body of the form is given a font-family of 'Varela Round', sans-serif whereas the form is given the styles color as #999, and font-size as 15px. The header title is given a style set of color as #000, text-align as center, font-size as 30px, margin as 0 0 25px, font-weight as bold, and text-transform as capitalize to make the first letter of each word capital. The close button on top is given a color of #c0c3c8, and an opacity of 0.5, which changes to 0.8 in a hover event. The color of the icon is set as #7265ea whereas the subscribe button has the styles of color as #fff, border-radius as 4px, background as #7265ea, and transition as all 0.4s. The background color of the icon changes to #4e3de4 in a hover event.