Trong bài viết này, bạn sẽ tìm hiểu cách tạo biểu mẫu với Elementor miễn phí.
Mặc dù tiện ích Biểu mẫu chỉ khả dụng trên Elementor Pro, nhưng điều đó không có nghĩa là bạn không thể tạo biểu mẫu trên phiên bản Elementor miễn phí.
Nếu bạn cần thêm biểu mẫu vào trang bạn đang tạo bằng phiên bản Elementor miễn phí, bạn có thể sử dụng hai phương pháp mà chúng tôi sẽ đề cập trong bài viết này.
Elementor, cho dù đó là phiên bản chuyên nghiệp hay phiên bản miễn phí, đi kèm với hai tiện ích mà bạn có thể sử dụng để tạo biểu mẫu. Đây là các widget HTML và Shortcode. Với tiện ích HTML, bạn có thể nhúng biểu mẫu HTML, trong khi tiện ích Mã ngắn cho phép bạn nhúng biểu mẫu từ plugin biểu mẫu sử dụng mã ngắn, chẳng hạn như Đăng ký thông tin 7.
Tạo biểu mẫu với Elementor Phiên bản miễn phí bằng tiện ích HTML
Phương pháp này yêu cầu bạn phải có kỹ năng HTML để tạo biểu mẫu. Hoặc, bạn có thể tải xuống mẫu biểu mẫu HTML từ Internet. W3docs có hơn 60 Mẫu biểu mẫu HTML mà bạn có thể tải xuống miễn phí.
Để bắt đầu, hãy tạo một trang mới và chỉnh sửa nó bằng Elementor (Trang -> Thêm). Tất nhiên, bạn cũng có thể sửa đổi một trang hiện có. Nếu bạn muốn tạo biểu mẫu trên một trang mới, hãy nhớ đặt bố cục biểu mẫu bằng cách nhấp vào biểu tượng bánh răng ở bảng điều khiển phía dưới bên trái.
Thêm một phần mới bằng cách nhấp vào nút dấu cộng trong khu vực chỉnh sửa và thêm biểu mẫu HTML bằng cách kéo nó từ bảng điều khiển bên trái vào khu vực chỉnh sửa. Đặt nó trong khu vực bạn muốn. Sau đó, chuyển đến bảng điều khiển bên trái và dán mã HTML của biểu mẫu vào trường Mã HTML dưới tab Nội dung.
Xuất bản/cập nhật trang sau khi bạn chỉnh sửa xong.
Xem thêm: Cách sử dụng tiện ích/mẫu Elementor làm khối Gutenberg
Một vật. Nếu biểu mẫu HTML của bạn sử dụng CSS, hình ảnh hoặc JavaScript bên ngoài để tạo kiểu, hãy nhớ tải các thư mục chứa mã CSS, hình ảnh và JavaScript lên thư mục gốc của trang web của bạn.
Tạo biểu mẫu trên Elementor miễn phí bằng biểu mẫu liên hệ 7
Nếu bạn không có bất kỳ kỹ năng HTML nào và không muốn sử dụng mẫu biểu mẫu HTML, bạn có thể tạo biểu mẫu trên phiên bản miễn phí của Elementor bằng cách sử dụng plugin Mẫu liên hệ 7. Thực tế còn có nhiều plugin hình thức khác. chúng tôi đề nghị Liên hệ Mẫu 7 bởi vì nó là plugin hình thức phổ biến nhất cho WordPress và hoàn toàn miễn phí.
Đầu tiên, cài đặt plugin Đăng ký thông tin 7. Để thực hiện việc này, hãy đi tới Tiện ích mở rộng -> Thêm. Nhập “mẫu liên hệ 7” vào hộp tìm kiếm và nhấp vào nút cài đặt bây giờ khi bạn đã tìm thấy nó.
Kích hoạt plugin ngay sau khi cài đặt.
Contact Form 7 đi kèm với một biểu mẫu mặc định (a Mẫu liên hệ ). Bạn có thể sử dụng nó nếu bạn muốn. Thay vào đó, nếu bạn muốn tạo một biểu mẫu mới, bạn có thể vào Liên hệ – > Thêm. Đặt tên cho biểu mẫu của bạn để bạn có thể dễ dàng xác định nó trong tương lai.
Theo mặc định, biểu mẫu của bạn sẽ bao gồm bốn trường: tên, email, chủ đề và thông báo.
Nếu bạn muốn thêm trường mới, hãy đặt con trỏ vào khu vực mà bạn muốn thêm trường mới (bạn có thể đặt con trỏ bên dưới hoặc bên trên trường hiện có). Thêm nhãn cho trường biểu mẫu mới ở định dạng <label> votre label préféré </label>.
Đặt con trỏ của bạn ngay sau nhãn và chọn một trường trong tab trường. Bạn có thể thêm dấu ngắt dòng mới để làm cho trường mới của bạn gọn gàng hơn các trường hiện có khác.
Điền vào các trường và bấm vào Chèn thẻ (bạn có thể để mọi thứ như mặc định).
Contact Form 7 sẽ gửi các bài nộp được gửi qua biểu mẫu của bạn tới một email. Bạn có thể đặt email từ tab E-mail.
Bạn có thể vào tab Tin nhắn nếu bạn muốn ghi đè lên các tin nhắn mặc định. Bạn có thể tùy chỉnh thông báo xuất hiện sau khi khách truy cập gửi biểu mẫu thành công hoặc thông báo lỗi khi biểu mẫu không được gửi, v.v.
Nhấn nút Enregistrer sau khi bạn hoàn tất việc chỉnh sửa biểu mẫu và sao chép mã ngắn.
Để thêm biểu mẫu bạn vừa tạo vào trang Elementor của mình, hãy tạo một trang mới và chỉnh sửa nó bằng Elementor hoặc bạn cũng có thể chỉnh sửa một trang hiện có.
Đọc cũng: Cách vô hiệu hóa cửa sổ bật lên Elementor trên điện thoại thông minh
Thêm một phần mới để đặt biểu mẫu và thêm shortcode-widget. Khi tiện ích Mã ngắn được thêm vào, hãy chuyển đến bảng điều khiển bên trái và dán mã ngắn bạn đã sao chép vào trường Mã ngắn dưới tab Nội dung.
Xuất bản/cập nhật trang của bạn sau khi bạn chỉnh sửa xong.
Contact Form 7 sử dụng định dạng phong cách của theme WordPress mà bạn sử dụng. Bạn có thể tạo kiểu cho biểu mẫu Contact Form 7 của mình, nhưng cần có kỹ năng CSS. Bạn cũng có thể xem bài viết này tại Cách tùy chỉnh biểu mẫu Contact Form 7 với Essential Addons và Elementor.
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Vì thế ! Vậy là xong bài viết hướng dẫn bạn cách tạo biểu mẫu với Elementor miễn phí. Nếu bạn có bất kỳ thắc mắc nào về cách đến đó, hãy cho họ biết trong ý kiến.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
