Cách hiển thị các mục nhập biểu mẫu WordPress trên trang web của bạn

Bạn có muốn hiển thị các mục nhập biểu mẫu WordPress của mình trên giao diện người dùng của trang web của bạn không?

Hiển thị các mục nhập biểu mẫu trên giao diện người dùng cho phép bạn hiển thị thông tin quan trọng cho khách truy cập. Bạn có thể sử dụng nó để hiển thị các đánh giá tích cực, tạo thư mục, hiển thị lịch sự kiện và hơn thế nữa.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách hiển thị các mục nhập biểu mẫu WordPress trên trang web của bạn.

Tại sao lại hiển thị các mục nhập biểu mẫu WordPress trên giao diện người dùng?

Biểu mẫu rất tốt để giữ liên lạc với khách truy cập của bạn, nhận phản hồi và đề xuất, giúp người dùng giải quyết vấn đề của họ và hơn thế nữa. Hiển thị các mục nhập biểu mẫu trên trang web WordPress của bạn cho khách truy cập có thể hữu ích trong một số trường hợp 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 thông qua biểu mẫu trực tuyến. Bằng 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 biểu mẫu để 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ị thống kê và hiển thị thông tin quan trọng khác được thu thập thông qua biểu mẫu trực tuyến trên trang web của bạn.

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

Hãy xem cách bạn có thể hiển thị các mục nhập biểu mẫu trên giao diện người dùng của trang web WordPress của mình bằng cách sử dụng Mẫu đơn và WPForms. Bạn có thể nhấp vào các liên kết bên dưới để chuyển tới phần ưa thích của bạn.

• Hiển thị các mục nhập biểu mẫu WordPress với các biểu mẫu có định dạng (Cách dễ dàng)
• Hiển thị các mục nhập biểu mẫu WordPress với WPForms (Nâng cao)

Hiển thị các mục nhập biểu mẫu WordPress bằng cách sử dụng các biểu mẫu có định dạng

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

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

Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin Mẫu đơn trên trang web của mình. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Đối với hướng dẫn này, chúng tôi sẽ sử dụng phiên bản Formced Forms Pro vì nó bao gồm phần bổ trợ Chế độ xem trực quan.

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

Sau đó, một cửa sổ bật lên sẽ xuất hiện yêu cầu bạn chọn một loại biểu mẫu, chẳng hạn như biểu mẫu liên hệ với chúng tôi, biểu mẫu đăng ký người dùng, khảo sát, v.v.

Hãy tiếp tục và chọn loại biểu mẫu ưa thích của bạn. Vì lợi ích của hướng dẫn này, chúng tôi sẽ tạo một biểu mẫu liên hệ để thu thập lời chứng thực từ người dùng.

Tiếp theo, bạn sẽ cần nhập tên biểu mẫu và mô tả.

Khi bạn 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 biểu mẫu để tùy chỉnh biểu mẫu của mình.

Formced cung cấp trình tạo kéo và thả siêu dễ sử dụng. Chỉ cần chọn bất kỳ trường biểu mẫu nào bạn muốn thêm vào biểu mẫu của mình từ các tùy chọn ở bên trái và đặt chúng vào mẫu biểu mẫu.

Sau khi tùy chỉnh biểu mẫu liên hệ của bạn, hãy tiếp tục và nhúng nó vào bất kỳ đâu trên trang web của bạn.

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

Ngoài ra, bạn cũng có thể sử dụng khối Mẫu đơn hoặc khối mã ngắn trong trình chỉnh sửa nội dung WordPress để nhúng biểu mẫu của mình.

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

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

Sau khi biểu mẫu của bạn hoạt động và bạn bắt đầu nhận được các mục nhập, thì bạn sẽ cần phải cài đặt và kích hoạt bổ trợ Chế độ xem trực quan trong Biểu mẫu đáng kể.

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

Sau khi addon hoạt động, bạn có thể truy cập Có định dạng »Chế độ xem từ bảng điều khiển 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 cửa sổ bật lên sẽ xuất hiện nơi bạn cần chọn kiểu xem. Plugin cung cấp lưới, bảng, lịch và chế độ xem cổ điển mà bạn có thể sử dụng.

Đối với hướng dẫn này, chúng tôi sẽ sử dụng chế độ xem ‘Lưới’ để hiển thị các mục nhập biểu mẫu.

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

Hãy tiếp tục và nhấp vào menu thả xuống ‘Sử dụng mục nhập từ biểu mẫu’ và chọn biểu mẫu của bạn. Ngoài ra còn có một tùy chọn để nhập tên chế độ xem.

Sau khi chọn nguồn dữ liệu của 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 tạo chế độ xem trong Dạng có thể quyết định.

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

Tiếp theo, bạn sẽ cần chọn một bố cục để hiển thị các mục nhập biểu mẫu của mình.

Chỉ cần chọn một bố cục từ các tùy chọn đã cho ở trên cùng. Bạn có thể thêm nhiều bố cục để hiển thị các mục nhập của biểu mẫu.

Sau khi chọn bố cục, hãy tiếp tục và nhấp vào nút ‘Lưu bố cục’.

Tiếp theo, bạn có thể thêm nội dung vào trình tạo chế độ xem bằng cách nhấp vào nút ‘+’. Có các tùy chọn để tùy chỉnh bố cục của các mục nhập biểu mẫu và thêm nội dung trước và sau các mục nhập biểu mẫu.

Plugin cũng cung cấp các tùy chọn để thay đổi kiểu chữ, màu nền, đường viền, v.v. trong bảng Cài đặt Kiểu lưới ở bên trái của bạn.

Bạn cũng sẽ thấy một mã ngắn trong trường Tên Chế độ xem, bạn sẽ cần mã này khi hiển thị các mục nhập biểu mẫu trên trang web của mình.

Có nhiều tùy chọn nâng cao hơn trong bảng Cài đặt Kiểu lưới. 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à hơn thế nữa.

Khi bạn đã tùy chỉnh 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 biểu mẫu trên trang web WordPress của mình. Để làm điều đó, hãy sao chép mã ngắn được cung cấp dưới Tên chế độ xem.

Mã ngắn sẽ giống như sau:

[display-frm-data id=2410]

Sau đó, hãy chuyển đến bất kỳ bài đăng hoặc trang nào bạn muốn hiển thị các mục nhập của biểu mẫu. Khi bạn đang ở trong trình soạn thảo nội dung, chỉ cần thêm một khối ‘Mã ngắn’.

Bây giờ, hãy nhập shortcode bạn đã sao chép trước đó vào khối 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 trang web của mình để xem các mục nhập biểu mẫu đang hoạt động.

Đây là những gì chúng trông như thế nào trên trang web demo của chúng tôi:

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

Một cách khác để hiển thị các mục nhập biểu mẫu trên giao diện người dùng của trang web WordPress của bạn là thông qua WPForms. Tuy nhiên, phương pháp này yêu cầu chỉnh sửa mã và được khuyến nghị cho người dùng nâng cao có kiến ​​thức về mã hóa.

WPForms là plugin biểu mẫu liên hệ tốt nhất cho WordPress và cho phép bạn tạo các loại biểu mẫu khác nhau bằng cách sử dụng trình tạo biểu mẫu kéo và thả.

Chỉ cần lưu ý rằng nếu bạn muốn xem các mục nhập biểu mẫu của mình trong bảng điều khiển WordPress, thì bạn sẽ cần WPForms Pro phiên bản. Cũng có một WPForms Lite phiên bản mà bạn có thể sử dụng miễn phí, gửi thông báo qua email về tất cả các mục nhập biểu mẫu của bạn.

Đầ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 chúng tôi về cách cài đặt plugin WordPress.

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

Khi bạn bắt đầu nhận được các mục nhập biểu mẫu, bạn sẽ cần nhập mã sau vào tệp functions.php của chủ đề hoặc trong một plugin dành riêng cho trang web. Vui lòng xem hướng dẫn của chúng tôi về cách dễ dàng thêm mã tùy chỉnh trong 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 https://wpforms.com/developers/how-to-display-form-entries/
 *
 * 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 (https://a.cl.ly/bLuGnkGx).
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '
No entries found.
';
    }
 
    ob_start();
 
    echo '';
 
        echo '';
 
            // Loop through the form data so we can output form field names in
            // the table header.
            foreach ( $form_fields as $form_field ) {
 
                // Output the form field name/label.
                echo '';
            }
 
        echo '';
 
        echo '';
 
            // Now, loop through all the form entries.
            foreach ( $entries as $entry ) {
 
                echo '';
 
                // Entry field values are in JSON, so we need to decode.
                $entry_fields = json_decode( $entry->fields, true );
 
                foreach ( $form_fields as $form_field ) {
 
                    echo '';
                }
 
                echo '';
            }
 
        echo '';
 
    echo '
';
                    echo esc_html( sanitize_text_field( $form_field['label'] ) );
                echo '
';
 
                        foreach ( $entry_fields as $entry_field ) {
                            if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
                                echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
                                break;
                            }
                        }
 
                    echo '
';
 
    $output = ob_get_clean();
 
    return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Sau khi thêm mã tùy chỉnh vào trang web của bạn, bạn sẽ cần nhập mã ngắn sau vào bất kỳ trang hoặc bài đăng nào để hiển thị các mục nhập biểu mẫu.

[wpforms_entries_table id="FORMID"]

Chỉ cần thay thế FORMID bằng ID của biểu mẫu của bạn.

Bạn có thể tìm thấy ID của biểu mẫu bằng cách truy cập WPForms »Tất cả các biểu mẫu và sau đó nhìn vào cột Mã ngắn.

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

Tiếp theo, hãy tiếp tục và thêm một khối ‘Mã ngắn’.

Sau khi thêm khối, chỉ cần nhập mã ngắn của bạn.

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.

Đây là bản xem trước của các mục nhập biểu mẫu của chúng tôi trông như thế nào trên giao diện người dùng:

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

Chúng tôi hy vọng rằng bài viết này đã giúp bạn tìm hiểu cách hiển thị các mục nhập biểu mẫu WordPress trên trang web của mình. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tạo chủ đề WordPress tùy chỉnh hoặc so sánh chuyên gia của chúng tôi về phần mềm trò chuyện trực tiếp tốt nhất cho doanh nghiệp nhỏ.

Nếu bạn thích bài viết này, thì hãy đăng ký của chúng tôi Kênh Youtube cho các video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.

Bài đăng Cách hiển thị mục nhập biểu mẫu WordPress trên trang web của bạn lần đầu tiên xuất hiện trên WPBeginner.