Trần Bá Đạt Blog
  • Học SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Dịch vụ
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Dịch vụ
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

Chia sẻ mẫu form Liên Hệ đẹp tuyệt cho Blogspot

07/01/2018
trong Blogspot, Thủ thuật Blogspot
14
Chia sẻ mẫu form Liên Hệ đẹp tuyệt cho Blogspot

Bạn đang tìm kiếm một mẫu form dùng cho trang Liên hệ dành cho trang blog của mình? Bạn chưa tìm kiếm được mẫu form nào vừa ý từ các trang blogspot khác chia sẻ?

Vậy hãy dừng lại ít phút ở tranbadat.info để cùng xem qua mẫu form trang Liên hệ tuyệt đẹp dành cho các bạn nhé, mình nghĩ sẽ khó mà có người không vừa lòng.

Đây là mẫu form theo mình thấy là chỉ có tại “những blog được tạo ra bởi mình (Trần Bá Đạt), và SHARE EVERYTHING cũng đang sử dụng nó”. Mẫu form này được thiết kế và sử dụng riêng cho Blogspot, vì vậy nó sẽ không dùng cho các website sử dụng mã nguồn khác đâu nhé.

Mẫu form Liên hệ dành cho Blogspot

Để tạo mẫu form Liên hệ giống như ở ảnh demo ở dưới, các bạn hãy làm theo hướng dẫn tạo mẫu form Liên hệ của mình ngay bên dưới:

Mẫu form Liên hệ dành cho Blogspot
Form Liên hệ tại SHARE EVERYTHING

Mẫu form này tạo ở đâu cũng được, tuy nhiên, theo mình nghĩ thì các bạn nên tạo form liên hệ ở một trang riêng biệt. Ở đây, mình khuyến khích dùng phần “Trang” (Pages) trong cài đặt của Blogspot:

1. Vào “Trang” (Page) -> “Trang mới” (New page).

2. Chuyển sang tab HTML.

3. Copy toàn bộ đoạn code bên dưới đây, dán vào đó:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<div class=”separator” style=”clear: both; text-align: center;”> <img alt=”Liên hệ Trần Bá Đạt” height=”230″ src=”https://lh3.ggpht.com/-ikSVvk6ykts/WO-jkgJR2NI/AAAAAAAAENM/NCN7y9lDEi4OFOn0CRDORSKeJDcju4CuACLcB/s1600/lien-he.png” style=”border-image: none; border: medium;” title=”Liên hệ Trần Bá Đạt” width=”640″ />
</div> Tôi sẽ rất vui lòng nếu nhận được sự phản hồi của các bạn. Nếu có gì chưa chính xác, hay nếu muốn đề xuất nội dung được viết trên <a href=”https://www.tranbadat.com/”>tranbadat.info</a> thì hãy gửi yêu cầu đến tôi. Tôi sẽ cố gắng hỗ trợ các bạn một cách nhanh nhất và tốt nhất. Cảm ơn!
<br />
<form id=”kontak-arlina” name=”contact-form”>
<input id=”ContactForm1_contact-form-name” name=”name” placeholder=”Tên *” size=”30″ type=”text” value=”” />
<input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email *” size=”30″ type=”text” value=”” />
<textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Nội dung *” rows=”5″></textarea>
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Gửi tin nhắn” />
<br />
<div style=”max-width: 100%; text-align: center; width: 100%;”>
<div id=”ContactForm1_contact-form-error-message”> </div>
<div id=”ContactForm1_contact-form-success-message”> </div>
</div>
</form>
<br />
<ul>
<li>Email: tran.badat1992@gmail.com</li>
<li>https://www.tranbadat.com</li>
<li>Skype: tran.badat1992</li>
</ul>
<style scoped=”” type=”text/css”>
#comments,
.post_meta,
#blog-pager {
display: none
}
 
form {
color: #666
}
 
form.payforpal {
margin: auto;
text-align: center
}
 
#kontak-arlina {
margin: auto;
max-width: 640px
}
 
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email {
display: inline-block;
width: 45%;
height: auto;
background: #fff;
margin: 20px auto;
padding: 15px 12px;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.2);
float: left;
transition: all 0.2s
}
 
#ContactForm1_contact-form-email {
float: right
}
 
#ContactForm1_contact-form-email-message {
width: 100%;
height: 175px;
margin: 5px 0 20px 0;
padding: 15px 12px;
background: #fff;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.2);
resize: none;
transition: all 0.3s
}
 
#kontak-arlina br {
display: none
}
 
#ContactForm1_contact-form-name:focus,
#ContactForm1_contact-form-email:focus,
#ContactForm1_contact-form-email-message:focus {
outline: none;
background: #fff;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.2);
}
 
#ContactForm1_contact-form-submit {
float: left;
background: #e74c3c;
color: #fff;
margin: auto;
vertical-align: middle;
cursor: pointer;
padding: 16px 20px;
font-size: 15px;
text-align: center;
letter-spacing: .5px;
border: 0;
width: 100%;
font-weight: 500;
transition: all .2s
}
 
#ContactForm1_contact-form-submit:hover,
#ContactForm1_contact-form-submit:focus {
background: #c0392b;
color: #fff;
}
 
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message {
width: 100%;
margin-top: 35px
}
 
.contact-form-error-message-with-border {
background: #f47669;
border: 0;
box-shadow: none;
color: #fff;
padding: 5px 0;
border-radius: 3px
}
 
.contact-form-success-message {
background: #4fc3f7;
border: 0;
box-shadow: none;
color: #fff;
border-radius: 3px
}
 
img.contact-form-cross {
line-height: 40px;
margin-left: 5px
}
 
.post-body input {
width: initial
}
 
@media only screen and (max-width: 640px) {
#ContactForm1_contact-form-name,
#ContactForm1_contact-form-email,
#ContactForm1_contact-form-submit {
width: 100%;
float: none
}
}
</style>
<script type=”text/javascript”>
//<![CDATA[ if (window.jstiming) window.jstiming.load.tick(‘widgetJsBefore’); //]]>
</script>
<script src=”https://www.blogger.com/static/v1/widgets/2271878333-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’] = ‘5996935446171071211‘;BLOG_attachCsiOnload(”); }_WidgetManager._Init(‘//www.blogger.com/rearrange?blogIDx3d5996935446171071211‘,’//www.tranbadat.com/’,’5996935446171071211‘); _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’: ‘Tin nhắn của bạn chưa được gửi. Vui lòng thử lại sau.’, ‘contactFormInvalidEmailMsg’: ‘Vui lòng thêm địa chỉ email hợp lệ.’, ‘contactFormEmptyMessageMsg’: ‘Nội dung không được để trống.’, ‘title’: ‘Mẫu liên hệ’, ‘blogId’: ‘5996935446171071211‘, ‘contactFormNameMsg’: ‘Tên’, ‘contactFormEmailMsg’: ‘Email’, ‘contactFormMessageMsg’: ‘Nội dung’, ‘contactFormSendMsg’: ‘Gửi tin nhắn’, ‘submitUrl’: ‘https://www.blogger.com/contact-form.do’}, ‘displayModeFull’)); //]]>
</script>

 

4. Sửa lại những điểm lưu ý bên dưới đây để mail liên hệ sẽ được gửi đến đúng tài khoản của bạn:
– Đoạn id màu xanh dương:5996935446171071211bạn cần thay lại cho đúng ID của blog của bạn.
– Đường dẫn màu đỏ:www.tranbadat.comthay lại bằng địa chỉ trang web của bạn.
– Các nội dung liên hệ khác bạn coi tùy chỉnh lại ở trên đoạn code luôn nhé.

Đọc thêm:

  • Tải template blogspot tuyệt đẹp cho blog của bạn
  • Hướng dẫn tạo hộp Feedburner theo dõi qua email

5. Đặt tên trang là Liên hệ hay là gì tùy thích các bạn, sau đó lưu lại.

Vậy là bạn đã có một trang liên hệ với form rất đẹp dành cho blogspot. Nội dung sau khi được gửi đi từ trang liên hệ sẽ được gửi thẳng vào email thông báo của blog của bạn. Nên không lo thất lạc nhé.

Chia sẻ1TweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
CÓ THỂ BẠN THÍCH
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Bài viết liên quan

Kỹ thuật SEO Onpage cho danh mục sản phẩm
SEO Onpage

Kỹ thuật SEO Onpage cho danh mục sản phẩm, bài viết vượt trội 2018

26/07/2018
Phát triển Mô hình backlink - Mô hình nâng cao thứ hạng
SEO

Phát triển Mô hình backlink hiệu quả – Mô hình nâng cao thứ hạng

08/06/2018
Mô hình internal links, chia sẻ và nâng cao thứ hạngMô hình internal links, chia sẻ và nâng cao thứ hạng
SEO Onpage

Xây dựng mô hình Internal Links – Chia sẻ và bức phá thứ hạng

08/06/2018
Template MagNews miễn phí
Blogspot

Template MagNews bản quyền – Chia sẻ hoàn toàn miễn phí

07/06/2018
Template Blogspot Slycore
Blogspot

Chia sẻ template Slycore bản quyền 21$ hoàn toàn miễn phí

06/03/2018
Template Magone Blogspot
Cá nhân

Template MagOne bản quyền 21$ – Chia sẻ miễn phí

12/01/2018

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 14

  1. Thái Thuần says:
    1 năm trước

    ID của blog, tìm ở đâu?
    Hiển thị không đúng

    Trả lời
    • Trần Bá Đạt says:
      1 năm trước

      ID của blog bạn là đoạn số trên đường link khi bạn chỉnh sửa hay đăng 1 bài viết mới ở trong quản trị nha.

      Trả lời
  2. Trần Đình Đức says:
    1 năm trước

    Anh Đạt check lại code trên giúp em được không ạ? Em đã làm đúng hướng dẫn mà hình như nó không nhận CSS của form

    Trả lời
  3. Hùng says:
    2 năm trước

    HƯỚNG DẪN LÀM CHỨC NĂNG BÌNH LUẬN NÀY NHƯ CỦA ADD ĐI

    Trả lời
  4. phong says:
    2 năm trước

    Sao minh làm mà không được vậy bác

    Trả lời
    • Trần Bá Đạt says:
      2 năm trước

      Vì có lẽ bạn chưa thay các vị trí hiện tại đúng theo blog của bạn cwl

      Trả lời
  5. cuahangdonhat jp says:
    2 năm trước

    Cảm ơn AD. mình học dc rất nhiều từ Blog của bạn.
    Nhưng cho mình hỏi, mình làm thoe hướng dẫn nó cũng hiện thị ra đúng như vậy, nhưng khi bấm vào gởi tin nhắn nó đứng trơ ra ko nhúc nhích ji hết. là nó bị gì vậy?
    bạn có thể hướng dẫn giúp mình dc ko.
    Cảm ơn rất nhiều!

    Trả lời
    • Trần Bá Đạt says:
      2 năm trước

      Có thể do bạn copy code sai hoặc chưa thay các nội dung yêu cầu thành đúng nội dung của blog mình.

      Trả lời
  6. Trần Bá Đạt says:
    2 năm trước

    OK. Hôm nào mình sẽ share, đơn giản thôi mà laugh

    Trả lời
  7. Nguyễn Ngọc Quí ✔ says:
    2 năm trước

    Share code share Facebook Google+ đi anh

    Trả lời
  8. Trần Bá Đạt says:
    2 năm trước

    Làm bằng PTS bạn ạ laugh

    Trả lời
  9. Viết Hoàng Đắc says:
    2 năm trước

    Bạn cho mình hỏi dùng soft gì làm ảnh minh họa chữ kiểu material vậy?

    Trả lời
  10. Kênh 72 says:
    2 năm trước

    bạn vào trang chủ blogger nhìn trên link là sẽ thấy

    Trả lời
  11. Tạ Hữu Nam says:
    3 năm trước

    id blog lấy ở đâu z Đạt

    Trả lời

ĐƯỢC YÊU THÍCH

  • Tổng hợp 1000 icon Facebook 2018

    Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    156 chia sẻ
    Chia sẻ 155 Tweet 0
  • Hướng dẫn nhận key Office 2016 bản quyền, active Office 2016 mới nhất (Updated 2018)

    110 chia sẻ
    Chia sẻ 109 Tweet 0
  • Hướng dẫn nhận key Office 2019 bản quyền, active Office 2019

    5 chia sẻ
    Chia sẻ 4 Tweet 0
  • Cách bỏ gạch đỏ trong Word/Excel/PowerPoint

    2 chia sẻ
    Chia sẻ 2 Tweet 0
  • Cách khôi phục tin nhắn Messenger Facebook đã xóa 2018

    11 chia sẻ
    Chia sẻ 10 Tweet 0
ADVERTISEMENT
Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • wifi marketing
  • hóa đơn điện tử viettel
  • bàn trang điểm đẹp
  • hoa sinh nhật

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. All Rights Reserved.

Không có kết quả
Tất cả kết quả
  • Học SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Dịch vụ

© Copyright 2017 Trần Bá Đạt Blog. All Rights Reserved.