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

BaoTrongITBà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. Với form này người dùng sẻ điều cách thông tin vào for...

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. Với form này người dùng sẻ điều cách thông tin vào form sau đó nhấn gửi thì blog sẻ gửi cho các Gmail đang là quản trị viên trên blog đó về hộp thư Gmail của mình.

Ảnh minh họa

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

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.

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

<style type="text/css">
.BsdCntct {
    float: none;
    position: relative;
    margin: 25px 0;
    margin-right: 9px
}
.BsdCntct input,
.BsdCntct textarea {
    font-size: 16px;
    padding: 15px 0;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd
}
.BsdCntct input:focus,
.BsdCntct textarea:focus {
    outline: 0
}
.BsdCntct label {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 9px;
    transition: .2s ease all
}
.barbsd {
    position: relative;
    display: block;
    width: 100%
}
.barbsd:after,
.barbsd:before {
    content: '';
    height: 1px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #00a16b;
    transition: .2s ease all
}
.barbsd:before {
    left: 50%
}
.barbsd:after {
    right: 50%
}
.BsdCntct input:focus~.barbsd:after,
.BsdCntct input:focus~.barbsd:before,
.BsdCntct textarea:focus~.barbsd:after,
.BsdCntct textarea:focus~.barbsd:before {
    width: 50%
}
.lightbsd {
    position: absolute;
    height: 50%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}
.BsdCntct input:focus~label,
.BsdCntct input:valid~label,
.BsdCntct textarea:focus~label,
.BsdCntct textarea:valid~label {
    top: -19px;
    font-size: 14px;
    color: #00a16b
}
input#ContactForm1_contact-form-email-message {
    height: 150px
}
input#ContactForm1_contact-form-reset,
input#ContactForm1_contact-form-submit {
    color: #fff !important;
    background: #00a16b;
    padding: 14px 25px;
    border-radius: 4px;
    border: none;
    outline: 0;
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 16px;
    margin: 10px 5px 0 0
}
input#ContactForm1_contact-form-reset:hover,
input#ContactForm1_contact-form-submit:hover {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19)
}
#ContactForm1_contact-form-error-message {
    float: right;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    padding:0 5px
}
.post-body img{margin:0!important;display:inline;padding-left:10px;border-radius:0}
#ContactForm1_contact-form-success-message {
    float: right;
    background: #357A37;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border-radius: 3px;
    padding:0 5px
}
</style>
<br />
<form name="contact-form">
<div class="BsdCntct">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
        <span class="lightbsd"></span>
        <span class="barbsd"></span>
        <label><i class="fa fa-user"></i> Tên của bạn</label>
    </div>
<div class="BsdCntct">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
        <span class="lightbsd"></span>
        <span class="barbsd"></span>
        <label><i class="fa fa-envelope"></i> Email của bạn</label>
    </div>
<div class="BsdCntct">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
        <span class="lightbsd"></span>
        <span class="barbsd"></span>
        <label><i class="fa fa-comment"></i> Tin nhắn</label>
    </div>
<input id="ContactForm1_contact-form-submit" type="button" value="Gửi" />
    <input id="ContactForm1_contact-form-reset" type="reset" value="Xóa" />
    <br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/199156504-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
    window['blogger_templates_experiment_id'] = "templatesV1";
    window['blogger_blog_id'] = '2389191237839036521';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2389191237839036521', document.location.origin , '2389191237839036521');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Đang 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': 'Nhập địa chỉ email hợp lệ.',
    'contactFormEmptyMessageMsg': 'Trường thông báo không được để trống.',
    'title': 'Contact Form',
    'blogId': '2389191237839036521',
    'contactFormNameMsg': 'Tên của bạn',
    'contactFormEmailMsg': 'Email của bạn',
    'contactFormMessageMsg': 'Tin nhắn',
    'contactFormSendMsg': 'Gửi',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]>
</script>

Bước 4: Các bạn thay hết các IDBlog 2389191237839036521 thành IDBlog của các 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.
Lưu ý: Để Form liên hệ hoạt động thì các bạn vui lòng không tắt JS mặc định của blog nhé!
Chúc các bạn thành công!

Code by: Hung1001

• Pass giải nén (nếu có)
  • Tất cả các file .Rar trên website pass: www.baotrongit.com
• Tắt bật Windows Defender
  • Các file setup đều đã Active sẵn nên sẽ có xung đột với hệ thống diệt virut nên bạn cần tắt trước khi cài đăt phần mềm về máy, xem hướng dẫn Tắt bật Windows Defender dễ dàng và nhanh chóng.
• Báo lỗi link hỏng
  • Bạn có thể báo lỗi link hỏng, link die tại phần Bình luận hoặc có thể Liên hệ với tôi để khắc phục sự cố sớm nhất.
• Tại sao không tải được file?
  • Có 2 trường hợp nếu lỗi link bạn có thể báo lỗi link hỏng ở phía trên
    Trường hợp file đã quá số lần tải trên Google Drive bạn có thể xem hướng dẫn tại đây để tải được file về máy.