2 Cách để thêm trang liên hệ vào Blogger cho người mới 2021

Bất cứ một blog hay website nào cũng nên có một trang liên hệ. Nó giúp người dùng liên hệ với quản trị viên web và quản trị viên. Có một số cách để thêm trang liên hệ với chúng tôi trong Blogger. Bài đăng này sẽ giúp bạn Tạo trang liên hệ cho Blogger (Blogspot). Thật đơn giản để thêm HTML trang liên hệ với chúng tôi vào một trang. Không giống như WordPress, Blogger không hỗ trợ plugin nên việc thêm biểu mẫu liên hệ là một nhiệm vụ khó khăn. Điều mà hầu hết các blogger Blogspot làm là tìm kiếm sự trợ giúp của các trang web của bên thứ ba (foxyform, jotform, 123contactform, v.v.).

Hãy xem cách bạn có thể thêm tiện ích liên hệ và biểu mẫu liên hệ của bên thứ ba trong blogger vì tất cả những gì bạn cần làm là chèn mã của bên thứ ba và nhận biểu mẫu liên hệ của bạn.

Cách tạo Trang Liên hệ cho Blogger.

Vì vậy, tôi sẽ chia sẻ cho bạn 2 cách để thêm một trang Contact to Blogger. Cách 1 là sử dụng tiện ích liên hệ Blogger. Cách này rất tuyệt vì nó dễ thiết lập và bạn không phải đăng ký bất kỳ dịch vụ hoặc ứng dụng bên ngoài nào. Giới hạn chính là bạn không thể thêm bất kỳ trường bổ sung nào hoặc sử dụng email khác với email được liên kết với tài khoản Blogger của bạn.

Cách thứ hai là sử dụng một dịch vụ miễn phí mà bạn có thể sử dụng để nhúng biểu mẫu tùy chỉnh vào trang web của mình và nhận email tại bất kỳ địa chỉ email nào bạn muốn.

Vì vậy, hãy bắt đầu và thêm Trang liên hệ vào trang Blogger của bạn.

Cách 1: Sử dụng tiện ích biểu mẫu liên hệ blogger:

Hầu hết các blogger mới sử dụng blogspot đều cảm thấy khó khăn khi tạo trang liên hệ cho blog của họ. Các biểu mẫu liên hệ do các trang web của bên thứ ba cung cấp hoạt động nhưng không đáng tin cậy bằng việc sử dụng tiện ích liên hệ chính thức với chúng tôi.

Ưu điểm của việc sử dụng Tiện ích liên hệ:

Khi một phản ứng được gửi, toàn bộ trang không cần phải được nạp lại.
Việc gửi tin nhắn cho bạn rất đáng tin cậy, nhanh chóng và đáp ứng vì đây là một tiện ích liên hệ chính thức.
Tiện ích liên hệ sử dụng một giao diện thực sự đơn giản nhưng hiệu quả để khách truy cập sử dụng.
Tiện ích liên hệ có thể được tùy chỉnh theo nhu cầu của bạn nếu bạn biết Cascade Style Sheet (CSS).

Thiết lập tiện ích biểu mẫu liên hệ với người viết blog:

Bước 1: Truy cập blogger.com và đăng nhập vào tài khoản của bạn. Nếu bạn đang chạy nhiều blog, bạn cần phải chọn blog mong muốn từ danh sách.

Bước 2: Nhấp vào Bố cục từ thanh bên trái để có tùy chọn thêm tiện ích. Nhấp vào “ tiện ích mới ”. Xem đồ họa dưới đây để biết thêm thông tin.

Bước 3: Nhấp vào nó sẽ đưa bạn đến một danh sách các tiện ích. Cuộn xuống và bạn thấy

Nhấp vào dấu + để thêm tiện ích biểu mẫu liên hệ từ danh sách tiện ích.

Nếu bạn nhấp vào dấu +, cửa sổ biểu mẫu liên hệ sẽ bật ra, tại đây, bạn có thể thay đổi tiêu đề (tiêu đề mặc định là " biểu mẫu liên hệ ", bạn có thể thay đổi thành "Liên hệ với chúng tôi "

Bước 4: Lưu lại cách sắp xếp, sau khi bạn đã thêm biểu mẫu liên hệ, bạn có thể xem biểu mẫu liên hệ trong phần bố cục sau khi đã thêm.

Bây giờ bạn đã thêm tiện ích biểu mẫu liên hệ, tôi muốn bạn xem nó hoạt động như thế nào trên blog của bạn trước khi chúng ta chuyển sang phần thứ hai của hướng dẫn cách thêm trang liên hệ với chúng tôi trong blogger.

Cách biểu mẫu liên hệ xuất hiện trên blog không đẹp, vì vậy những gì chúng tôi sẽ làm là ẩn nó đi. Điều này đưa chúng ta đến phần thứ hai của hướng dẫn, cách thêm trang liên hệ trên blog blogger.

Phần 2: Ẩn Tiện ích Biểu mẫu Liên hệ. Bây giờ, bạn sẽ học cách ẩn tiện ích biểu mẫu liên hệ.

Phương pháp này là tùy chỉnh mẫu thông qua lần nhấn trước và thêm một số mã CSS để tùy chỉnh mẫu của bạn.

Bước 1: Vào Theme >> Customize

Bước 2: Nhấp vào " tùy chỉnh " sẽ đưa bạn đến trang " Trình thiết kế chủ đề Blogger ". Bây giờ đi tới

Nâng cao >> Thêm CSS .

Bước 3: Thêm mã CSS bên dưới vào khoảng trống xuất hiện sau khi bạn nhấp vào " Thêm CSS " sau đó nhấp vào " Áp dụng cho Blog " để tùy chỉnh nó. Sau đó, quay lại blogger và xem blog của bạn.

div # ContactForm1 {
display: none! important;
}{codeBox}

Bây giờ bạn sẽ nhận ra rằng khi bạn quay lại blogger, biểu mẫu liên hệ đã biến mất khỏi blog của bạn. Đừng lo lắng, chỉ cần làm theo các hướng dẫn!

Phần 3: Thêm biểu mẫu liên hệ vào trang. Bạn sẽ nhận được mã biểu mẫu liên hệ blogger chính thức được tùy chỉnh tại đây để được thêm vào để hiển thị trên một trang riêng biệt.

Bước 1: Đi tới Trang và nhấp vào Trang mới .

Bước 2: Dán đoạn mã sau vào bài HTML editor sau khi loại bỏ tất cả mọi thứ trong đó.

Liên hệ với Chúng tôi bằng cách điền vào Biểu mẫu:

<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 10px;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}
</style>
<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Name:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />

<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>
</form>
</div>
</div>
{codeBox}

Bước 3: Thêm tiêu đề (như Liên hệ với chúng tôi) và sau đó thay đổi cài đặt được cung cấp ngay như bên dưới.

Bước 4: Cuối cùng, việc cần làm là nhấp vào nút Xuất bản.

Các tin nhắn được gửi từ biểu mẫu liên hệ này sẽ được gửi đến email quản trị viên. Nếu blog có nhiều quản trị viên, tất cả họ sẽ nhận được nó.

Cách 2: Sử dụng biểu mẫu liên hệ Jotform:

JotForm được sử dụng để tạo các trang biểu mẫu trực tuyến và xuất bản chúng. Các biểu mẫu được tạo từ jotform thường được sử dụng để thu thập dữ liệu. Dữ liệu được đăng trên các biểu mẫu được gửi qua email cho chủ sở hữu.

Ở đây chúng tôi sẽ sử dụng jotform làm trình tạo biểu mẫu liên hệ blogger.

Gói khởi động Jotforms MIỄN PHÍ cung cấp với:

100 lần gửi biểu mẫu hàng tháng

Báo cáo không giới hạn, các trường thực hiện

5 hình thức

1.000 lượt xem biểu mẫu hàng tháng

100 MB dung lượng trống

500 biểu mẫu được lưu trữ

Không tuân thủ HIPAA

Thương hiệu JotForm trên biểu mẫu

Bây giờ chúng ta hãy tạo ra một hình thức liên lạc sử dụng miễn phí gói khởi động từ JotForm:

Bước 1: Tạo một tài khoản miễn phí trên jotform bằng cách đăng ký.

Bước 2 : Nhấp vào nút màu xanh lá cây “ Tạo biểu mẫu ” nằm ở giữa trang.

Bước 3: Chọn tùy chọn giữa “ Sử dụng mẫu ”.

Bước 4: Ở phía bên trái của trang, trong phần loại, nhấp vào “ Biểu mẫu liên hệ ”.

Bước 5: Chọn “ Mẫu Liên hệ Yêu cầu Chung ” bằng cách nhấp vào “ Sử dụng Mẫu ” bên dưới nó.

LƯU Ý: Sử dụng bất kỳ mẫu “Biểu mẫu liên hệ” nào khác phù hợp nhất với nhu cầu và ý thích của bạn, chúng tôi sẽ sử dụng “ Biểu mẫu Liên hệ Yêu cầu Chung ” cho mục đích đơn giản.

Bước 6: Nhấp vào “ Thêm phần tử biểu mẫu ”.