Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!
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ừ đó 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>
Bài viết: Tạo khung đăng ký Email bằng HTML CSS JS được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Tags:
Blog
Nhận xét
Đăng nhận xét
thế mới là hảo hán chứ
Trả lời Xóa:D
Trả lời Xóa