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

Ủng hộ mình bằng cách bấm vào Quảng Cáo để giúp mình phát triển hơn nhé!

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