Tạo trang liên hệ cho blogspot đẹp và chuyên nghiệp

Bài viế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 blogspot. Với form này người dùng sẽ điền các thông tin vào form sau đó nhấn gửi thì blogspot 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.

Hình ảnh minh họa Tạo trang liên hệ đẹp cho blogspot


Nội dung bài viết : Tạo trang liên hệ đẹp cho blogspot

Phần nội dung cho mục lục

1. Css Và Tạo Code trang liên hệ đẹp cho blogspot

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

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



<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'));

//]]>





Bước 4: Các bạn thay hết các ID Blog 2389191237839036521 thành ID Blog của các bạn.

Nếu không thấy email 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é!

OK. Vậy là các bạn đã tạo thành công trang liên hệ đẹp và chuyên nghiệp cho blogspot của mình rồi nhé

2. Tại sao nên dùng biểu mẫu liên hệ cho blogspot

Hiện nay, nhà tiếp thị đang tìm đủ mọi cách nhằm thực hiện đủ mọi chiến dịch tiếp thị. Để từ đó, đem đến các hiệu quả tiếp thị: tăng tỷ lệ chuyển đổi, tối ưu SEO, tăng lượt nhấp,... nhằm thúc đẩy doanh thu bán hàng ngày một cao hơn.
Một nhân tố rất quan trọng để các chiến dịch tiếp thị có thể thực hiện được "đúng" - đúng người, đúng thời điểm, đúng thông điệp, đó chính là Email.
Thông qua việc nắm giữ trường thông tin Email, Nhà bán hàng có thể thực hiện được rất nhiều chiến dịch tiếp thị linh hoạt.
Một cách giúp Nhà bán hàng thu thập được email của khách hàng tự động và hiệu quả, đó chính la sử dụng các biểu mẫu liên hệ.
Ứng dụng Form Liên Hệ sẽ giúp Nhà bán hàng thực hiện điều đó!!!

3. Liên kết kiếm tiền cho blogspot

Khi bạn đã tạo được trang liên hệ rồi tức website/blog của bạn đã đạt 90% yêu cầu hãy bắt tay vào công việc kiếm tiền ngay bay giờ và ngay lúc này.



1 Nhận xét

vungve.com không chấp nhận bình luận thiếu văn hóa

  1. Trang liên hệ đẹp sẽ giúp website/blog của bạn chuyên nghiệp và hoàn hảo hơn !

    Trả lờiXóa

Đăng nhận xét

vungve.com không chấp nhận bình luận thiếu văn hóa

Mới hơn Cũ hơn