[Blogger] Material Design contact form for blogger

Tiện ích biểu mẫu liên hệ (contact form) là một tiện ích rất đáng dùng của blogger. Nó giúp cho độc giả liên hệ với bạn qua email, sử dụng contact form giúp trang của bạn trở nên uy tín hơn với người dùng

Thiết kế Material đang dần trở nên thịnh hành, bằng chứng là Google cũng như Youtube đang dần chuyển các sản phẩm của họ sang giao diện material. Để hưởng ứng phong trào đó trong bài viết này hung1001 sẽ cùng các bạn tạo biểu mẫu liên hệ theo thiết kế material

Xem demo

DEMO
Điều kiện bắt buộc để contact form hoạt động

Bạn phải tạo widget contact form
Bạn không được tắt js mặc định của blogger

Trong bài viết này, tôi sử dụng font awesome 4. Tích hợp nếu bạn chưa có

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Bước chung

Bạn tạo 1 widget contact form bất kì

Lưu bố cục lại. Tiếp theo ta sẽ ẩn nó đi bằng dòng CSS sau

#ContactForm1{display:none !important}

Trường hợp 1: Bạn không tắt js mặc định của blogger

Rất đơn giản, bạn chỉ cần tạo 1 trang tĩnh với nội dung như sau

<style type='text/css'>
.BsdCntct {
    float: none;
    position: relative;
    margin-bottom: 44px;
    margin-right: 9px
}

.BsdCntct input,
.BsdCntct textarea {
    font-size: 14px;
    padding: 14px 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: 15px;
    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: #0C0;
    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: 12px;
    color: #0C0
}

input#ContactForm1_contact-form-email-message {
    height: 150px
}

input#ContactForm1_contact-form-reset,
input#ContactForm1_contact-form-submit {
    color: #fff !important;
    background: #0C0;
    padding: 14px 25px;
    border-radius: 4px;
    border: none;
    outline: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 14px;
    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;
    background: #008E00;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}

#ContactForm1_contact-form-success-message {
    float: right;
    background: #357A37;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}
</style>

<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> Name</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-o"></i> Email</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-microphone"></i> Message</label>
    </div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <input id="ContactForm1_contact-form-reset" type="reset" value="Clear" />
    <br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>

Trường hợp 2: Bạn đã tắt js mặc định của blogger

Cách 1: Sử dụng thẻ điều kiện if để bật js mặc định trên trang contact

Ví dụ tôi xuất bản trang contact và thu được liên kết là https://hung1001nd.blogspot.com/p/contact.html. Tôi sẽ dùng thẻ điều kiện để bật js mặc định chỉ với trang contact như sau

<b:if cond='data:blog.url != &quot;https://hung1001nd.blogspot.com/p/contact.html&quot;'>&lt;!--</b:if></body>
<b:if cond='data:blog.url != &quot;>https://hung1001nd.blogspot.com/p/contact.html&quot;'>--&gt;&lt;/body&gt;</b:if>

Mẫu có dạng như sau

Nội dung trang contact

<style type='text/css'>
.BsdCntct {
    float: none;
    position: relative;
    margin-bottom: 44px;
    margin-right: 9px
}

.BsdCntct input,
.BsdCntct textarea {
    font-size: 14px;
    padding: 14px 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: 15px;
    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: #0C0;
    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: 12px;
    color: #0C0
}

input#ContactForm1_contact-form-email-message {
    height: 150px
}

input#ContactForm1_contact-form-reset,
input#ContactForm1_contact-form-submit {
    color: #fff !important;
    background: #0C0;
    padding: 14px 25px;
    border-radius: 4px;
    border: none;
    outline: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 14px;
    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;
    background: #008E00;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}

#ContactForm1_contact-form-success-message {
    float: right;
    background: #357A37;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}
</style>

<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> Name</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-o"></i> Email</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-microphone"></i> Message</label>
    </div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <input id="ContactForm1_contact-form-reset" type="reset" value="Clear" />
    <br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>

Cách 2: Chèn thêm js không sử dụng thẻ điều kiện

Vẫn giữ nguyên code tắt js mặc định

Nội dung trang tĩnh

<style type='text/css'>
.BsdCntct {
    float: none;
    position: relative;
    margin-bottom: 44px;
    margin-right: 9px
}

.BsdCntct input,
.BsdCntct textarea {
    font-size: 14px;
    padding: 14px 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: 15px;
    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: #0C0;
    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: 12px;
    color: #0C0
}

input#ContactForm1_contact-form-email-message {
    height: 150px
}

input#ContactForm1_contact-form-reset,
input#ContactForm1_contact-form-submit {
    color: #fff !important;
    background: #0C0;
    padding: 14px 25px;
    border-radius: 4px;
    border: none;
    outline: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    float: left;
    font-weight: 700;
    font-size: 14px;
    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;
    background: #008E00;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}

#ContactForm1_contact-form-success-message {
    float: right;
    background: #357A37;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px
}
</style>

<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> Name</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-o"></i> Email</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-microphone"></i> Message</label>
    </div>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <input id="ContactForm1_contact-form-reset" type="reset" value="Clear" />
    <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'] = 'id_blog';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3did_blog', 'url_blog', 'id_blog');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Sending...',
    'contactFormMessageSentMsg': 'Your message has been sent.',
    'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.',
    'contactFormInvalidEmailMsg': 'A valid email address is required.',
    'contactFormEmptyMessageMsg': 'Message field cannot be empty.',
    'title': 'Contact Form',
    'blogId': 'id_blog',
    'contactFormNameMsg': 'Name',
    'contactFormEmailMsg': 'Email',
    'contactFormMessageMsg': 'Message',
    'contactFormSendMsg': 'Send',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]>
</script>

Trong code js bạn sửa

+ id_blog thành id blog của bạn, id này bạn có thể thấy ngay trên url trình duyệt khi bạn đăng nhập vào trang quản trị

+ url_blog chính là địa chỉ blog của bạn

Ví dụ của tôi sẽ là

<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'] = '8256370320146498427';
    BLOG_attachCsiOnload('');
}
_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8256370320146498427', '//hung1001nd.blogspot.com/', '8256370320146498427');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {
    'contactFormMessageSendingMsg': 'Sending...',
    'contactFormMessageSentMsg': 'Your message has been sent.',
    'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.',
    'contactFormInvalidEmailMsg': 'A valid email address is required.',
    'contactFormEmptyMessageMsg': 'Message field cannot be empty.',
    'title': 'Contact Form',
    'blogId': '8256370320146498427',
    'contactFormNameMsg': 'Name',
    'contactFormEmailMsg': 'Email',
    'contactFormMessageMsg': 'Message',
    'contactFormSendMsg': 'Send',
    'submitUrl': 'https://www.blogger.com/contact-form.do'
}, 'displayModeFull'));
//]]>
</script>

Kết quả thu được

Tùy chỉnh css theo ý thích của bạn.

Như vậy tôi đã giới thiệu xong cho các bạn cách tạo biểu mẫu liên hệ theo phong cách material áp dụng cho cả trường hợp bật hoặc tắt js mặc định blogger. Đây là một tiện ích rất hay nhưng theo khảo sát sơ sơ của tôi ít blogger để ý đến nó

Để lại bình luận nếu gặp khó khăn khi tích hợp. Chúc các bạn thành công !

Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam

Lưu ý khi bình luận

1. Không vi phạm luật pháp nước CHXHCN Việt Nam

2. Không vi phạm thuần phong mỹ tục Việt Nam

3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị

4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website

5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán

6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt

7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên

Đã hiểu

Emoji Emoticon Parse

Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh

Chèn video Youtube bằng cách dán trực tiếp link video

Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

6 comments

Hide all replies

TUE 12/10/2018 12:16:00 PM

Đã thay thế style này cho style contactform trên blog. Cảm ơn bác nhiều!

Nhưng mình có 1 vấn đề nhờ bác hướng dẫn (Xem hình minh họa):
- Khi nhấn nút Submit xong thì nó luôn hiện cái khung màu đỏ ở các ô input.
https://i.imgur.com/tZaVqk2.png
Mình đã thử thêm code bên dưới để vô hiệu hóa nó nhưng không có tác dụng gì:
input:focus, textarea {
border: 0!important;
outline: none !important;
}

Trên blog mình, thử nhấn đại vào nút Search nó cũng hiện viền đỏ này...

Nhờ bác hướng dẫn làm cách nào để gỡ bỏ nó hoặc đổi màu cho nó ạ?

Hưng Hoàng Văn 12/10/2018 12:40:00 PM

cho hỏi trình duyệt gì, đã test trên chrome, cent, ie ko thấy hiện tượng trên

TUE 12/10/2018 12:41:00 PM

Ở đây bác ơi: https://www.relaxingworld.org/p/contact.html
Bác thử gửi 1 email rồi bấm SEND sẽ hiện cái ô màu đỏ kia...

TUE 12/10/2018 12:53:00 PM

À... hình như là do Firefox mặc định như thế, mình thử trên Chrome thì không có gì hết... Vãi thiệt! ^_^

Hưng Hoàng Văn 12/10/2018 06:17:00 PM

Do css mặc định của firefox, bác thêm css sau

[pre]input:invalid,
input:required {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
[/pre]

TUE 12/10/2018 06:48:00 PM

Quá tuyệt luôn...Mình đã cho nó vào template, giờ không còn cái viền đỏ đáng ghét nữa!👍
Cảm ơn bác nhiều!

Hưng Hoàng Văn | Thủ thuật quản lý chuyên sâu

Labels

[Blogger] Material Design contact form for blogger

Bước chung

Trường hợp 1: Bạn không tắt js mặc định của blogger

Trường hợp 2: Bạn đã tắt js mặc định của blogger

Cách 1: Sử dụng thẻ điều kiện if để bật js mặc định trên trang contact

Cách 2: Chèn thêm js không sử dụng thẻ điều kiện

About this article

Featured Post

NewsPlus - Premium Blogger Template by Hung1001

Category

Trending Posts

Tìm hiểu về file EI.cfg và PID.txt trong sources ISO

[Tips] Hướng dẫn cài đặt Media Feature Pack cho các phiên bản N và KN

[Tips] Hướng dẫn cài đặt gói ngôn ngữ offline cho Windows

Thêm chức năng sắp xếp bình luận theo thời gian cho Threaded Comments

[Blogger] Hướng dẫn sử dụng Material Icons trang trí cho blogspot

[Blogger] Tạo khung chứa code có nút copy to clipboard cho blogspot

[Tips] Tạo file ISO cài đặt Windows 10 đa ngôn ngữ ( Multilingual Windows Image Creation )

[BatchScript] Nhập key và lấy Installation ID Office nhanh và chuẩn nhất

Blogger Code - b:widget

Một số hiệu ứng khi scroll chuột cho website

Most Viewed

[BatchScript] Nhập key và lấy Installation ID Office nhanh và chuẩn nhất

[Tips] Hướng dẫn cài đặt Media Feature Pack cho các phiên bản N và KN

[BatchScript] Nhập key và lấy Installation ID Windows nhanh và chuẩn nhất

[Blogger] Hiệu ứng tuyết rơi bằng CSS3

[Tutorial] Activate by phone Windows & Office with MSAct

Partner