Labels

[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 !