Styling a newsletter signup


by Jeremy Caudle
code

I have a grand vision for a newsletter signup that subtley or audaciously animates as the user fills out their email form and then clicks on the sign up button that becomes enabled once their email is validated. Today's test build is a decent starting point.

View the code:

HTML and JS 
<div class="code-block">
            <div class="newsletter-signup-block">
                <h3>Sign up for my newsletter</h3>
                <p class="newsletter-info">Curated <span>links</span>, <span>tips</span>, <span>updates</span>, and <span>more</span>.</p>
                <form>
                    <ul>
                        <li><label for="email-input">Email</label></li>
                        <li><input type="text" id="email-input"></li>
                        <li><button id="signup-button" disabled>Sign Up</button></li>
                    </ul>
                </form>
                <p class="privacy-statement">Privacy Commitment - Your email will be never be shared or used for any other purpose.</p>
                <form>


                </form>
            </div>
        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------
                const emailInput = document.querySelector('#email-input');
                const signupButton = document.getElementById('signup-button');

            // ---------
            // Functions
            // ---------
        
            function monitorEmail() {
                    let emailRegEx = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; /* Thanks Neeraj Chaurasia for this regex. http://in.linkedin.com/in/neerajchaurasias */
                    if(emailInput.value.match(emailRegEx)){
                        signupButton.removeAttribute('disabled');
                        signupButton.setAttribute('class', 'valid-email');
                    }
                }

            // ---------        
            // Events
            // ---------
 
            emailInput.value = "";
            signupButton.setAttribute('disabled',"");

            emailInput.addEventListener('input', monitorEmail);
        
        </script>
CSS 
@font-face {
                font-family: "Blinker";
                src: url("assets/fonts/Blinker_variable.ttf") format("truetype");
                font-style: normal;
                font-variation-settings: 'wght' 70;
                font-optical-sizing: auto;
            }

            .code-block {
                font-family: "Blinker", Helvetica, Arial, sans-serif;
                margin: 0 auto;
            }

            .newsletter-signup-block {
                background-color: #020202;
                padding: 1rem;
            }

            .newsletter-signup-block h3 {
                margin: 0 0 1rem 0;
                text-align: center;
                color: rgb(255, 196, 0);
                font-size: 1.5rem;
                font-variation-settings: 'wght' 140;
            }

            .newsletter-signup-block p {
                margin: auto auto;
                font-size: 1em;
                max-width: 65ch;
                color: #ddd;
                text-align: center;
            }

            .newsletter-signup-block p.privacy-statement {
                color: rgb(255, 196, 0);
                font-variation-settings: 'wght' 60;
                max-width:40ch;
                font-size: .75rem;
            }

            .newsletter-signup-block ul {
                max-width: 65ch;
                list-style: none;
                margin: 1rem auto;
                padding-left: 0;
                color: white;
                text-align: center;
            }

            .newsletter-signup-block ul li {
                display: inline-block;
            }

            .newsletter-signup-block label {
                margin-right: .5rem;
                font-size:1rem;
                min-height: 1.5rem;
            }

            .newsletter-signup-block input {
                margin-right: .5rem;
                font-size:1rem;
                min-height: 1.5rem;
                border: solid 1px transparent;
                border-radius: .5rem;
                text-align: center;
                transition: border .25s ease-out;
            }

            .newsletter-signup-block input:hover, .newsletter-signup-block input:focus {
                border: solid 1px rgb(255, 196, 0);
            }

            .newsletter-signup-block button {
                font-size:.8rem;
                border: none;
                min-height: 1.5rem;
                color: #aaa;
                background-color: white;
                border-radius: .5rem;
                padding: .1rem .5rem;
                transition: color .5s ease-out, background-color .5s ease-out, box-shadow .5s ease-out;
            }

            .newsletter-signup-block button[disabled] {
                opacity: .2;
            }

            .newsletter-signup-block button.valid-email {
                background-color: greenyellow;
                color: black;
            }

            .newsletter-info span:nth-of-type(odd) {
                text-decoration: underline;
            }
            
            .newsletter-info span:nth-of-type(even) {
                font-weight: bold;
            }

              @supports (display:flex) {
                .newsletter-signup-block ul {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                }

                .newsletter-signup-block ul li {
                    display: block;
                }
                
            }

Tags