Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Home
Blog

Tạo khung đăng ký Email bằng HTML CSS JS

3 min read
Sau đây mình hướng dẫn các bạn Tạo khung đăng ký Email bằng HTML CSS JS đơn giản hiệu ứng đẹp, giúp cho khách hàng hay độc giả để lại email trên trang web của bạn.

Tạo khung đăng ký Email bằng HTML CSS JS

Từ đó giúp cho bạn việc thu thập các email đơn giản trong quá trình  tiếp thị email marketing, các khách hàng tiềm năng giúp bạn bán hàng, quảng bá sản phẩm tới những email đó.

Các bước làm như sau:

Bước 1: Thêm thư viện jQuery trong thẻ <head>

Nếu blogspot hoặc trang web của bạn có sử dụng rồi thì bỏ qua bước này, vì đa số blog hoặc trang web đều sử dụng thư viện này rồi.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>

Bước 2: Thêm CSS

Nếu là blogspot các bạn copy dán trước thẻ đóng </b:skin>

:root{--color-first:#65587f;--color-second:#f18867;--color-third:#e85f99;--color-forth:#50bda1;--block-width:300px;--block-height:270px;--border-width:.625rem;--border-radius-outer:8px;--border-radius-inner:calc(var(--border-radius-outer) / 2);--font-plain:"IBM Plex Sans",sans-serif;--font-special:"Fredoka One",sans-serif;box-sizing:border-box;line-height:1.4}
*,*:before,*:after{box-sizing:inherit}
.newsletter-hoatranblog{background:#fff;color:#5e5e5e;font-family:var(--font-plain);height:90vh;display:flex;justify-content:center;align-items:center}
.rainbow{width:100%;height:100%;-webkit-animation:o-rotate-360 linear 8s infinite;animation:o-rotate-360 linear 8s infinite}
.rainbow span{display:block;width:100%;height:100%;position:relative;transform:translate(-50%,-50%)}
.rainbow span:after{display:block;content:"";width:100%;height:100%;position:absolute;left:100%}
.rainbow span:first-child{background:var(--color-first)}
.rainbow span:first-child:after{background:var(--color-second)}
.rainbow span:last-child{background:var(--color-third)}
.rainbow span:last-child:after{background:var(--color-forth)}
.c-subscribe-box{width:var(--block-width);height:var(--block-height);overflow:hidden;position:relative;box-shadow:0 10px 40px -10px rgba(0,64,128,0.2);border-radius:var(--border-radius-outer)}
.c-subscribe-box__wrapper{width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:1.2rem 1rem 1.8rem;display:flex;flex-direction:column;border-radius:var(--border-radius-inner)}
.c-subscribe-box__title{font-size:1.6rem}
.c-subscribe-box__desc{font-size:0.935rem;margin:0.7rem auto 1.8rem;max-width:240px}
.c-subscribe-box__form{margin-top:auto}
.c-form--accent input:hover,.c-form--accent input:active,.c-form--accent input:focus{border-color:var(--color-third);box-shadow:0 0 0 3px rgba(232,94,152,0.25)}
.c-form--accent [type=submit]{background:var(--color-third);border-color:var(--color-third);color:#fff;border:none}
@-webkit-keyframes o-rotate-360{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes o-rotate-360{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
[type=submit]{margin-bottom:0;font-family:var(--font-special);font-weight:normal;letter-spacing:0.015em;font-size:1.1rem}
[type=submit]:active{transform:scale(0.97)}
[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],[type=week],[type=time],select,textarea{display:block;border:1px solid #dedede;border-radius:4px;padding:0.75rem;outline:none;background:transparent;margin-bottom:0.5rem;font-size:1rem;width:100%;max-width:100%;line-height:1}
.button,a.button,button,[type=submit],[type=reset],[type=button]{text-transform:none;padding:0.75rem 1.25rem;margin:0 0 0.5rem 0;vertical-align:middle;text-align:center;cursor:pointer;text-decoration:none;line-height:1}
.full-button,a.full-button{display:block;width:100%}
input{font-family:inherit;color:inherit;outline:none;font-size:93%;transition:all 300ms ease}
h3{margin:0;letter-spacing:-0.015em;font-family:var(--font-special);font-weight:normal;line-height:1.4}
.u-align-center{text-align:center}
.hidden{display:none}      

Bước 3: Thêm HTML vào vị trí muốn hiển thị


<div class="newsletter-hoatranblog">
  <div class="c-subscribe-box u-align-center">
    <div class="rainbow"><span></span><span></span></div>
    <div class="c-subscribe-box__wrapper">
      <h3 class="c-subscribe-box__title">Join my newsletter</h3>
      <p class="c-subscribe-box__desc">You like articles of the blog? Sign up for updates via email.</p>
      <form class="c-form c-form--accent c-subscribe-box__form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf3KpelLaCs_vqaDfUUIz8v625JVZMgjUnXnhBaiDoITN4Qbg/formResponse" target="hidden_iframe" method="post">
        <input class="u-align-center" type="email" placeholder="hotro@giaodien.blog" name="entry.2050124040" />
        <input class="full-button" type="submit" value="Subscribe" />
      </form>
      <p class="descNewsletter"></p>
      <iframe class="hidden" id="hidden_iframe" name="hidden_iframe"></iframe>
    </div>
  </div>
</div>


Bước 4: Thêm đoạn Javascript trước thẻ đóng </body> 

Code xử lý khi nhấn Submit form

<script>
  //<![CDATA[
  $(".c-subscribe-box").each(function() {
    $("form").submit(function() {
      $("form.c-subscribe-box__form").toggle();
      $("p.descNewsletter").html('Bạn đã đăng ký email thành công!');
    })
  })
  //]]>
</script>


Bước 5: Các bạn căn chỉnh lại CSS cho phù hợp với trang web của bạn

Bước 6: Cài Google form để nhận dữ liệu xem video


https://www.youtube.com/watch?v=0WapbSqM43I


Bạn nào dùng Google Site thì sử dụng code dưới, copy dán vào mã HTML


<div class="newsletter-hoatranblog">
  <div class="c-subscribe-box u-align-center">
    <div class="rainbow"><span></span><span></span></div>
    <div class="c-subscribe-box__wrapper">
      <h3 class="c-subscribe-box__title">Join my newsletter</h3>
      <p class="c-subscribe-box__desc">You like articles of the blog? Sign up for updates via email.</p>
      <form class="c-form c-form--accent c-subscribe-box__form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSf3KpelLaCs_vqaDfUUIz8v625JVZMgjUnXnhBaiDoITN4Qbg/formResponse" target="hidden_iframe" method="post">
        <input class="u-align-center" type="text" placeholder="Nhập số ĐT" name="entry.2050124040" />
        <input class="full-button" type="submit" value="Gửi" />
      </form>
      <p class="descNewsletter"></p>
      <iframe class="hidden" id="hidden_iframe" name="hidden_iframe" style="display:none"></iframe>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(".c-subscribe-box").each(function() {
    $("form").submit(function() {
      $("form.c-subscribe-box__form").toggle();
      $("p.descNewsletter").html('Bạn đã đăng ký email thành công!');
    })
  })
</script>
<style>
:root{--color-first:#65587f;--color-second:#f18867;--color-third:#e85f99;--color-forth:#50bda1;--block-width:300px;--block-height:270px;--border-width:.625rem;--border-radius-outer:8px;--border-radius-inner:calc(var(--border-radius-outer) / 2);--font-plain:"IBM Plex Sans",sans-serif;--font-special:"Fredoka One",sans-serif;box-sizing:border-box;line-height:1.4}
*,*:before,*:after{box-sizing:inherit}
.newsletter-hoatranblog{background:#fff;color:#5e5e5e;font-family:var(--font-plain);height:90vh;display:flex;justify-content:center;align-items:center}
.rainbow{width:100%;height:100%;-webkit-animation:o-rotate-360 linear 8s infinite;animation:o-rotate-360 linear 8s infinite}
.rainbow span{display:block;width:100%;height:100%;position:relative;transform:translate(-50%,-50%)}
.rainbow span:after{display:block;content:"";width:100%;height:100%;position:absolute;left:100%}
.rainbow span:first-child{background:var(--color-first)}
.rainbow span:first-child:after{background:var(--color-second)}
.rainbow span:last-child{background:var(--color-third)}
.rainbow span:last-child:after{background:var(--color-forth)}
.c-subscribe-box{width:var(--block-width);height:var(--block-height);overflow:hidden;position:relative;box-shadow:0 10px 40px -10px rgba(0,64,128,0.2);border-radius:var(--border-radius-outer)}
.c-subscribe-box__wrapper{width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:1.2rem 1rem 1.8rem;display:flex;flex-direction:column;border-radius:var(--border-radius-inner)}
.c-subscribe-box__title{font-size:1.6rem}
.c-subscribe-box__desc{font-size:0.935rem;margin:0.7rem auto 1.8rem;max-width:240px}
.c-subscribe-box__form{margin-top:auto}
.c-form--accent input:hover,.c-form--accent input:active,.c-form--accent input:focus{border-color:var(--color-third);box-shadow:0 0 0 3px rgba(232,94,152,0.25)}
.c-form--accent [type=submit]{background:var(--color-third);border-color:var(--color-third);color:#fff;border:none}
@-webkit-keyframes o-rotate-360{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes o-rotate-360{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
[type=submit]{margin-bottom:0;font-family:var(--font-special);font-weight:normal;letter-spacing:0.015em;font-size:1.1rem}
[type=submit]:active{transform:scale(0.97)}
[type=color],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=url],[type=week],[type=time],select,textarea{display:block;border:1px solid #dedede;border-radius:4px;padding:0.75rem;outline:none;background:transparent;margin-bottom:0.5rem;font-size:1rem;width:100%;max-width:100%;line-height:1}
.button,a.button,button,[type=submit],[type=reset],[type=button]{text-transform:none;padding:0.75rem 1.25rem;margin:0 0 0.5rem 0;vertical-align:middle;text-align:center;cursor:pointer;text-decoration:none;line-height:1}
.full-button,a.full-button{display:block;width:100%}
input{font-family:inherit;color:inherit;outline:none;font-size:93%;transition:all 300ms ease}
h3{margin:0;letter-spacing:-0.015em;font-family:var(--font-special);font-weight:normal;line-height:1.4}
.u-align-center{text-align:center}
.hidden{display:none}
</style>

You may like these posts

  • Hướng dẫn code Ajax Breaking New cho blogger
    Bài viết này mình Hướng dẫn code Ajax Breaking New cho blogger phù hợp làm mục tin Hot, trending, bài viết mới, bài viết theo danh mục nhãn.Demo Breaking News Các bư…
  • Tiện ích liên hệ zalo gọi điện
    Thêm một Tiện ích liên hệ zalo gọi điện cho trang web hoặc blogspot, tiện ích hiển thị đẹp bao gồm zalo, messenger, gọi điện và maps.Blogspot của bạn đang bán hàng hoặc làm dị…
  • Tiện ích liên hệ Zalo Messenger
    Chia sẻ mẫu Tiện ích liên hệ Zalo Messenger Gọi điện đẹp, nút Zalo rung lắc phù hợp với nhiều blogspot bán hàng, tư vấn dịch vụ.Tiện ích liên hệ Zalo Messenger hiện thị cố địn…
  • Hướng dẫn đổi link ảnh blogger về mặc định
    Hướng dẫn đổi link ảnh blogger về mặc định, cụ thể là từ link dạng blogger.googleusercontent.com về link cũ thường dùng có dạng 1.bp.blogspot.com.Google lại tiếp tục đưa …
  • Nút gọi điện rung lắc cho blogger
    Chia sẻ tiện ích Nút gọi điện rung lắc cho blogger blogspot đẹp, phù hợp với blogspot bán hàng, bất động sản, dịch vụ chăm sóc khách hàng.Nút gọi điện rung lắc cho blogger cài…
  • Tiện ích Contact cho blogspot
    Chia sẻ tới các bạn đang dùng mẫu template blogspot một Tiện ích Contact cho blogspot đẹp hiện đại, phù hợp cho blgospot bán hàng, tư vấn dịch vụ.Tiện ích Contact cho blogspot…

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Learn More