Cách tạo trang liên hệ trong Blogger



Blogger rất mạnh mẽ và miễn phí, bạn có thể dễ dàng tạo một blog hoặc một trang tin cho mình. Nhưng với sự dễ dàng đó, nó cũng có một số hạn chế. Theo mặc định, bạn không thể tạo trang Liên hệ với chúng tôi, bạn phải sử dụng bất kỳ plugin của bên thứ ba nào hoặc phải điều chỉnh tiện ích liên hệ chính thức của blogger để nó có thể hoạt động trên các trang tĩnh (html). Tạo một trang riêng cho mục đích liên hệ chuyên nghiệp hơn và cũng làm cho blog của bạn sạch sẽ bằng cách ẩn các tiện ích và plugin không cần thiết. Vì vậy, hãy xem Cách tạo trang Liên hệ với chúng tôi trong Blogger .



Bước đầu tiên (Quan trọng)

Trước khi làm theo hướng dẫn dưới đây, chúng tôi khuyên bạn nên cài đặt tiện ích biểu mẫu liên hệ trong blog của mình nếu chưa có, đây là một quá trình rất dễ và có thể được thực hiện trong vài phút, chỉ với một vài cú nhấp chuột đơn giản. Chúng tôi đã xuất bản một hướng dẫn trước đó, vì vậy bạn sẽ không gặp phải bất kỳ khó khăn nào. Vui lòng làm theo Cách thêm tiện ích biểu mẫu liên hệ trong Blogger và Blogspot Blog .

Ẩn tiện ích ( Thêm CSS )

Trước khi chỉnh sửa, chúng tôi khuyên bạn nên tạo bản sao lưu mẫu của mình.
Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản Blogger của bạn và truy cập >> Mẫu >> Chỉnh sửa HTML và tìm kiếm thẻ kết thúc ]]> </ b: skin> và dán phía trên nó mẫu sau đây:

.sidebar .widget.ContactForm {
display: none!important;
}


Tạo một trang liên hệ (HTML)

Dán mã sau vào trang html và lưu lại

<style>
#contact{
    background-color:#fff;
    margin:30px 0 !important
}
#contact .contact-form-widget{
    max-width:100% !important
}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{
    background-color:#FFF;
    border:1px solid #eee;
    border-radius:3px;
    padding:10px;
    margin-bottom:10px !important;
    max-width:100% !important
}
#contact .contact-form-name{
    width:47.7%;
    height:50px
}
#contact .contact-form-email{
    width:49.7%;
    height:50px
}
#contact .contact-form-email-message{
    height:150px
}
#contact .contact-form-button-submit{
    max-width:100%;
    width:100%;
    z-index:0;
    margin:4px 0 0;
    padding:10px !important;
    text-align:center;
    cursor:pointer;
    background:#27ae60;
    border:0;
    height:auto;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    text-transform:uppercase;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
    color:#FFF
}
#contact .contact-form-button-submit:hover{
    background:#2c3e50
}
#contact .contact-form-email:focus,#contact .contact-form-name:focus,#contact .contact-form-email-message:focus{
    box-shadow:none !important
}
</style>
<div class="contact-form">
<div class="contact section" id="contact" style="display: block;">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
                               <br />
<div style="text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

Lưu lại và xem thành quả nào. Nếu có thắc mắc thì comment bên dưới nhé.

Quảng cáo hiển thị ở đây

Nhận xét

Bạn được hoan nghênh chia sẻ ý tưởng của bạn với chúng tôi trong phần bình luận!

Archive

Biểu mẫu liên hệ

Gửi