Cách Hiển Thị Các Mục Nhập Biểu Mẫu WordPress Trên Trang Web Của Bạn (2 Cách)

Bạn có muốn hiển thị mục nhập form WordPress ở giao diện website của mình không?

Hiển thị các mục nhập form ở phía trước cho phép bạn hiển thị thông tin quan trọng cho người dùng. Bạn có thể sử dụng nó để hiển thị các đánh giá tích cực, tạo folder, hiển thị lịch sự kiện, v.v.

Trong bài viết này, WPBeginner Việt Nam sẽ chỉ cho bạn cách hiển thị mục nhập form WordPress trên website của bạn.

Tại sao phải hiển thị mục nhập form WordPress ở giao diện người dùng?

Biểu mẫu rất tuyệt vời để giữ liên lạc với người dùng, nhận phản hồi và recommend, giúp người dùng giải quyết vấn đề của họ, v.v. Hiển thị các mục nhập form trên website WordPress của bạn cho người dùng có thể hữu ích trong một số tình huống nhất định.

Ví dụ, bạn có thể hiển thị lời chứng thực và đánh giá sản phẩm mà người dùng gửi qua form trực tuyến. Theo cách này, bạn có thể tận dụng bằng chứng xã hội để xây dựng lòng tin thương hiệu và thúc đẩy chuyển đổi.

Bạn cũng có thể hiển thị các mục nhập form để tạo danh bạ doanh nghiệp, hiển thị các sự kiện do người dùng gửi trên lịch, hiển thị số liệu thống kê và hiển thị các thông tin quan trọng khác được thu thập thông qua các form trực tuyến trên website của bạn. Đây là một cách tuyệt vời để cung cấp bằng chứng xã hội có giá trị cho các sản phẩm và dịch vụ của bạn đồng thời tăng thêm độ tin cậy cho doanh nghiệp của bạn.

Tuy nhiên, theo mặc định, khi người dùng gửi form trên website WordPress của bạn, mục nhập của họ sẽ được giữ riêng tư. Chỉ có quản trị viên WordPress và những người dùng khác có quyền mới có thể xem mục nhập form.

Hãy cùng xem cách bạn có thể hiển thị các mục nhập form ở giao diện website WordPress của mình bằng Formidable Forms và WPForms. Bạn có thể nhấp vào các link bên dưới để chuyển đến phần bạn muốn.

Video hướng dẫn

Nếu bạn thích hướng dẫn bằng văn bản, hãy đọc tiếp.

Hiển thị các mục nhập form WordPress bằng cách sử dụng Formidable Forms

Cách dễ nhất để hiển thị các mục nhập form trong WordPress là sử dụng Formidable Forms. Đây là một plugin form liên hệ WordPress phổ biến và cung cấp trình tạo form tất cả trong một với nhiều tính năng custom.

Bạn có thể tạo nhiều loại form như khảo sát, câu đố, form thanh toán và các form nâng cao như lịch sự kiện, danh bạ và máy tính.

Trước tiên, bạn cần cài đặt và kích hoạt plugin Formidable Forms trên website của mình. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Trong hướng dẫn này, WPBeginner Việt Nam sẽ sử dụng phiên bản Formidable Forms Pro vì nó bao gồm addon Visual Views.

Sau khi kích hoạt, bạn có thể đi đến Formidable » Biểu mẫu và nhấp vào nút ‘+ Thêm mới’ ở trên cùng.

Sau đó, một popup sẽ xuất hiện yêu cầu bạn chọn loại form, chẳng hạn như form Liên hệ với WPBeginner Việt Nam, form đăng ký người dùng, khảo sát, v.v.

Tiếp tục và chọn loại form bạn thích. Vì mục đích của hướng dẫn này, WPBeginner Việt Nam sẽ tạo một form liên hệ để thu thập lời chứng thực từ người dùng.

Tiếp theo, bạn cần nhập tên form và mô tả.

Khi hoàn tất, chỉ cần nhấp vào nút ‘Tạo’.

Bây giờ bạn có thể sử dụng trình tạo form để custom form của mình.

Formidable cung cấp trình tạo kéo và thả, cực kỳ dễ sử dụng. Chỉ cần chọn bất kỳ trường form nào bạn muốn thêm vào form của mình từ các option bên trái và đặt chúng vào mẫu form.

Sau khi custom, hãy nhúng form vào bất kỳ đâu trên website của bạn.

Plugin cung cấp nhiều option để thêm form của bạn. Cách dễ nhất là nhấp vào nút ‘Nhúng’ trong trình tạo form ở trên cùng, sau đó chọn một trang hiện có hoặc tạo một trang mới để thêm form của bạn.

Ngoài ra, bạn cũng có thể sử dụng block Formidable Forms hoặc block shortcode trong trình chỉnh sửa content WordPress để nhúng form của mình.

Tiếp theo, bạn có thể đặt tên cho trang và xem trước.

Khi bạn đã hài lòng với giao diện, hãy tiếp tục và xuất bản trang của bạn.

Sau khi form của bạn hoạt động và bạn bắt đầu nhận được mục nhập, bạn sẽ cần cài đặt và kích hoạt addon Visual Views trong Formidable Forms.

Để làm điều đó, chỉ cần đi đến Formidable » Tiện ích bổ sung từ dashboard WordPress của bạn. Tiếp theo, cuộn xuống addon ‘Visual Views’ và nhấp vào nút ‘Cài đặt’.

Sau khi addon được kích hoạt, bạn có thể đi đến Đáng gờm » Lượt xem từ dashboard WordPress của bạn.

Sau đó, chỉ cần nhấp vào nút ‘+ Thêm mới’ ở trên cùng.

Tiếp theo, một popup sẽ xuất hiện, tại đó bạn cần chọn loại chế độ xem. Plugin cung cấp chế độ xem dạng grid, dạng bảng, dạng lịch và dạng cổ điển mà bạn có thể sử dụng.

Trong hướng dẫn này, chúng ta sẽ sử dụng chế độ xem ‘Lưới’ để hiển thị các mục nhập form.

Sau đó, bạn sẽ phải chọn nguồn dữ liệu cho chế độ xem của mình.

Tiếp tục và nhấp vào dropdown menu ‘Sử dụng mục nhập từ form’ để chọn form của bạn. Ngoài ra còn có option để nhập tên chế độ xem.

Sau khi chọn nguồn dữ liệu, bạn chỉ cần nhấp vào nút ‘Tạo chế độ xem’.

Thao tác này sẽ khởi chạy trình xây dựng chế độ xem trong Formidable Forms.

Để bắt đầu, hãy nhấp vào nút ‘Trình tạo layout’.

Tiếp theo, bạn cần chọn một layout để hiển thị các mục nhập form của mình.

Chỉ cần chọn một layout từ các option được đưa ra ở trên cùng. Bạn có thể thêm nhiều layout để hiển thị các mục nhập form.

Sau khi chọn layout, hãy nhấp vào nút ‘Lưu layout’.

Tiếp theo, bạn có thể thêm content vào trình tạo chế độ xem bằng cách nhấp vào nút ‘+’. Có các option để custom layout của mục nhập form và thêm content trước và sau mục nhập form.

Plugin này cũng cung cấp các option để thay đổi kiểu chữ, màu nền, đường viền và nhiều option khác trong bảng Cài đặt kiểu grid ở bên trái.

Bạn cũng sẽ thấy một shortcode bên dưới trường Tên chế độ xem, bạn sẽ cần code này khi hiển thị các mục nhập form trên website của mình.

Có nhiều option nâng cao hơn trong bảng Cài đặt kiểu grid. Trong cài đặt nâng cao, bạn có thể giới hạn số lượng mục nhập, kích thước trang và nhiều hơn nữa.

Khi bạn đã custom chế độ xem, đừng quên nhấp vào nút ‘Cập nhật’ ở trên cùng.

Tiếp theo, bạn sẽ cần hiển thị các mục nhập form của mình trên website WordPress. Để thực hiện việc đó, hãy sao chép shortcode được cung cấp bên dưới Tên chế độ xem.

Mã ngắn sẽ trông như thế này:

[display-frm-data id=2410]

Sau đó, hãy đến bất kỳ bài đăng hoặc trang nào mà bạn muốn hiển thị mục nhập form. Khi bạn đã vào trình chỉnh sửa content, chỉ cần thêm block ‘Mã ngắn’.

Bây giờ, hãy nhập shortcode mà bạn đã sao chép trước đó vào block shortcode.

Sau đó, bạn có thể xem trước trang và xuất bản nó.

Bây giờ bạn có thể truy cập website của mình để xem các mục nhập form đang hoạt động.

Đây là hình ảnh trên website demo của WPBeginner Việt Nam:

Hiển thị các mục nhập form WordPress bằng cách sử dụng WPForms

Một cách khác để hiển thị các mục nhập form ở header website WordPress của bạn là thông qua Biểu mẫu WPTuy nhiên, phương pháp này yêu cầu phải chỉnh sửa code và được khuyến khích cho những người dùng nâng cao có kiến ​​thức về code hóa.

WPForms là plugin form liên hệ tốt nhất cho WordPress và cho phép bạn tạo nhiều loại form khác nhau bằng trình tạo form kéo và thả.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin WPForms. Để biết thêm chi tiết, vui lòng xem hướng dẫn của WPBeginner Việt Nam về cách cài đặt plugin WordPress.

Tiếp theo, bạn sẽ cần tạo một form trực tuyến bằng WPForms. Bạn có thể xem hướng dẫn từng bước của WPBeginner Việt Nam về cách tạo form liên hệ trong WordPress.

Khi bạn bắt đầu nhận được các mục nhập form, bạn sẽ cần nhập code sau vào file functions.php của theme. Làm như vậy có thể phá hỏng website của bạn nếu bạn mắc phải ngay cả một lỗi nhỏ, vì vậy WPBeginner Việt Nam khuyên bạn nên sử dụng Mã WP.

Vui lòng xem hướng dẫn của WPBeginner Việt Nam về cách dễ dàng thêm code custom vào WordPress để biết thêm thông tin.

/**
 * Custom shortcode to display WPForms form entries in table view.
 *
 * Basic usage: [wpforms_entries_table id="FORMID"].
 * 
 * Possible shortcode attributes:
 * id (required)  Form ID of which to show entries.
 * user           User ID, or "current" to default to current logged in user.
 * fields         Comma separated list of form field IDs.
 * number         Number of entries to show, defaults to 30.
 * 
 * @link 
 *
 * Realtime counts could be delayed due to any caching setup on the site
 *
 * @param array $atts Shortcode attributes.
 * 
 * @return string
 */
 
function wpf_entries_table( $atts ) {
 
    // Pull ID shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
                        'type' => 'all' // all, unread, read, or starred.
        ],
        $atts
    );
 
    // Check for an ID attribute (required) and that WPForms is in fact
    // installed and activated.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return;
    }
 
    // Get the form, from the ID provided in the shortcode.
    $form = wpforms()->form->get( absint( $atts['id'] ) );
 
    // If the form doesn't exists, abort.
    if ( empty( $form ) ) {
        return;
    }
 
    // Pull and format the form data out of the form object.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
 
    // Check to see if we are showing all allowed fields, or only specific ones.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
 
    // Setup the form fields.
    if ( empty( $form_field_ids ) ) {
        $form_fields = $form_data['fields'];
    } else {
        $form_fields = [];
        foreach ( $form_field_ids as $field_id ) {
            if ( isset( $form_data['fields'][ $field_id ] ) ) {
                $form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
            }
        }
    }
 
    if ( empty( $form_fields ) ) {
        return;
    }
 
    // Here we define what the types of form fields we do NOT want to include,
    // instead they should be ignored entirely.
    $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
 
    // Loop through all form fields and remove any field types not allowed.
    foreach ( $form_fields as $field_id => $form_field ) {
        if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
            unset( $form_fields[ $field_id ] );
        }
    }
 
    $entries_args = [
        'form_id' => absint( $atts['id'] ),
    ];
 
    // Narrow entries by user if user_id shortcode attribute was used.
    if ( ! empty( $atts['user'] ) ) {
        if ( $atts['user'] === 'current' && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }
 
    // Number of entries to show. If empty, defaults to 30.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }
 
// Filter the type of entries all, unread, read, or starred
    if ( $atts['type'] === 'unread' ) {
        $entries_args['viewed'] = '0';
    } elseif( $atts['type'] === 'read' ) {
        $entries_args['viewed'] = '1';
    } elseif ( $atts['type'] === 'starred' ) {
        $entries_args['starred'] = '1';
    }
 
    // Get all entries for the form, according to arguments defined.
    // There are many options available to query entries. To see more, check out
    // the get_entries() function inside class-entry.php (
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '
No entries found.
';
    }
 
    ob_start();
 
    echo '

Sau khi bạn đã thêm code vào website của mình bằng cách sử dụng plugin WPCode miễn phíbạn sẽ cần nhập shortcode sau vào bất kỳ trang hoặc bài đăng nào để hiển thị mục nhập form.

[wpforms_entries_table id="FORMID"]

Chỉ cần thay thế FORMID bằng ID form của bạn.

Bạn có thể tìm ID form bằng cách vào WPForms » Tất cả các form và sau đó nhìn vào cột Mã ngắn.

Để thêm shortcode, bạn chỉ cần tạo một trang mới hoặc chỉnh sửa trang hiện có.

Tiếp theo, hãy thêm block ‘Mã ngắn’.

Sau khi thêm block, bạn chỉ cần nhập shortcode.

Bây giờ hãy xem trước trang WordPress của bạn và nhấp vào nút ‘Xuất bản’ ở trên cùng.

Sau đây là giao diện xem trước các mục nhập trong form của WPBeginner Việt Nam ở header:

Bạn có thể custom thêm màn hình bằng cách sử dụng các kiểu CSS custom nếu cần.

Chúng tôi hy vọng bài viết này giúp bạn biết cách hiển thị các mục nhập form WordPress trên website của mình. Bạn cũng có thể muốn xem hướng dẫn của WPBeginner Việt Nam về cách tạo theme WordPress custom hoặc lựa chọn chuyên gia của WPBeginner Việt Nam về các plugin form liên hệ tốt nhất cho WordPress.

Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên Twitter Và Facebook.