Tạo biểu mẫu liên hệ Blogger với 100Forms

Hôm nay mình sẽ chia sẻ tạo trang biểu mẫu liên hệ Bogger có thể chèn trực tiếp vào bất cứ trang  web/blog của blogger. Đối với hướng dẫn này, hãy sử dụng trực tiếp HTML trong blogger để nó linh hoạt hơn trong cài đặt hiển thị và các tính năng chỉnh sửa.

Biểu mẫu liên hệ là yếu tố chính của trang Liên hệ với chúng tôi, nơi người dùng chỉ cần điền vào biểu mẫu liên hệ và gửi tin nhắn cho chúng tôi mà không cần rời khỏi trang web.

Tạo biểu mẫu liên hệ Blogger với 100Forms

Trong Hướng dẫn này, tôi sẽ chỉ cho bạn cách bạn có thể tạo một biểu mẫu liên hệ tùy chỉnh sẽ hoạt động trên tất cả các mẫu blogger, vì vậy bạn không cần phải lo lắng về việc hỗ trợ mẫu của mình.

Biểu mẫu liên hệ cho blogger

Trong Hướng dẫn này, Chúng tôi sẽ sử dụng 100forms dịch vụ biểu mẫu Liên hệ của bên thứ ba , cung cấp các biểu mẫu HTML đáp ứng trực tuyến cho trang web của chúng tôi.

Tạo biểu mẫu liên hệ với 100Forms

Bước 1: Truy cập trang web 100forms và đăng ký tài khoản của bạn.

Bước 2: Bây giờ, Chọn Tùy chọn Trình tạo Mẫu từ trình đơn trên cùng. (Bạn cũng có thể chọn các biểu mẫu Tạo sẵn).

Bước 3: Nhấp vào Tạo biểu mẫu mới và thêm các câu hỏi cần thiết của bạn (Các trường).

Bước 4: Hãy chắc chắn để đánh dấu là Trường Tên, Email và Trường Quan trọng Bắt buộc như Hình ảnh bên dưới.

Bước 5: Sau khi thêm tất cả các trường bắt buộc, bây giờ hãy nhấp vào Tạo biểu mẫu HTML.

Bước 6: Bây giờ Sao chép tất cả các Mã HTML và Dán chúng vào trang Liên hệ với chúng tôi trên Blogger của bạn.

Vậy là xong Bạn đã Thêm thành công Biểu mẫu liên hệ vào trang web blogger của mình và biểu mẫu của bạn hiện có thể thu thập thông báo từ người dùng.

Bây giờ, Hãy thay đổi cài đặt biểu mẫu như Nơi chúng ta sẽ nhận được bài gửi, từ những email nào chúng ta sẽ nhận được bài gửi, nơi người dùng sẽ được hướng dẫn sau khi gửi biểu mẫu, v.v.

Cài đặt biểu mẫu

Để thay đổi cài đặt biểu mẫu Bấm vào Cài đặt trên biểu mẫu của bạn trong phần Biểu mẫu của tôi như được hiển thị trong hình ảnh bên dưới.

Tại đây, Nhiều Tùy chọn Cài đặt có sẵn:

• Cài đặt chung
• Cài đặt SMTP - máy chủ thư đi cho biểu mẫu của bạn
• Bị chặn bởi từ khóa và cụm từ - chặn spam lặp lại
• Địa chỉ IP bị chặn - chặn khách truy cập không mong muốn
• Trả lời tự động - gửi tin nhắn tự động đến khách truy cập của bạn
• Tải lên tệp - nhận tệp từ khách hàng của bạn qua biểu mẫu của bạn
• Bảng chữ ký - cho phép khách truy cập trang web ký vào biểu mẫu web của bạn
• Đầu ra PDF - nhận tệp PDF được tạo tự động từ biểu mẫu của bạn

Cài đặt chung

1. Tên biểu mẫu: - Chỉ để ghi nhớ biểu mẫu, biểu mẫu được sử dụng trên trang nào hoặc trang nào.
2. Email- Địa chỉ Từ: - Không Cần Thay đổi Bất cứ Điều gì.
3. Chủ đề: - Thay đổi biểu mẫu liên hệ Chủ đề email gửi như “Đã nhận tin nhắn biểu mẫu liên hệ”
4. Địa chỉ trả lại: - Theo mặc định, Người dùng sẽ được chuyển hướng đến trang chủ sau khi gửi biểu mẫu để bạn có thể tạo trang cảm ơn và chuyển hướng người dùng sau khi gửi.
5. Địa chỉ Gửi Email: - Nhập địa chỉ email của bạn nơi bạn muốn nhận tin nhắn gửi.

Ẩn liên kết 100forms

Bây giờ Nhiều người dùng muốn ẩn hoặc xóa liên kết 100forms nhưng nếu chúng tôi trực tiếp xóa liên kết thì chúng tôi sẽ nhận được email từ 100forms về nó và biểu mẫu của chúng tôi sẽ không hoạt động.

Đối với vấn đề này, có một thủ thuật đơn giản để chúng tôi có thể ẩn liên kết.

Bước 1: Thêm tên Lớp hidden trên thẻ div như mã bên dưới:

<div style="float:right"><a href="https://www.100forms.com" id="lnk100" title="form to email">form to email</a></div>

Thay thế cái này thành:

<div class='hidden'><a href='https://www.100forms.com' id='lnk100' title='form to email'>form to email</a></div> 

Bước 2: Bây giờ hãy thêm Mã CSS bên dưới vào trang

<style>
  .hidden{display:none !important} .invisible{visibility:hidden !important}</style>

Nếu bạn đang sử dụng cùng với mẫu blogger giao diện người dùng thì không cần thêm CSS này.

Bạn cũng có thể áp dụng CSS cho biểu mẫu này theo sự lựa chọn của bạn.

Trên đây là toàn bộ code và tạo biểu mẫu liên hệ Blogger với 100Forms. Nếu có bất cứ thắc mắc hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!