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


{tocify} $title={Table of content}

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:
<!-- Contact Form Code -->
<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>
<!-- End Contact Form Code -->{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 ”.


Trong phần này, bạn có thể thêm nhiều trường, thêm văn bản. Ví dụ: tôi đã thêm trường số điện thoại cho các yêu cầu bổ sung của chúng tôi.


Bước 7: Sử dụng tab “ Từ nhà thiết kế ” ở phía bên phải của trang để thay đổi giao diện!

Sử dụng bảng màu để thay đổi màu tổng thể của trang liên hệ.

Bước 8: Jotforms cũng cung cấp một tùy chọn để xây dựng thương hiệu cho trang web của bạn trên biểu mẫu Liên hệ.

Để thêm logo của trang web của bạn vào trang Liên hệ với chúng tôi, hãy nhấp vào “ THÊM LOGO CỦA BẠN ” ở phía trên trang liên hệ với chúng tôi.

Nhấp vào trường tệp tải lên hoặc kéo thả hình ảnh HD của biểu trưng của bạn.

Điều chỉnh căn chỉnh và nó đã hoàn thành!

Bước 9: Nhấp vào tab cài đặt.

Tại đây, bạn có thể đặt các điều kiện logic của biểu mẫu (các hiệu ứng như hiển thị các trường ẩn),
Thông báo được gửi qua email cho bạn,
Tích hợp biểu mẫu liên hệ của bạn với các dịch vụ của MailChimp và
người ta có thể đặt thông báo phản hồi tự động của người đã liên hệ với bạn bằng cách sử dụng Liên hệ hình thức.

Bước 10: Nhấp vào tab “ Xuất bản ”.

Trong tab " Xuất bản ", nhấp vào " PLATFORMS " nằm ở phía bên trái.

Chọn nền tảng blogger từ danh sách.

Trên trang tiếp theo, mã để nhúng sẽ được hiển thị.

Nhấp vào nút " Sao chép mã " màu xanh lục (mã sẽ được sao chép vào khay nhớ tạm của bạn).

Bước 11: Bây giờ, đã đến lúc thêm biểu mẫu Liên hệ của chúng tôi vào blogger.


Mở bảng điều khiển blogger, Điều hướng đến trang “ Trang ”,



Nhấp vào “ Trang mới ”,
Thay đổi chế độ xem thành chế độ xem HTML bằng cách nhấp vào nút " HTML ",



Dán mã đã sao chép vào trình chỉnh sửa HTML.Bước 12: Cuối cùng Xuất bản Biểu mẫu Liên hệ của bạn.

Để xuất bản Biểu mẫu liên hệ của bạn, hãy nhấp vào nút màu cam “ Xuất bản ”.



Kết luận

Thêm một trang liên hệ là rất quan trọng trong việc nhận được sự chấp thuận cho các chi nhánh khác nhau.

Giờ đây, bạn có thể làm cho blog của mình trông chuyên nghiệp hơn bằng cách thêm trang “liên hệ với chúng tôi”.
Nguyễn Hoàng

Thích viết, thích chia sẻ những gì mình biết. Mặc dù viết không hay. Nên không quan tâm người ta có thích đọc không? :D

Đăng nhận xét

Mới hơn Cũ hơn