Tạo Biểu Mẫu Liên Hệ Cực Cuốn Hút Trên Blogger

Một người nào đó cần bạn giúp đỡ, họ biết bạn qua Blog, nhưng họ không có những tài khoản Mạng xã hội như Facebook, Zalo, Instagram,...Bạn đang thắc mắc làm sao để họ có thể liên lạc qua bạn ? Nếu bạn gặp bài viết này thì bạn may mắn rồi đấy! Mình sẽ hướng dẫn các bạn tạo form liên hệ cực cuốn hút. Theo dõi nhé!

Tạo Biểu Mẫu Liên Hệ Cực Cuốn Hút Trên Blogger

Các Bước Thực Hiện

Chú ý!
Trước khi thực hiện, vui lòng sao lưu chủ đề của các bạn để tránh gặp tình trạng lỗi và dễ dàng khôi phục, mình không chịu trách nhiệm.

Các bạn có thể xem demo dưới đây:

Bước 1:

  • Hãy vào Blogger => Trang => Tạo trang mới.

  • Vào Trang => Tạo Trang Mới

Bước 2: 

  • Hãy sao chép toàn bộ mã được cung cấp dưới đây nhé, nhớ là chuyển qua chế độ soạn thảo html để dán mã vào nhé.

  • Chế độ soạn thảo html => Chèn toàn bộ code dưới

Liên hệ hợp tác quảng cáo, trao đổi liên kết hoặc yêu cầu trợ giúp<br />

<div class='gia-huy-net' id='ContactForm1'>

<form name='ContactForm'>

<div class='gh-dt-inp icon-user'>

<input id='ContactForm1_contact-form-name' name='name' placeholder='Tên' type='text'/>

<label>Tên</label>

</div>

<div class='gh-dt-inp icon-email'>

<input id='ContactForm1_contact-form-email' name='email' placeholder='Email' type='text'/>

<label>Email</label>

</div>

<div class='gh-dt-inp icon-msg'>

<textarea id='ContactForm1_contact-form-email-message' name='message' placeholder='Nội dung' rows='3'></textarea>

<label>Nội dung</label>

</div>

<div class='gh-dt-inp outset'>

<input id='ContactForm1_contact-form-submit' type='button' value='Submit'/>

</div>

<div class='gh-knt-notif'>

<div id='ContactForm1_contact-form-error-message'></div>

<div id='ContactForm1_contact-form-success-message'></div>

</div>

</form>

</div>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>

<script>

if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {

    window['blogger_templates_experiment_id'] = 'templatesV1';

    window['blogger_blog_id'] = '0000000000000000000';

    BLOG_attachCsiOnload('');

}

_WidgetManager._Init('//www.blogger.com/rearrange?blogID\0000000000000000000', '//www.giahuy.net/', '0000000000000000000');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {

    'contactFormMessageSendingMsg': 'Gửi...',

    'contactFormMessageSentMsg': 'Tin nhắn của bạn đã được gửi..',

    'contactFormMessageNotSentMsg': 'Không thể gửi tin nhắn. Vui lòng thử lại sau.',

    'contactFormInvalidEmailMsg': 'Một địa chỉ email hợp lệ.',

    'contactFormEmptyMessageMsg': 'Trường tin nhắn không được để trống.',

    'title': 'Contact Form',

    'blogId': '0000000000000000000',

    'contactFormNameMsg': 'Name',

    'contactFormEmailMsg': 'Email',

    'contactFormMessageMsg': 'Message',

    'contactFormSendMsg': 'Send',

    'submitUrl': 'https://www.blogger.com/contact-form.do'

}, 'displayModeFull'));

  

var inputs = document.querySelectorAll('.gh-dt-inp input[type=text], .gh-dt-inp input[type=email], .gh-dt-inp textarea');

for (var i = 0; i < inputs.length; i++) {

    var input = inputs[i];

    input.addEventListener('input', function() {

        var bg = this.value ? 'show' : 'none';

        this.setAttribute('class', bg);

    });

}

</script>

<style>

/* CSS blogger contact form */

.gia-huy-net{position:relative;display:inline-block;width:100%;max-width:500px;padding:30px 10px 10px 10px;background-color:#f2f3f7;border-radius:10px}

.gh-dt-inp{position:relative;margin-bottom:30px;margin-right:5px}

.gh-dt-inp input[type=text]::placeholder,.gh-dt-inp textarea::placeholder{color:#999!important;font-size:14px}

.gh-dt-inp input:focus::placeholder,.gh-dt-inp textarea:focus::placeholder {color: transparent!important}

.gh-dt-inp label{border-radius:10px;color:#999;font-size:12px;font-weight:400;position:absolute;pointer-events:none;left:30px;top:-15px;transition:.2s ease all;padding:0 10px;background-color:#f2f3f7;box-shadow:-3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);display:none}

.gh-dt-inp input[type=text]:focus + label,.gh-dt-inp input[type=text].show + label,.gh-dt-inp textarea:focus + label,.gh-dt-inp textarea.show + label{display:block;}

.gh-dt-inp input[type=text],.gh-dt-inp textarea,.gh-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%);padding:15px 15px 15px 40px;border-radius:5px;border:none;outline:none;width:100%}

.gh-dt-inp.outset input[type=button]{background-color:#f2f3f7;box-shadow: -3px -2px 4px rgb(255 255 255 / 90%), 5px 5px 8px rgb(0 0 0 / 7%);width: 100px;text-align: center;padding-left:15px;margin: -50px auto;color:#999;font-weight:bold}

.gh-dt-inp.outset input[type=button]:active {box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(0 0 0 / 7%), inset -0.2rem -0.2rem 0.5rem rgb(255 255 255 / 90%)}

.gh-dt-inp input[type=text]:active,.gh-dt-inp input[type=text]:focus,.gh-dt-inp textarea:active,.gh-dt-inp textarea:focus{outline:none}

.gh-knt-notif{color:#ff0000} 

.gh-dt-inp.icon-user:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'></path></svg>") center / contain no-repeat}

.gh-dt-inp.icon-email:before{content:"";position:absolute;left:10px;top:0;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><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'></path></svg>") center / contain no-repeat}

.gh-dt-inp.icon-msg:before{content:"";position:absolute;left:10px;top:-50px;bottom:0;width:20px;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 24 24' fill='%23aaaaad'><path d='M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H10V20.09L12.09,18H6V16H14.09L16.09,14H6V12H18.09L20,10.09V8L14,2H6M13,3.5L18.5,9H13V3.5M20.15,13C20,13 19.86,13.05 19.75,13.16L18.73,14.18L20.82,16.26L21.84,15.25C22.05,15.03 22.05,14.67 21.84,14.46L20.54,13.16C20.43,13.05 20.29,13 20.15,13M18.14,14.77L12,20.92V23H14.08L20.23,16.85L18.14,14.77Z'></path></svg>") center / contain no-repeat}

  

/* CSS dark mode adjust class */

.drK .gia-huy-net,.drK .gh-dt-inp label,.drK .gh-dt-inp input[type=text],.drK .gh-dt-inp textarea,.drK .gh-dt-inp.outset input[type=button]{background-color:#2d2d30;color:#aaaaad}

.drK .gh-dt-inp input[type=text],.drK .gh-dt-inp textarea,.drK .gh-dt-inp.outset input[type=button]:active{box-shadow: inset 0.2rem 0.2rem 0.5rem rgb(36 36 36), inset -0.2rem -0.2rem 0.5rem rgb(32 32 32)}

.drK .gh-dt-inp.outset input[type=button],.drK .gh-dt-inp label{box-shadow:-3px -2px 4px rgb(36 36 36), 5px 5px 8px rgb(32 32 32)}

</style>

Lưu ý!
Những chỗ có 0000000000000000000 các bạn thay hết bằng Id Blog của các bạn, www.giahuy.net các bạn thay địa chỉ Blog của các bạn luôn nhé.

Nếu các bạn vào Email mà chưa thấy thư thì các bạn vào thư spam (thư rác) rồi kiểm tra, sau đó báo cáo không phải spam thì lần sau nó sẽ không nằm ở thư rác nữa.

Lời Kết

Nếu bài viết này giúp một ít vào Blog của các bạn, hãy chia sẻ nó cho bạn bè cùng xem nhé. Chúc bạn xem được bài viết này có một ngày học tập và làm việc hiệu quả!

Tham khảo: www.wendycode.com