Biểu mẫu liên hệ WordPress 7 chiều rộng đầy đủ

Diễn đàn hỗ trợ đóng cửa trong kỳ nghỉ lễ Giáng sinh, nhưng chúng tôi sẽ sớm hoạt động trở lại để phục vụ bạn.
Chúc tất cả các bạn một Giáng sinh vui vẻ và một năm mới hạnh phúc. )

được gắn thẻ. mẫu liên hệ 7

Đang xem 2 bài đăng - 1 đến 2 (trong tổng số 2)

Diễn đàn hỗ trợ đóng cửa trong kỳ nghỉ lễ Giáng sinh, nhưng chúng tôi sẽ sớm hoạt động trở lại để phục vụ bạn.
Chúc tất cả các bạn một Giáng sinh vui vẻ và một năm mới hạnh phúc. )

• Tác giả

  bài viết

• Tháng Một 15, 2015 lúc 9. 35 giờ chiều

  
  domvitz
  

  Người tham gia

  Xin chào,

  Tôi đã thử sử dụng kiểu css cho biểu mẫu CF7 (tôi chỉ sử dụng biểu mẫu này vì phiên bản bao gồm không cho phép tệp đính kèm hoặc tải lên) và vùng văn bản chính sẽ vừa với 100% nhưng các dòng văn bản (tên, địa chỉ email, v.v.)

  Tôi muốn tất cả các trường đầu vào kéo dài đến 100% hoặc khu vực, có điều gì đó đang ngăn chặn điều này vì tôi đã sử dụng cùng một css trên các chủ đề khác và không gặp vấn đề gì

  Hầu hết các trang web cần một cách để khách hàng, khách hàng tiềm năng hoặc độc giả thường xuyên tiếp cận. Bạn có thể mua một chủ đề có trang liên hệ tùy chỉnh được tích hợp sẵn hoặc thử tự viết mã cho trang liên hệ, nhưng các tùy chọn này thường tốn kém hoặc phức tạp. Bạn không có thời gian cho việc đó – điều này đưa chúng tôi đến Biểu mẫu liên hệ 7

  Mẫu liên hệ 7 là gì?

  Contact Form 7 là một plugin WordPress miễn phí mà bạn có thể sử dụng để tạo nhiều biểu mẫu liên hệ cho trang web của mình. Plugin này không chỉ miễn phí mà mã ngắn tùy chỉnh cho từng biểu mẫu liên hệ bạn tạo giúp dễ dàng thêm biểu mẫu liên hệ của bạn vào bất kỳ khu vực bài đăng, trang hoặc tiện ích nào

  Chúng tôi yêu thích plugin này đến mức hầu như mọi chủ đề WPExplorer đều hỗ trợ nó, ngay cả chủ đề WordPress cao cấp bán chạy nhất của chúng tôi. Và các nhà phát triển khác đồng ý, vì bạn sẽ khó tìm thấy một chủ đề không tương thích với nó

  Tại sao chọn Mẫu liên hệ 7?

  Vì vậy, bây giờ bạn đã biết Contact Form 7 là gì, câu hỏi tiếp theo của bạn có thể là tại sao lại có plugin này?

  Đầu tiên, nó miễn phí – vì không có phiên bản cao cấp. Vì vậy, so với các plugin dạng “miễn phí” khác, bạn sẽ không thấy hàng tấn bán thêm được tích hợp trong bảng điều khiển chính, điều này thực sự tốt. Nó cũng có thể tùy chỉnh. Cũng có những cách dễ dàng để chỉnh sửa biểu mẫu của bạn bằng các tham số có sẵn hoặc bằng một chút CSS. Và như chúng tôi đã đề cập, nó tương thích với rất nhiều chủ đề miễn phí và cao cấp, vì vậy nếu bạn quyết định thay đổi chủ đề của mình sau này, biểu mẫu liên hệ của bạn sẽ vẫn hoạt động

  Khi điều đó đã rõ ràng, hãy xem cách bạn có thể sử dụng Biểu mẫu liên hệ 7 trên trang web WordPress của mình

  Cách bắt đầu với Mẫu liên hệ 7

  Thông tin & Tải xuống

  Cài đặt dễ dàng. Chỉ cần điều hướng đến Plugin > Thêm mới và sử dụng tùy chọn Tìm kiếm để tìm plugin Contact Form 7. Cài đặt và kích hoạt plugin

  Sau khi kích hoạt, bạn sẽ thấy một mục menu “Liên hệ” tiện dụng trong bảng điều khiển WordPress của mình. Nhấp vào nó để đến trang quản lý biểu mẫu liên hệ chính của bạn

  

  Các tác giả plugin đã đủ tốt để bao gồm một số thông tin hữu ích trong bảng điều khiển – vui lòng loại bỏ thông báo này bất kỳ lúc nào. Theo mặc định, cũng sẽ có một ví dụ “Mẫu liên hệ 1” đang chờ bạn. Chúng tôi khuyên bạn nên xóa biểu mẫu này để bạn có thể bắt đầu lại từ đầu

  Thêm mới để tạo biểu mẫu liên hệ đầu tiên của bạn. Bạn sẽ thấy nhiều tùy chọn khi biểu mẫu liên hệ của bạn mở ra. Đừng sợ - tôi hứa nó rất dễ

  Trước tiên, bạn sẽ nhận thấy một hộp ở đầu trang. Đây là nơi bạn có thể thay đổi tên biểu mẫu của mình. Chúng tôi khuyên bạn nên đặt tên cho biểu mẫu theo ý nghĩa phù hợp với mục đích của biểu mẫu – chẳng hạn như bạn sẽ sử dụng biểu mẫu ở đâu hoặc như thế nào

  Bây giờ, chuyển sang các cài đặt có sẵn. Chúng tôi sẽ đi qua từng tab này

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

  Tab Biểu mẫu là nơi bạn sẽ thực sự tạo biểu mẫu liên hệ của mình. Contact Form 7 sử dụng các thẻ khác nhau để thêm các phần biểu mẫu khác nhau. Biểu mẫu liên hệ mặc định bao gồm các trường tên, email, chủ đề, tin nhắn và nút gửi

  Để xóa một trường, chỉ cần xóa mã của nó khỏi biểu mẫu

  Để thêm một trường, chỉ cần nhấp vào bất kỳ thẻ nào có sẵn để chèn mã vào phần biểu mẫu của bạn. Một cửa sổ bật lên sẽ mở ra để bạn có thể xác nhận thông tin liên quan trước khi chèn

  Bạn có thể tạo thẻ cho văn bản, email, URL, điện thoại, số, ngày, vùng văn bản, menu thả xuống, hộp kiểm, nút radio, chấp nhận (e. g. điều khoản), bài kiểm tra, nút tải lên và gửi tệp

  Cài đặt thư

  Đây là nơi bạn có thể thay đổi email bạn nhận được khi người dùng gửi biểu mẫu liên hệ. Theo mặc định, plugin sẽ sử dụng địa chỉ email của quản trị viên trang web của bạn, nhưng bạn có thể dễ dàng thay đổi địa chỉ này thành email hỗ trợ hoặc nhiều địa chỉ email

  Ngoài ra, nếu bạn chọn thêm thẻ tùy chỉnh vào biểu mẫu của mình, hãy đảm bảo thêm đoạn mã ngắn được tạo vào nội dung Thư. Nếu bạn không dán đoạn mã đó vào, bạn sẽ không nhận được câu trả lời mà người dùng gửi cho trường đó

  Tùy chọn Thư 2 cho phép bạn tạo thư trả lời tự động cho phép người dùng biết thư của họ đã được nhận. Hoặc nó có thể được sử dụng nếu bạn muốn gửi một email khác cho những người nhận khác nhau. Có thể bạn muốn nhận email có đầy đủ thông tin biểu mẫu liên hệ, nhưng bạn chỉ muốn nhân viên hỗ trợ của mình nhận email có một hoặc hai trường. Có nhiều cách bạn có thể sử dụng tính năng này

  Cài đặt tin nhắn

  Chỉnh sửa thông báo hiển thị cho người dùng về nhiều tác vụ đã hoàn thành (hoặc chưa hoàn thành). Bạn có thể tạo thông báo tùy chỉnh cho các sự kiện như gửi liên hệ thành công, lỗi xác thực, định dạng không chính xác, v.v.

  Cài đặt thêm

  Tab cuối cùng cho Cài đặt bổ sung cho phép bạn bật các tùy chọn tích hợp khác nhau chỉ dành cho người đăng ký, chế độ demo (để không có email nào thực sự được gửi), xác thực chấp nhận, tùy chọn lưu trữ thư, v.v. Bạn có thể xem thêm các cài đặt bổ sung của Contact Form 7 trong tài liệu của mình

  Khi bạn chỉnh sửa xong, hãy đảm bảo lưu các thay đổi của bạn

  Sử dụng biểu mẫu của bạn

  Sau khi hoàn thành biểu mẫu liên hệ và sẵn sàng sử dụng, bạn có thể sao chép mã ngắn của biểu mẫu  để chèn vào trang, bài đăng, khu vực tiện ích, v.v. Bạn có thể tìm thấy mã ngắn ở đầu trang tạo biểu mẫu liên hệ ngay bên dưới tiêu đề biểu mẫu sau khi bạn lưu (được tô sáng). Nó sẽ trông giống như thế này

  [contact-form-7 id="330" title="Contact Page"]

  Hoặc nếu bạn đang sử dụng trình tạo trang như WPBakery hoặc Elementor, bạn chỉ cần sử dụng mô-đun trình tạo Biểu mẫu liên hệ 7 có liên quan để chọn và chèn biểu mẫu của mình trên một trang

  Mẫu liên hệ 7 mẹo nâng cao

  Bây giờ, nếu muốn, bạn có thể thực sự thích thú với Mẫu liên hệ 7 chỉ với một chút mã tùy chỉnh. Dưới đây là một số thủ thuật yêu thích của tôi mà bạn có thể sử dụng để tạo biểu mẫu liên hệ ấn tượng cho trang web của mình

  Văn bản giữ chỗ

  Có thể bạn không muốn có tiêu đề trên các trường biểu mẫu của mình hoặc có thể bạn muốn thêm văn bản để chứng minh cho người dùng biết họ nên nhập gì vào một tệp cụ thể. Việc thêm trình giữ chỗ rất dễ dàng, chỉ cần xóa nhãn khỏi các trường của bạn, sau đó thêm văn bản ưa thích của bạn cùng với dấu ngoặc kép vào cuối mã của bạn trong dấu ngoặc vuông như vậy

  [text* your-name "Your Name"]

  Các trường nhập có chiều rộng đầy đủ

  Cá nhân tôi không thích cách các trường văn bản mặc định quá ngắn. Có hai cách để thay đổi độ rộng của trường văn bản. Cách gian lận là chỉ cần thêm chiều rộng ký tự mà bạn muốn vào mã cho trường đó trong phần biểu mẫu. Vì vậy, nếu bạn muốn trường có chiều rộng đầy đủ có chỗ cho 300 ký tự, hãy thêm 300 theo sau là dấu gạch chéo ngược như vậy

  [text* your-name 300/ "Your Name"]

  Nếu bạn muốn thực hiện đúng cách, bạn sẽ cần thêm đoạn mã sau vào biểu định kiểu CSS của mình

  input.wpcf7-text { width: 100%; }

  Nhưng điều này sẽ ảnh hưởng đến TẤT CẢ các trường văn bản của Biểu mẫu liên hệ 7 trên toàn bộ cài đặt WordPress của bạn

  Nếu bạn đang sử dụng trình tạo trang WPBakery, bạn có tùy chọn để giải quyết vấn đề này và nhắm mục tiêu một hàng cụ thể trên một bài đăng hoặc trang cụ thể để chỉ một biểu mẫu liên hệ riêng biệt được tạo kiểu. Trước tiên, nhấp vào hàng và thêm ID hàng tùy chỉnh. Sau đó lưu

  Tiếp theo, nhấp vào biểu tượng bánh răng ngay phía trên khu vực nội dung chính của bài đăng hoặc trang của bạn và nhập #YOUR-ROW-ID theo sau là mã CSS được đề cập ở trên

  Các trường nhập cạnh nhau

  Một thủ thuật thú vị khác là thêm các trường của bạn cạnh nhau. Tôi nghĩ điều này giữ cho biểu mẫu liên hệ siêu sạch và chuyên nghiệp. Để làm điều này với Total WordPress Theme, chúng tôi đã giúp bạn dễ dàng và thêm một lớp tùy chỉnh. Chỉ cần thêm class=”one-half” vào thẻ p của bạn như vậy

  [text* your-name "Your Name"]
  
  [email* your-email "Your Email"]
  
  [textarea your-message]
  
  [submit "Submit Form"]

  Ghi chú. Mẹo này dành riêng cho người dùng chủ đề Total, nhưng các chủ đề khác có thể tích hợp sẵn kiểu dáng biểu mẫu tương tự

  Thẻ email ưa thích

  Đôi khi bạn cần nhiều thông tin hơn người dùng gửi. Đây là lúc các thẻ email đặc biệt của Biểu mẫu liên hệ 7 trở nên hữu ích. Với những thứ này, bạn có thể thêm dấu thời gian email, địa chỉ IP gửi, ID hoặc tiêu đề cho bài đăng chứa biểu mẫu liên hệ, v.v. Tất cả những công cụ này có thể giúp bạn sắp xếp các lần gửi biểu mẫu của mình

  Tìm hiểu thêm về Mẫu liên hệ 7

  Để biết thêm mẹo về cách sử dụng Biểu mẫu liên hệ 7, vui lòng tham khảo tài liệu của họ. Tại đây, bạn sẽ tìm thấy giải thích chi tiết về các thẻ khác nhau và khả năng của chúng, mẹo hữu ích từ tác giả plugin và các bài viết hữu ích về khắc phục sự cố nếu vì lý do nào đó plugin không hoạt động với bạn

  Contact Form 7 là một trong những plugin miễn phí tốt nhất hiện có và là một trong những tùy chọn tốt nhất để tạo biểu mẫu liên hệ trên bất kỳ trang web WordPress nào. Hy vọng rằng hướng dẫn này hữu ích, nhưng nếu bạn có bất kỳ câu hỏi nào hoặc muốn chia sẻ suy nghĩ của mình về Mẫu liên hệ 7, vui lòng để lại nhận xét bên dưới cho chúng tôi

  Làm cách nào để tăng chiều rộng của biểu mẫu liên hệ 7?

  Trên điện thoại di động, văn bản sẽ điều chỉnh theo kích thước màn hình, nhưng biểu mẫu sẽ bị cắt, như bạn có thể thấy bên dưới. Để khắc phục điều này, chúng tôi sẽ phải đặt chiều rộng 100% cho biểu mẫu bằng cách sử dụng mã CSS sau, bạn chỉ cần thêm mã này bằng cách vào Trang tổng quan -> Hình thức -> Giao diện -> . .

  Mẫu liên hệ 7 hoặc WPForms nào tốt hơn?

  Cái nào tốt hơn giữa Contact Form 7 và WPForms? . Về tính năng, mẫu liên hệ này tốt hơn. Tuy nhiên, nếu bạn muốn thứ gì đó hiệu quả và miễn phí, Biểu mẫu liên hệ 7 là lựa chọn tốt hơn .

  Làm cách nào để tùy chỉnh kiểu dáng của Contact Form 7 để phù hợp với trang web của bạn?

  Vì Biểu mẫu liên hệ 7 không có tùy chọn kiểu tích hợp sẵn nên bạn cần phải sử dụng CSS để tạo kiểu cho biểu mẫu của mình . Contact Form 7 tạo mã tuân thủ tiêu chuẩn cho các biểu mẫu. Mỗi phần tử trong biểu mẫu có ID và lớp CSS phù hợp được liên kết với nó, giúp dễ dàng tùy chỉnh nếu bạn biết CSS.

  Contact Form 7 có hoạt động với Elementor không?

  Nhiều người dùng đã báo cáo rằng Contact Form 7 hoạt động tốt với Elementor. Elementor là plugin biểu mẫu liên hệ phổ biến dành cho WordPress, cho phép người dùng tạo biểu mẫu tùy chỉnh, cũng như gửi thông báo qua email khi ai đó gửi biểu mẫu