Follow by Email Form

.fbe-icon {
    text-align: center
}

.fbe-icon svg {
    width: 50px;
    height: 50px
}

.fbe-text {
    text-align: center;
    font-size: 17px;
    color: #666
}

.fbe {
    margin-bottom: 20px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc
}

.fbe form {
    margin-top: 20px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative
}

.fbe form::before {
    content: '';
    display: inline-block;
    position: relative;
    top: 7px;
    left: 15px;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'></path></svg>") no-repeat
}

.fbe form .fbe-address {
    border: 0;
    outline: 0;
    font-size: 15px;
    width: calc(100% - 110px);
    background: transparent;
    display: block;
    padding-bottom: 2px
}

.fbe form .fbe-submit {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 45px;
    background: #008c5f;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 2px;
    border: 0;
    border-radius: 0 50px 50px 0;
    cursor: pointer
}

.fbe-social {
    display: table;
    max-width: 100%;
    margin: auto
}

.fbe-social a {
    text-decoration: none;
    cursor: pointer
}

.fbe-social a:hover i {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    -webkit-transform: scale(1.2) translateY(-10px);
    transform: scale(1.2) translateY(-10px)
}

.fbe-social a i {
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    background: #ccc;
    margin: 0 7px;
    width: 35px;
    line-height: 35px;
    height: 35px;
    color: #fff;
    -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.4)
}

.fbe-social a i.f-facebook {
    background: #3b5998
}

.fbe-social a i.f-twitter {
    background: #1da1f2
}

.fbe-social a i.f-linkedin {
    background: #0077b5
}

.fbe-social a i.f-youtube {
    background: #ff0000
}

.fbe-social a i.f-instagram {
    background: #833ab4
}</style>

 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"></link>
<div class="widget-content">
    <div class="fbe">
        <div class="fbe-header">
            <div class="fbe-icon">
                <svg fill="#008c5f" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z"></path></svg>
            </div>
            <div class="fbe-text">
                Get the lastest articles every day
            </div>
        </div>
        <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;https://feedburner.google.com/fb/a/mailverify?uri=Hung1001ThThutQunLChuynSu&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true"
            target="popupwindow">
            <input autocomplete="off" class="fbe-address" name="email" placeholder="Email Address ..." required="" type="email">
            <button class="fbe-submit" type="submit"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z" fill="#fff"></path></svg></button>
            <input name="uri" type="hidden" value="Hung1001ThThutQunLChuynSu">
            <input name="loc" type="hidden" value="en_US">
        </form>
    </div>
    <div class="fbe-social">
        <a class="fbe-facebook" href="#"><i class="fab fa-sm fa-facebook f-facebook"></i></a>
        <a class="fbe-twitter" href="#"><i class="fab fa-sm fa-twitter f-twitter"></i></a>
        <a class="fbe-linkedin" href="#"><i class="fab fa-sm fa-linkedin f-linkedin"></i></a>
        <a class="fbe-youtube" href="#"><i class="fab fa-sm fa-youtube f-youtube"></i></a>
        <a class="fbe-instagram" href="#"><i class="fab fa-sm fa-instagram f-instagram"></i></a>
    </div>
</div>
        <style>.widget-content {
    width: 500px;
    margin: auto;
}