Tạo trang liên hệ trên blogger

Tạo trang liên hệ trên blogger

Bài biết này mình sẻ hướng dẫn các bạn tạo form liên hệ cho admin trên nền tảng blog. Trao đổi ý kiến có khi là một việc rất cần thiết đối với đọc giả và người quản trị blog. Bởi vì thực tế có nhiều vấn đề đòi hỏi cả hai bên phải trực tiếp trao đổi với nhau mà không thông qua bên thứ ba nào khác.

Và như bạn đã biết, với tiện ích liên hệ có sẵn của blogger, chỉ vài thao tác đơn giản và trong khoảng chưa đầy 2 phút bạn đã có một biểu mẫu liên hệ cho blog của mình.

Nhưng Với xu thế tối ưu hóa blogger để tăng tốc độ tải trang nên hầu như đã xóa css và js mặc định của blogger do vậy tiện ích biểu mẫu liên hệ không hoạt động được.

Tạo trang liên hệ trên blogger
Tạo trang liên hệ trên blogger

Các bước thực hiện:

Bước 1: Các bạn vào blog của mình sau đó tìm đến trang và tạo 1 trang mới

Hướng dẫn tạo trang liên hệ chuyên nghiệp trên blogger

Bước 2: Sau khi các bạn vào phần viết bài của trang thì các bạn chuyển qua tab HTML và dán đoạn code ở Bước 3 vào phần đó sau đó lưu lại.

Hướng dẫn tạo trang liên hệ chuyên nghiệp trên blogger

Bước 3: Dán code này vào tab HTML ở Bước 2

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>

Chú ý!
Các bạn thay hết 0000000000000000000 thành mã số ID_Blog của các bạn.
Thay www.giahuy.net bằng địa chỉ domain chủa bạn.

Nếu không thấy mail thì các bạn xem trong thư mục spam nhé, và đánh dấu thư đó không spam thì lần sau sẻ không xuất hiện trong thư mục spam nữa.

Trên đây là hướng dẫn tạo trang liên hệ trên blogger. Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Tham khảo: www.wendycode.com

Khi cuộc đời cho bạn cả trăm lý do để khóc, hãy cho đời thấy bạn có cả ngàn lý do để cười.

3 nhận xét

  1. Blog name: Nguyen Phong Pro
    Blog Link: https://nguyenphongproo.blogspot.com/ Description: Share tips, facebook, code.
    1. Trang của mình không nhận liên kết link nha bạn. Mà mình thấy trang bạn có dấu “—>” sao bạn không xoá vậy?
  2. wendy
    Nhận xét này đã bị quản trị viên blog xóa.
Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!