Tạo form Liên Hệ đẹp tuyệt cho Blogspot vào năm 2021

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ẻ?

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:

Tạo form Liên Hệ đẹp tuyệt cho Blogspot vào năm 2021

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 đó:

<div class=separatorstyle=clear: both; text-align: center;> <img alt=Liên hệ Doan Hai” height=230src=https://lh3.ggpht.com/-ikSVvk6ykts/WO-jkgJR2NI/AAAAAAAAENM/NCN7y9lDEi4OFOn0CRDORSKeJDcju4CuACLcB/s1600/lien-he.png” style=”border-image: none; border: medium;” title=”Liên hệ Doan Hai” width=”640″ />
</div> Tôi srt vui lòng nếu nhn được sphn hi ca các bn. Nếu có gì chưa chính xác, hay nếu mun đề xut ni dung được viết trên <a href=https://www.doanvanhai.com/”>doanvanhai</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-arlinaname=contact-form>
<input id=ContactForm1_contact-form-namename=nameplaceholder=Tên *size=30type=textvalue=”” />
<input id=ContactForm1_contact-form-emailname=emailplaceholder=Email *size=30type=textvalue=”” />
<textarea cols=25id=ContactForm1_contact-form-email-messagename=email-messageplaceholder=Ni dung *rows=5></textarea>
<input id=ContactForm1_contact-form-submittype=buttonvalue=Gi tin nhn/>
<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: haidesign010596@gmail.com</li>
<li>https://www.doanvanhai.com</li>
<li>Skype: #</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 : 5996935446171071211 bạn cần thay lại cho đúng ID của blog của bạn.
– Đường dẫn : www.doanvanhai.com thay 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é.

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é.

Tạo form liên hệ trong blogspot

Tạo form liên hệ trong blogspot

Bài viết liên quan

Phần mềm thiết kế áo phông miễn phí tốt nhất năm 2021

Tóm tắt nội dung ẩn 1 Custom Ink 1.1 Ưu điểm 1.2 Nhược điểm 2 Design a Shirt 2.1 Ưu điểm 2.2 Nhược điểm 3 Print Shop by Design Hill 3.1 Ưu điểm 3.2 Nhược điểm 4 PlaceIt 4.1 Ưu điểm 4.2 Nhược điểm 5 Thêm một lựa chọn… 5.1 Ưu điểm 5.2 Nhược điểm […]

Xem thêm

Tổng hợp 100 hiệu ứng Text cực đẹp cho năm 2021

Mô tả Gói 100 trong 1 Kiểu Hiệu ứng Văn bản Đa dụng Tiết kiệm hàng giờ với một cú nhấp chuột. Hiệu quả tức thì !. Hoàn toàn có thể tùy chỉnh. Bộ này chứa 100 kiểu hiệu ứng văn bản sẵn sàng để sử dụng Illustrator Các mẫu này có thể tùy chỉnh với Adobe […]

Xem thêm

71 phím tắt trong Photoshop cho người mới bắt đầu học

Tóm tắt nội dung ẩn 1 01. Hiển thị và ẩn bảng điều khiển lớp 2 02. Cuộn qua các Lớp 3 03. Tạo lớp mới 4 04. Tạo lớp mới đằng sau lớp đã chọn 5 05. Tô một lớp 6 06. Làm phẳng các lớp 7 07. Hợp nhất các lớp có thể […]

Xem thêm

Hướng dẫn Seo cơ bản 2021: Phân tích số liệu trang web

Tóm tắt nội dung ẩn 1 Google Search Console 1.1 Báo cáo hiệu suất 1.1.1 Khắc phục sự cố giảm hiệu suất 1.1.2 Tìm các trang cần tối ưu hóa CTR 1.1.3 So sánh hiệu suất của bạn trên máy tính để bàn và thiết bị di động 1.1.4 Tìm các từ khóa có hiệu […]

Xem thêm

Hướng dẫn Seo cơ bản 2021: Liên kết ngược và xây dựng liên kết

Backink là gì? Tóm tắt nội dung ẩn 1 Backlink là gì? 1.1 Tại sao các liên kết ngược lại quan trọng như vậy? 1.2 Liên kết vốn chủ sở hữu 1.3 Xếp hạng Trang của Google 1.3.1 Chỉ số Xếp hạng trang 2 Các loại liên kết 2.1 Liên kết nội bộ so với […]

Xem thêm