Bạn có muốn tùy chỉnh biểu mẫu liên hệ 7 với plugin Essential Addons của Elementor không?
Mẫu liên hệ 7 là một trong những plugin WordPress trong số các trình tạo biểu mẫu phổ biến nhất. Nó hoàn toàn miễn phí và bạn có thể sử dụng nó để tạo một Mẫu liên hệ trên trang web WordPress của bạn.
Bạn cũng có thể tạo nhiều loại biểu mẫu như biểu mẫu đặt chỗ hoặc biểu mẫu tải tệp lên. Nó cung cấp 14 loại trường mà bạn có thể sử dụng khi tạo biểu mẫu.
Xem thêm: Cách sử dụng tiện ích/mẫu Elementor làm khối Gutenberg
Một trong những vấn đề phổ biến với plugin contact form 7 là quá trình tùy chỉnh của nó. Mẫu liên hệ 7 sử dụng kiểu mặc định của bạn theme WordPress tài sản. Bạn có thể sử dụng một phong cách khác, nhưng sẽ cần có kỹ năng CSS. Nếu bạn không có bất kỳ kỹ năng CSS nào, bạn có thể sử dụng mô-đun Addons cần thiết để tạo kiểu cho biểu mẫu của bạn.
Essential Addons là một tiện ích bổ sung của Elementor giúp tăng cường quá trình tùy chỉnh biểu mẫu Biểu mẫu liên hệ 7 của bạn với Elementor. Elementor và Essential Addons là các plugin freemium. Bạn có thể sử dụng các phiên bản miễn phí của cả hai để tạo kiểu cho biểu mẫu Biểu mẫu liên hệ 7 của mình.
Cách tạo kiểu cho Biểu mẫu liên hệ 7 với các Addons cần thiết
Trước khi bạn bắt đầu tạo kiểu cho biểu mẫu của mình, hãy đảm bảo rằng bạn đã cài đặt Elementor et Addons cần thiết. Sau khi cài đặt và kích hoạt, hãy tạo một trang mới (Trang -> Thêm) và chỉnh sửa nó bằng Elementor.
Trước khi bắt đầu quá trình tùy chỉnh, hãy đặt bố cục trang bằng cách nhấp vào biểu tượng bánh răng ở góc dưới bên trái. Đặt bố cục từ trình đơn thả xuống.
Thêm phần mới bằng cách nhấp vào biểu tượng dấu cộng trong hộp chỉnh sửa và kéo tiện ích con Mẫu liên hệ EA 7 từ bảng điều khiển bên trái trong trình chỉnh sửa.
Chuyển đến bảng điều khiển bên trái và chọn biểu mẫu có kiểu bạn muốn tùy chỉnh.
Sau khi chọn một biểu mẫu, hãy điều hướng đến tab Phong cách. Như bạn có thể thấy, bạn có thể đặt một số tùy chọn kiểu dáng. Dưới đây là các tùy chọn kiểu phổ biến mà bạn có thể đặt.
- Chiều rộng, căn chỉnh và nền của biểu mẫu
Dưới khối Biểu mẫuContainer, nhấp vào bảng chọn màu trong phần Loại nền và đặt màu mong muốn cho nền của biểu mẫu. Bạn có thể sử dụng màu đồng nhất hoặc màu chuyển sắc làm nền.
Đọc cũng: Elementor: Cách nhập hoặc xuất các mẫu
Để đặt căn chỉnh biểu mẫu, chỉ cần chọn tùy chọn căn chỉnh ưa thích của bạn trong phần căn chỉnh biểu mẫu.
Để đặt chiều rộng của biểu mẫu, hãy đặt giá trị của Chiều rộng tối đa của biểu mẫu trong trường Mẫu chiều rộng tối đa.
- Trường nền, chiều rộng đường viền và bán kính
Để xác định nền của các trường, chiều rộng và bán kính của đường viền, bạn có thể mở phần Nhập & Vùng văn bản. Nhấp vào bộ chọn màu trường Màu nền để thiết lập nền.
Bạn cũng có thể đặt màu nền của các trường trong chế độ gỡ lỗi bằng cách nhấp vào tab FOCUS.
Để xác định độ rộng của các trường, bạn có thể xác định giá trị trong các trường Chiều rộng đầu vào. Trong phần này, bạn cũng có thể đặt độ rộng của trường hộp văn bản trong Chiều rộng vùng văn bản.
Để đặt bán kính đường viền, chỉ cần chỉnh sửa trường Bán kính biên giới và đặt giá trị đường viền bạn thích. Bạn cũng có thể đặt kiểu chữ (họ phông chữ, cỡ chữ, kiểu phông chữ) bằng cách nhấp vào biểu tượng bút chì trong trường typography.
- Nhãn
Essential Addons cũng cho phép bạn tùy chỉnh kiểu nhãn biểu mẫu của mình. Bạn có thể đặt màu văn bản cũng như kiểu chữ. Để làm điều này, hãy mở tùy chọn Nhãn. Đặt màu văn bản bằng cách nhấp vào bộ chọn màu trong trường Văn bản màu.
Để đặt kiểu chữ, hãy nhấp vào biểu tượng bút chì trên trường Phép in bản thạch.
- gửi nút
Để tùy chỉnh kiểu của nút gửi, hãy mở khối Gửi nút. Từ đây, bạn có thể đặt căn chỉnh nút, chiều rộng, màu nền, màu văn bản, bán kính đường viền cũng như kiểu chữ.
- Thông báo lỗi
Để tùy chỉnh kiểu thông báo lỗi, bạn có thể mở khối lỗi. Bạn có thể đặt màu văn bản thông báo lỗi, kiểu chữ, màu nền lỗi xác thực, màu văn bản lỗi xác thực, v.v.….
Bạn có thể đặt một số tùy chọn kiểu dáng khác. Bạn có thể thử với bảng điều khiển bên trái cho đến khi hài lòng với kiểu biểu mẫu của mình.
Bạn có thể thêm một số yếu tố khác vào trang của mình bằng các tiện ích có sẵn do Elementor và Essential Addons cung cấp. Khi bạn đã hoàn tất, hãy nhấp vào nút PUBLISH ở dưới cùng của bảng điều khiển bên trái để xuất bản trang của bạn.
Tích hợp biểu mẫu vào một trang thông thường
Sau khi nhấp vào nút PUBLISH, trang liên hệ của bạn về cơ bản đã được xuất bản. Bản thân trang được cung cấp bởi Elementor. Nếu bạn muốn thêm của bạn Mẫu liên hệ 7 sang trang thông thường (trang được tạo bằng Gutenberg, trình chỉnh sửa mặc định của WordPress), bạn có thể cài đặt plugin Elementor Blocks cho Gutenberg. Plugin này sẽ chuyển đổi mẫu Elementor thành khối Gutenberg.
Để đăng ký của bạn Mẫu liên hệ 7 làm mẫu Elementor, nhấp vào nút mũi tên bên cạnh nút XUẤT BẢN / CẬP NHẬT trên bảng điều khiển bên trái và chọn Lưu dưới dạng Mẫu.
Đặt tên cho mẫu của bạn và nhấp vào nút NĂNG LƯỢNG.
Tạo một trang mới (Trang -> Thêm) và đặt tên như “liên hệ với chúng tôi” “liên hệ” hoặc bất kỳ tên nào khác mà bạn thích.
Thêm một khối mới và chọn Thư viện phần tử và chọn mẫu biểu mẫu biểu mẫu liên hệ vừa tạo.
Và bây giờ bạn vừa cá nhân hóa biểu mẫu Contact Form 7 của mình.
Tải xuống Elementor Pro ngay bây giờ !!!
Kết luận
Đây ! Vậy là xong bài viết hướng dẫn bạn cách tùy chỉnh biểu mẫu liên hệ 7 với Essential Addons. 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.
...
