워드프레스 Quform의 제출 내용을 프런트엔드에 표시하는 방법(+wpDataTables 플러그인) - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 Quform의 제출 내용을 프런트엔드에 표시하는 방법(+wpDataTables 플러그인)

Last Updated: 2021년 9월 26일 | 30개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

이전 글에서 Quform에서 제출한 글을 케이보드 게시글로 등록하는 방법에 대해 간략히 언급했습니다. 다른 방법으로 wpDataTables 플러그인을 사용하여 Quform 문의폼 데이터를 프런트엔드에 표시할 수 있습니다.

Quform 컨탠트 폼을 통해 제출한 내용을 프런트엔드에 표시하는 방법

이러한 방법보다는 다른 방법으로 프런트엔드에 표시하는 방법으로 wpDataTables라는 플러그인을 사용할 수 있다고 합니다. 프런트엔드에 표시하는 방법에 대해 Quform에서는 다음과 같은 방법을 제시하고 있습니다.

워드프레스 알림판에서 Quform > Form Builder > Settings > Database에서 제출한 내용을 커스텀 데이터베이스 테이블에 저장하도록 설정한 후에, wpDataTables를 사용하여 프런트엔드에 표시할 수 있습니다.

KBoard와 같은 한국형 게시판의 사용이 꺼려지는 경우에는 위와 같이 Quform에서 제시하는 방법을 사용하는 것을 고려해볼 수 있습니다.

워드프레스 Quform의 제출 내용을 프런트엔드에 표시하는 방법

wpDataTables에 대한 내용은 이 글에서 "wpDataTables – 워드프레스용 테이블/차트 플러그인" 부분을 참고해보시기 바랍니다.

다음 영상에서는 WPForms로 만든 문의폼을 통해 제출한 데이터를 프런트엔드에 표 형식으로 표시하는 예를 보여줍니다.

Contact Form 7의 경우 커스텀 데이터베이스를 직접 만들어서 Contact Form 7의 제출 내용이 저장되도록 한 후에 위의 방법을 따르면 될 것 같습니다. (약간의 프로그래밍 지식이 필요한 작업입니다. 그냥 Quform을 사용하는 것이 더 효율적일 것입니다. Contact Form 7은 보안상에도 별로 좋지 않다고 하네요.)

Contact Form 7을 사용하는 경우에는 Flamingo 플러그인과 Contact Form 7 Views 플러그인을 설치하여 프런트엔드에 사용자가 제출한 데이터를 표시할 수 있습니다. 자세한 내용은 "워드프레스 Contact Form 7 데이터 표시하기"를 참고해보세요.

사용자가 자신의 데이터를 보고 편집할 수 있는 편집 가능한 테이블 만들기

wpDataTables를 사용하여 사용자가 자신의 데이터만 편집(수정)할 수 있도록 편집 가능한 테이블을 만드는 방법을 다음 영상에서 확인할 수 있습니다.

User ID는 워드프레스에서 사용자 ID로서 자동으로 워드프레스에서 가져오는 것 같습니다.

This is the ID of the user in wordpress. (Given automatically from wordpress)

이 플러그인은 DB 작업이 빈번한 사용자가 활용하면 시간을 크게 절감할 수 있을 것입니다.

I just purchased the plugin and it works perfectly, exactly like i had hoped. Saved my IT team tons of time. If you need a table plugin with oomph, this is your plugin.

생각처럼 설정하는 데 어려움을 겪는 경우 플러그인 판매자에게 문의해보시기 바랍니다. Codecanyon에서 플러그인을 구입하면 기본 6개월의 지원이 제공되고, 지원 연장 옵션을 선택하면 12개월 간 지원을 받을 수 있습니다. 또한, 지원이 만료되더라도 업데이트는 계속 받을 수 있습니다. 지원 종료 후에 지원을 받으려면 지원을 구매해야 합니다. (판매자에게 문의할 필요가 없다면 지원을 갱신하거나 구입할 필요가 없습니다.)

참고



30 개 댓글

Leave a Comment

  1. ;;;;;;;;;;;요세 고객쪽에서 워드프레스로 개발건을 의뢰하네요..전 디자이너인데..ㅠㅠ 그래서 죄송하지만 조언을 구할려고 합니다. 로그인 사용자가 1개의 quforms으로 폼을 작성합니다. 그걸 가지고 wpdatatable로 불러와서 테이블을 만듭니다. 테이블구성에서 로그인 사용자 이름은 필수로 들어갑니다. 클라언트쪽 요구사항 1. 테이블에서 본인이 작성한 내용만 보이게 해야 합니다. 2. 관리자는 전체가 다 보여야 한다.

    응답
    • 안녕하세요, 정민호님. Quform 데이터를 케이보드로 등록되도록 하고, 케이보드에서는 작성자 글만 보이도록 하면 될 것도 같습니다. 이 경우 로그인 사용자들만 Quform 폼을 작성하도록 해야 할 것입니다. Quform 데이터를 Kboard로 제출하는 소스는 다음 글을 참고해보세요.

      https://www.thewordcracker.com/intermediate/quform%EA%B3%BC-%EC%BC%80%EC%9D%B4%EB%B3%B4%EB%93%9C-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EC%97%B0%EB%8F%99-%EC%86%8C%EC%8A%A4-%EC%BD%94%EB%93%9C/

      Quform에서 사용자 ID를 케이보드로 넘기도록 하시면 될 것 같습니다.

      응답
      • 우선 좋은 정보 항상 감사해 하고 있습니다.
        답글주신 조언이 아닌 다행이 wpdatatable에서 본인이 작성한 글은 본인이 볼수 있는 기능이 있어서 그거로 해결했는데, 다른 문제점이 wpdatatable에서는 로그인시 확인을 정수로만 확인합니다. 예를 들어 홍길동이라는 사람이 7번째로 등록된 회원이면 db에 등록자 순서 7번째를 홍길동이라고 판단을 하는데 설명보다는 wpdatatabls에서 올린 영상을 보시는게 나을것 같아서 링크https://youtu.be/soebSZ64m-E 테이블에서 새테이블로 작성을 하면 자동으로 그 순서를 물어서 오는데 uforms으로 작성시는 문제점이 몇가지 있네요.
        문제점 : 1. 로그인을 한 후 quforms작성해서 wpdatatable로 넘기는 과정에서 로그인 등록 순서가 userid로 넘어가야 작성한 폼이 테이블에 보이는데 quforms에 작성시 자동으로
        wp_users에 id순서가 넘어갈수 있게 하는 방법이 없을까요?
        지금 차선책으로 아이디 등록시 닉네임을 값을 id순서로 할려고 했는데 외형상 좀 이상할것 같아서..;;; 훅이나 다른 방법이 없을까요?

      • wpDataTables 플러그인을 사용하여 본인 글을 볼 수 있도록 하려면 Quform에서 데이터를 전달할 때 user id를 넘겨야 할 것 같습니다.

        Quform에서는 필드 값을 동적 데이터로 미리 채울 수 있습니다. 다음 글을 참고해보세요:

        https://cafe.naver.com/wphomepage/14420

        로그인 사용자에 대한 데이터로는
        - IP 주소
        - User Agent
        - Display Name (표시 이름
        - 이메일
        - Logon (로그온)
        - User Metadata (사용자 메타데이터)

        등의 정보가 있습니다.

        Logon을 선택했을 때 user id를 전달하는지 확인해보시기 바랍니다.

      • 해결했습니다.
        {user|ID} 라고 임의값을 넣었는데 그 값을 불러왔네요.
        워드프레스 정보꾸러미 덕분에 거래처 원하는걸 만들어줬네요 감사합니다.

      • 문제가 해결되었다니 다행이네요.

        다른 방법으로 값을 전달할 때 다음 값을 전달해도 될 같습니다.

        $current_user_id = get_current_user_id();

        또는

        $current_user = wp_get_current_user();
        $current_user_id = $current_user->ID;

        (참조 문서 - https://developer.wordpress.org/reference/functions/get_current_user_id/ )

        즐거운 저녁 시간 보내시기 바랍니다.

  2. 안녕하세요. 자꾸 귀찮게 해드려서 죄송합니다. ㅠㅠ
    quforms에서 file upload 폼을 만들고 이미지 파일을 업로드 할때 이미지 사이즈를 강제로 줄일수 있는 방법이 없을까요? 하루 700장 사진이 업로드 하는 사이트를 하는 제작 중인데...사진 용량이 3메가 넘어가니까 서버용량이 감당이 안되네요..;;;

    응답
    • 안녕하세요? 댓글은 항상 환영합니다. 궁금한 점이 있으시면 언제든지 댓글을 올려주세요. 궁금한 사항이 없어도 댓글을 올려주시면 감사하겠습니다. 댓글이 많으면 SEO에도 도움이 됩니다.ㅎ

      문의하신 사항에 대해서는 몇 가지 솔루션을 생각해볼 수 있을 것 같습니다.

      1. 가장 좋은 것은 이미지를 업로드하기 전에 압축을 하여 이미지 크기를 줄이는 것입니다. 저는 이미지 압축 사이트에서 이미지를 압축한 후에 업로드하고 있습니다. 너무 압축이 되어 이미지가 선명하게 나오지 않는 경우가 간혹 있지만, 서버 저장 공간을 줄이는 좋은 방법 같습니다. 포토샵에서 웹 이미지로 저장하기 옵션을 통해서도 그림 파일 압축이 가능합니다.

      2. 이미지를 서버에 저장할 필요가 없고 이메일로만 받으면 된다면 파일을 서버에 저장하는 옵션을 해제하면 간단히 해결될 것입니다.

      3. 세 번째 방법으로 파일 업로드 크기를 제한하는 것입니다. Quform에서는 파일 업로드 크기 제한 옵션이 있으므로 이 옵션을 통해 업로드 가능한 파일 크기를 1MB 정도로 낮추고, 만약 이 용량을 초과한다면 경고 메시지를 표시할 수 있습니다. 또한 서브 라벨에 '1MB 이하의 파일만 업로드 가능합니다. 파일 크기가 이보다 큰 경우 파일 크기를 줄여주세요.'와 비슷한 안내문을 표시하는 것도 가능할 것입니다.

      4. 또 한 가지 방법을 더 생각해볼 수 있는데요. 이 방법이 작동할지는 테스트가 필요합니다. 원하는 대로 작동해도 서버 용량 절감에는 효과가 없을 수도 있을 것 같습니다.

      1) 먼저 WP Smush와 같은 이미지 최적화 플러그인을 설치합니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-wp-smush/

      이런 플러그인을 설치하여 활성화하면 미디어 파일을 업로드할 때 압축을 시킵니다. 하지만, 무료 버전에서는 원본 크기를 유지합니다. 유료 버전을 사용해야 원본 자체의 크기도 줄여줍니다.

      2)
      Quform에서는 이미지를 미디어 라이브러리에 저장하는 옵션도 있습니다.

      https://www.screencast.com/t/zOUPJn6SPsn

      미디어 라이브러리에 저장하는 옵션을 활성화하면 이미지가 미디어 라이브러리에 업로드되면서 WP Smush 등의 플러그인을 통해 압축이 될 것입니다. 하지만 유료 버전을 사용해야 원본 크기가 조정될 것입니다.

      또한, 문제는 미디어 라이브러리에 업로드되면서 썸네일 파일들도 함께 생성될 수 있습니다. /wp-content/uplaods/2021/... 폴더 아래를 살펴보면 같은 이름의 이미지 파일들이 여러 개 생성된 것을 확인할 수 있습니다.

      https://www.thewordcracker.com/intermediate/too-many-image-files-in-wordpress/

      그래서 이 방법은 오히려 서버 저장 공간을 더 차지할 가능성도 있어 실효성이 없을 것도 같습니다.

      위의 사항을 고려하여 적절한 방법을 선택하시기 바랍니다. 개인적으로는 파일 업로드 크기를 제한하고 "이미지를 업로드하기 전에 압축을 하거나 이미지 사이즈를 줄여달라"고 요청하는 안내문을 표시하는 것이 괜찮지 않을까 생각됩니다.

      응답
      • 빠른 답변 정말 감사합니다. 그런데 700장의 사진이 컴퓨터나 기존 사진을 업로드 하는게 아니고, 카메라로 찍어서 올리는 방식입니다. 그걸 nas에 설치한 워드프레스를 통해 자료를 받습니다. 현재는 고객사에서 원하는 걸 구현은 다했는데 서버용량 관리와 트래픽 문제가 발생할것 같아 업로드시 워드프레스 사진 업로드처럼 자동으로 줄일 방법을 찾고 있습니다. ㅠㅠ

      • 조금 더 사이트 구성을 말씀드리면 폼으로 발주 양식을 받습니다. 발주양식에 10~12장에 사진을 받는데 발주를 넣는 방식이 스마트폰카메라를 통한 발주입니다. 답변 주신 방법으로는 구현이 좀 힘들것 같습니다.(올리시는 분들이 컴맹이 대부분이여서..) quform포럼가서 기존 자료를 검색하니까 저하고 비슷한 분 몇분이 있었는데 포럼관리자 답변은 php코드가 필요하다. , 의견감사하다가 전부여서... ㅠㅠ 3~4메가 사진을 하루 700장 1년이면 대략 740기가라는 아주 아름다운 용량이 나와서 ...;;; 혹 quform hook 기능이나 아님 스크립트 코드를 이용한 자동 용량 줄이기 방법은 없는지 이게 안풀리니까 은근히 화도 나도 방법을 알고 싶네요.. 조언 구합니다.

      • 음... 이 경우 이미지 파일을 PC로 백업한 다음 정기적으로 (예를 들어, 한 달에 한 번) 삭제하는 것은 어떨까요?

        Quform에서 파일 업로드 필드를 만들어 확인해보니 /wp-content/uploads/quform/2/2021 형식의 폴더에 파일들이 업로드되네요.

        그리고 FileBird와 같은 워드프레스 미디어 라이브러리 폴더 플러그인을 사용하면 알림판에서도 파일을 체계적으로 관리할 수 있을 것입니다.

  3. 또..여기로 와서 조언을 구합니다. ㅠㅠㅠㅠ
    quforms 에서 select menu 항목을 db에 있는 내용으로 넣고 싶어서 구글신께 검색하니

    jQuery(function ($) {
    var calculate = function () {
    var total = 0;

    // A text input field with numeric value
    var
    val4 = $('.quform-field-3_7').val();
    val5 = $('.quform-field-3_8').val();
    if (val5 && val5.length && $.isNumeric(val5)) {
    total += parseFloat(val5*val4);
    }
    // Display the result to the user (optional)
    $('#form-total').text('Total:' + total+ '₩');

    // Set the value of the hidden field (optional)
    $('.quform-field-3_20').val(total).triggerHandler('change');
    $('.quform-field-3_10').val(total).triggerHandler('change');
    };

    // Calculate on page load
    calculate();

    // Recalculate when these text input fields are changed
    $('.quform-field-3_7').on('keyup blur', calculate);
    $('.quform-field-3_8').on('keyup blur', calculate);
    });

    라는 문구를 알려주셨는데 1차적으로 저 코드 자체가 자동을 안합니다.
    그리고 코드가 작동을 해도 quforms > settings >Custom JavaScrip 에서 php가 작동할지도...모르겠고

    정리하면 wpdatatables에 만든 db중에 row항목 하나를 quforms select menu항목에 넣고 싶은데..방법이 뭐가 있을까요...

    응답
    • 안녕하세요? 해당 jquery 스크립트는 사용자가 선택하거나 입력하는 값을 계산하여 다른 Quform 필드에 자동으로 입력되도록 하는 기능을 할 것입니다. 가령 계산값을 quform-field-3_20에 저장했다면, 폼을 제출할 때 quform-field-3_20 필드 값이 커스텀 테이블 내의 레코드로 저장되도록 코드를 만들어서 테마 함수 파일에 넣어야겠죠?

      정리하면 wpdatatables에 만든 db중에 row항목 하나를 quforms select menu항목에 넣고 싶은데..방법이 뭐가 있을까요...

      => 이 부분에 대해서는 정확히 어떻게 하기를 원하는지 감이 잡히지 않네요.
      WpDataTables로 만든 커스텀 DB에 Quform을 통해 전달되는 데이터를 넣은 다음, WpDataTables를 사용하여 프런트엔드에 표시하는 용도로 활용할 수 있을 것 같습니다만...

      응답
      • quforms으로 만든 기사명단 폼 (예 : 기사이름, 기사전화번호)을 이용해서 입력받습니다. 그러면 wpdatatables를 이용해서 두가지 항목을 db테이블을 만들고 저장합니다. 그리고 기사명단중에서 기사 이름만 다른 폼 selectmenu에 항목에 자동으로 기사이름만 불러 올 수 있게 항목이 만들어지는것을 만들고 싶습니다. https://godblessc.com/table.jpg

      • 의도를 이해했습니다.

        다음과 같은 quform의 훅을 사용하여 원하는 작업이 가능할 것입니다.

        테마의 함수 파일에 코드를 추가하세요.

        add_action('quform_pre_display_1', function (Quform_Form $form) {
        // Custom code
        });

        Custom code 부분에 DB에서 데이터를 끌어와서 채우는 코드를 넣어주시면 됩니다.

        예시로서 다음과 같은 코드를 참조할 수 있습니다.

        function my_load_booking_data($form)
        {
        global $wpdb;

        $id = isset($_GET['booking_id']) ? $_GET['booking_id'] : '';

        if (!$id) {
        return;
        }

        $result = $wpdb->get_row($wpdb->prepare("SELECT * FROM bookings WHERE id = '%s'", $id));

        if (is_object($result)) {
        $startDate = '';
        if ($result->start_date) {
        $startDate = explode('-', $result->start_date);
        $startDate = array('day' => (int) $startDate[2], 'month' => (int) $startDate[1], 'year' => (int) $startDate[0]);
        }

        $endDate = '';
        if ($result->end_date) {
        $endDate = explode('-', $result->end_date);
        $endDate = array('day' => (int) $endDate[2], 'month' => (int) $endDate[1], 'year' => (int) $endDate[0]);
        }

        $form->setValues(array(
        'iphorm_2_4' => $result->id,
        'iphorm_2_1' => $result->name,
        'iphorm_2_2' => $result->email,
        'iphorm_2_3' => $result->message,
        'iphorm_2_5' => $startDate,
        'iphorm_2_6' => $endDate
        ));
        }
        }
        add_filter('iphorm_pre_display_2', 'my_load_booking_data');

        위의 코드는 Form 1에서 제출한 데이터를 Form 2의 특정 필드에 채우는 기능을 하는 것으로 Quform에서 제시하고 있는 코드입니다. 그냥 참고만 하시고요, 실제 코드는 실제 상황에 맞게 조금 응용하면 될 것 같습니다.

        워드프레스에서 커스텀 DB로부터 데이터를 끌어오는 방법은 https://wordpress.stackexchange.com/questions/51984/how-to-display-data-from-custom-table-in-wordpress-database 글을 참고해보세요.

      • 아 그리고 위의 코드는 잘못 복사했습니다.
        jQuery(function ($) {
        var $select1 = $('.quform-field-10_3'),
        $select2 = $('.quform-field-10_4');

        var data = {
        'Toyota': [
        { text: 'Camry', value: 'camry' },
        { text: 'Corolla', value: 'corolla' },
        { text: 'RAV4', value: 'rav4' }
        ],
        'Ford': [
        { text: 'F-150', value: 'f-150' },
        { text: 'Focus', value: 'focus' },
        { text: 'Kuga', value: 'kuga' }
        ],
        'Volkswagen': [
        { text: 'Golf', value: 'golf' },
        { text: 'Polo', value: 'polo' },
        { text: 'Tiguan', value: 'tiguan' }
        ]
        };

        $select1.on('change', function () {
        var value = $select1.val(),
        options = [new Option('Please select', '')];

        if (data[value]) {
        for(var i = 0; i < data[value].length; i++) {
        options.push(new Option(data[value][i].text, data[value][i].value));
        }
        }

        $select2.html(options).prop('selectedIndex', 0);
        }).change();
        });

        이 코드인데..;;; 다른 코드를 넣었습니다.

      • 알려주신 방법대로 오늘 하루종일 이리저리 해봤지만 역시 코딩 이해와 응용능력이 안되서 현재는 포기를 했습니다. 유료 강의라도 있으면 듣고 싶네요..ㅜㅜ;

      • 안녕하세요. 수고가 많으십니다. 테스트를 해보니 생각처럼 만들기가 쉽지가 않네요.ㅠ 이 방식을 구현하는 방법을 찾아보니 Gravity Forms 플러그인의 애드온 중에 이런 기능을 제공하는 플러그인이 있는 것 같습니다. https://gravitywiz.com/documentation/gravity-forms-populate-anything/ 사이트를 참고해보세요.

        https://www.screencast.com/t/lW8z0BvA

        Quform은 심플하게 사용하기에는 좋지만 개발이 필요한 경우에는 Gravity Forms가 기능면에서 더 풍부한 것 같습니다. Gravity Forms 요금표를 살펴보니 Basic이 연간 59달러로 매년 비용이 나가기 때문에 quform에 비해서는 비용 부담이 있는 편입니다.

        먼저는 애드온 플러그인 개발자에게 원하는 대로 구현이 가능한지 한 번 문의해보시면 좋을 듯 합니다.

    • 늦은 시각까지 수고가 많으십니다. 문제가 해결되었다니 다행이네요.

      큐폼에서도 자체적으로 DB 테이블을 생성하므로, 커스텀 테이블을 만들지 않고, Quform DB 테이블 내의 레코드를 불러와서 프런트엔드에 표시한다면 관리자 페이지 내에서 수정할 경우 프런트엔드에도 반영될 것입니다. 하지만 Quform에서는 wp_quform_entiries와 wp_quform_entry_data라는 두 개의 DB 테이블을 생성하고 테이블 열 구조가 조금 복잡하여 MySQL의 Join을 사용하여 원하는 데이터로 나열할 수 있는 것 같습니다. wpDataTables를 활용하면 Quform 문의폼 데이터를 프린트엔드에 원하는 대로 표시할 수 있을 것입니다.

      즐거운 한 주 보내시기 바랍니다.

      응답
  4. 빠른 답변 감사합니다. 본문에 첨부해주신 영상 보고 수정하는 테이블 까지는 만들었는데, 프론트 엔드로 수정하면 DB쪽에 수정한 데이터가 복사되서 새로 생기는 문제가 발생했습니다. 수정할때마다 새롭게 생겨서...

    응답
  5. mysql에서 테이블 만들고, quforms에서 database도 만들어서 정상적으로 입력은 됐는데, quforms > entries에서 내용 수정을 했는데 mysql데이트는 수정이 안되는데..혹시 이부분 해결책 없을까요..;;;ㅜㅜ

    응답
    • 안녕하세요, 정민호님. Quform에서는 데이터를 DB에 저장하는 옵션을 제공합니다. 기본값을 그대로 사용할 경우 Quform 문의폼을 통해 제출되는 데이터가 자체 DB 테이블에 저장되고 Forms > Entries에서 확인이 가능합니다. 기본적으로 wp_quform_entry_data 테이블에 저장이 되며, entry_id, element_id, value 등 3개의 컬럼으로 구성되어 있습니다.

      Forms > Entries에서 수정할 경우 wp_quform_entry_data 테이블 내의 레코드가 수정됩니다.

      커스텀 테이블을 만들 경우 wpDataTables > Create a Table에서 Create a data table manually를 선택하여 새로운 테이블을 만드시고,

      컬럼을 만들 때 User ID 컬럼을 하나 추가하도록 합니다. 그런 다음 Editing 탭에서 Allow front-end editing(프런트엔드 편집 허용) 옵션을 활성화할 수 있습니다.

      https://www.screencast.com/t/tJeQlvzGFNBf

      생각처럼 구현하기 어려운 경우 wpDataTables 판매자에게 지원을 요청해보시기 바랍니다. 이 플러그인을 잘 활용하면 개발 작업이 수월해질 것입니다. 이 플러그인은 유료 플러그인이기 때문에 막히는 부분이 있으면 지원을 요청할 수 있습니다.

      응답
      • 빠르고 친절한 답변 감사합니다. WPdatatable을 구매하고, 답변 주신것처럼 구현은 했는데 바로 그 다음 순서가 도무지 모르겠습니다. ㅠㅠ 최종은 quforms 데이터를 프런트엔드로 보내고 내용을 수정했을 때도 프런트 엔드에서 수정된 내용이 반영이 될 수 있게 하는 것인데 수정 반영이 부분이 설명 주신 것 까지 진행을 했는데 ...아고 같은 말만 되풀이 해서 죄송합니다. ㅜㅜ

      • 본문에 "사용자가 자신의 데이터를 보고 편집할 수 있는 편집 가능한 테이블 만들기" 섹션을 추가했습니다. 해당 섹션에 삽입된 유튜브 영상을 참고해보시겠어요? 생각처럼 잘 구현되지 않으면 wpDataTables 플러그인 판매자에게 문의하면 안내를 받을 수 있을 것입니다.

  6. 안녕하세요 블로그를 자주보고 있는 워드프레스 새내기입니다.
    국내에서 워드프레스 자료를 가장 잘 정리된 사이트라서 많은 도움이 되고 있어요!
    홈페이지를 제작중에 quform에서 입력받은 데이터를 wpDataTables로 받아보고싶은데
    연결이안되고 있어요 ㅜㅜ
    혹시 해당사항에 대한 설명이나 자료 부탁드려도 될까요?

    응답
    • 안녕하세요?

      Quform 컨택트 폼이 제출되면서 DB에 데이터가 저장됩니다.
      하지만 살펴보니 데이터가 원하는 방식으로 저장되지 않기 때문에 wpDataTables로 처리하여 보여주고 싶은 경우에는 quform에서 데이터를 전송하기 직전에 별도의 테이블을 만들어서 데이터를 원하는 방식대로 저장해야 할 것 같습니다.

      조금 구체적으로 설명하면... 현재 Quform 테이블에서는 다음 그림과 같이 entry_id, element_id, value 세 개의 필드(열)로 되어 있습니다.

      https://www.thewordcracker.com/wp-content/uploads/2018/10/Quform-data-2.jpg

      별도의 테이블을 만들어서 원하는 필드에 각 값이 들어가도록 phpMyAdmin에서 작업을 해주시고, 그런 다음에 Quform에서 데이터가 전송되기 전에 DB에도 값이 저장되도록 하면 작업이 수월해질 것입니다.

      결국 https://www.thewordcracker.com/intermediate/wordpress-copy-quoform-messages-to-kboard/ 글에서 설명하는 것과 비슷한 방식이 될 것 같습니다.

      phpMyAdmin에서 테이블과 필드를 만드는 방법은 다음 글을 참고해보세요.

      https://www.liquidweb.com/kb/creating-tables-in-a-database-with-phpmyadmin/

      문제는 Quform에서 폼을 발송하기 전에 데이터가 직접 만든 테이블에도 저장되도록 해야 하는 데요. 그것은 초보자가 하기에는 쉽지 않은 측면이 있는 것 같습니다. 직접해보고 싶은 경우 다음 kopress 글을 참고해보시기 바랍니다.

      https://kopress.kr/topic/%ED%8F%BC%EB%B9%8C%EB%8D%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-quform%EC%97%90%EC%84%9C-%EB%B3%84%EB%8F%84-db%EC%97%90-%EA%B8%B0%EB%A1%9D%ED%95%98%EA%B3%A0-%EB%B6%88%EB%9F%AC%EB%93%A4%EC%9D%B4/

      응답
      • 정말 감사합니다!!
        이렇게 빠르고 상세한 답변주실줄 몰랐는데 정말 많은 도움됐습니다
        블로그 번창하시고 앞으로도 좋은 콘텐츠 부탁드립니다~!

카페에서 워드프레스 정보를 공유하실 수 있습니다.

Thanks!