Subscribe to our newsletter

by rity

HTML

<div style="width: 250px; background-color: #ff0000;">
<div id="mlb2-2019681" class="ml-subscribe-form ml-subscribe-form-2019681">
    <div class="ml-vertical-align-center">
        <div class="subscribe-form ml-block-success" style="display:none">
            <div class="form-section">
                <p>Thank you! You have successfully subscribed to our newsletter.</p>
            </div>
        </div>
        <form class="ml-block-form" action="//app.mailerlite.com/webforms/submit/v6c6t0" data-code="v6c6t0" method="POST" target="_blank">
            <div class="subscribe-form">
                <div class="form-section">
                        <p>Signup for news and special offers!</p>
                </div>
                <div class="form-section">
                    <div class="form-group ml-field-name ml-validate-required">
                        <input type="text" name="fields[name]" class="form-control-name" placeholder="Name*" value="" style="float: left;">
                        <input type="text" name="fields[last_name]" class="form-control-name" placeholder="Last name*" value="" style="float: right;">
                        <div style="clear: both;"></div>
                    </div>
                    <div class="form-group ml-field-email ml-validate-required ml-validate-email">
                        <input type="email" name="fields[email]" class="form-control" placeholder="Email*" value="">
                    </div>
                </div>
                <input type="hidden" name="ml-submit" value="1" />
                <button type="submit" class="primary gradient-on">
                    Subscribe
                </button>
                <button disabled="disabled" style="display: none;" type="button" class="loading gradient-on">
                    <img src="//static.mailerlite.com/images/rolling.gif" width="20" height="20" style="width: 20px; height: 20px;">
                </button>
            </div>
        </form>
        <script>
 ...

CSS

#mlb2-2019681,
    #mlb2-2019681 *,
    #mlb2-2019681 a:hover,
    #mlb2-2019681 a:visited,
    #mlb2-2019681 a:active {
        overflow: visible;
        position: static;
        background: none;
        border: none;
        bottom: auto;
        clear: none;
        cursor: default;
        float: none;
        font-size: medium;
        letter-spacing: normal;
        line-height: normal;
        text-align: left;
        text-indent: 0;
        text-transform: none;
        visibility: visible;
        white-space: normal;
        max-height: none;
        max-width: none;
        left: auto;
        min-height: 0;
        min-width: 0;
        right: auto;
        top: auto;
        width: auto;
        z-index: auto;
        text-shadow: none;
        box-shadow: none;
    }

    #mlb2-2019681 h4 {
        font-weight: normal;
    }

    #mlb2-2019681 .subscribe-form {
        width: 100%!important;
        padding: 0px;
        border: 0px solid #bababa!important;
        -webkit-border-radius: 0px!important;
        -moz-border-radius: 0px!important;
        border-radius: 0px!important;
    }

    #mlb2-2019681 .subscribe-form .form-section {
        margin-bottom: 10px;
    }

    #mlb2-2019681 .subscribe-form .form-section h4 {
        margin: 0px 0px 10px 0px;
        padding: 0px!important;
        color: #bababa!important;
        font-size: 20px!important;
        line-height: 100%;
    }

    #mlb2-2019681 .subscribe-form .form-section p {
        line-height: 100%;
        padding: 0px!important;
        margin: 0px 0px 0px 0px;
        color: #ffffff!important;
        font-size: 13px!important;
    }

    #mlb2-2019681 .subscribe-form .form-section .confirmation_checkbox {
        line-height: 100%;
        padding: 0px!important;
        margin: 0px 0px 0px 0px;
        margin-bottom: 10px!important;
        color: #000000!important;
        font-size: 12px!important;
        font-weight: normal !important;
    }

    #mlb2-2019681...